react-native - 从 VictoryChart 中删除轴

Question

我正在使用victory-native 并且有一个带有 VictoryLine 和 VictoryArea 作为子级的 VictoryChart，并且想要删除图表的轴。有没有办法通过道具访问它？可能颜色可以设置为透明。

这是一些代码：

 <VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
</VictoryChart>

Answer 1

添加带有透明描边和填充的 VictoryAxis：

<VictoryAxis style={{ 
    axis: {stroke: "transparent"}, 
    ticks: {stroke: "transparent"},
    tickLabels: { fill:"transparent"} 
}} />

那么结果就变成了：

 <VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryAxis style={{ 
    axis: {stroke: "transparent"}, 
    ticks: {stroke: "transparent"},
    tickLabels: { fill:"transparent"} 
  }} />
</VictoryChart>

Answer 2

也许您可以尝试在图表之后添加没有轴行程的 VictoryAxis

<VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryAxis style={{ axis: {stroke: "none"} }} />
</VictoryChart>

Answer 3

VictoryChart使用默认轴。如果您想在不使用任何轴的情况下绘制数据，请改用VictoryGroup。

查看常见问题解答