时间戳

首页 > 解决方案 > 如何在图表中的 y 轴上按固定量间隔值

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

问题描述

我正在尝试在图表中显示一个图表，该图表的 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>

标签： javascriptreactjsrecharts

解决方案

我相信您可以将 yAxis ticks 属性设置为您喜欢的任何内容

所以，

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

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

推荐阅读