从VictoryChart中删除Axis

时间:2017-11-14 10:35:13

标签: react-native victory-charts

我使用胜利原生并且有一个带有VictoryLine和VictoryArea的VictoryChart作为孩子并想要删除图表的轴。有没有办法通过道具访问它?可能颜色可以设置为透明。

以下是一些代码:

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

3 个答案:

答案 0 :(得分:4)

使用透明的笔触添加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>

答案 1 :(得分:3)

也许你可以尝试在你的图表

之后添加没有轴行程的VictoryAxis
<VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryAxis style={{ axis: {stroke: "none"} }} />
</VictoryChart>

答案 2 :(得分:0)

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

请参阅FAQ