如何在图表中的y轴上按固定量间隔值

Question

我正在尝试在图表中显示一个图表，该图表的y轴将在5000s内上升。我希望它的刻度为0、5000、10000 ... ...最多比最大值多5000。理想情况下，笛卡尔网格应在这些刻度值处具有水平线。

我已经进行了大量的Google搜索，查看了github问题和SO问题。我尝试了各种间隔，tickSize，tick等。

<LineChart
  width={400} height={400}
  data={this.state.costs}
>
  <Line type="monotone" dataKey="self" stroke="#8884d8" />
  <CartesianGrid
    stroke="#ccc"
    vertical={false}
  />
  <XAxis dataKey="age" interval={0}/>
  <YAxis
    dataKey="self"
  />
</LineChart>

Answer 1

我相信您可以将yAxis ticks属性设置为任意值

所以

<YAxis
    dataKey="self" ticks={[0, 5000, 10000, 15000]}
  />

如果要对其进行动态计算，只需编写一些代码即可生成数组。