从 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

也许你可以尝试在你的图表之后添加带轴行程 none 的 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 2

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

见FAQ

Answer 3

添加带有透明描边和填充的 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>

从 VictoryChart 中删除轴

Remove Axis from VictoryChart

react-native

victory-charts