javascript - 如何在 recharts 中按 y 轴上的固定数量分隔值

Question

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

我已经做了很多谷歌搜索，查看 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

我相信您可以将 y Axis ticks 属性设置为您喜欢的任何值
所以，

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

如果您希望它被动态计算，只需编写一些代码来生成数组。