Recharts

Question

我在 Recharts 中创建了一个图表。我有一系列日期，每个日期都有一个 0-10 范围内的关联值（仅限整数）。

我把它画成这样的折线图：

<LineChart data={mydata}>
  <XAxis dataKey="date" interval={"preserveStartEnd"}  height={60} tick={<CustomizedXAxisTick />} />
  <YAxis domain={[0,10]} interval={"preserveStartEnd"} />
  <Line type="monotone" dataKey="mykey" strokeWidth={2}/>
</LineChart>

x 轴看起来不错，但在 y 轴上显示的刻度线是 0、3、6 和 10。我宁愿显示 0、2、4、6、8、10，但我无法弄清楚如何改变它。我尝试更改 'Interval' 的值，但我无法弄清楚其中的数字有什么作用。

Answer 1

要在您的 Y-Axis 上强制指定刻度值，您需要两个道具：

tickCount 表示轴上显示的刻度数（默认设置为 5）
tick 专门为 Y-Axis 提供您想查看的报价。

因此，您的 Y-Axis 应该如下所示：

<YAxis domain={[0,10]} tickCount={6} tick={[0, 2, 4, 6, 8, 10]} />

interval 道具让你有机会 'skip' 刻度，所以如果设置为 0，所有间隔都应该显示。在1，一半会显示，等等

Recharts - 如何自己设置 Y 轴标签？

Recharts - how do I set Y-Axis labels myself?