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

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 轴上强制指定特定刻度值，您需要两个 Prop :

• tickCount 表示轴上显示的刻度数(默认设置为 5)
• tick 专门为 Y 轴提供您想要查看的刻度。

因此，您的 Y 轴应如下所示:

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

interval 属性让您有机会“跳过”刻度，因此如果设置为 0，则应显示所有间隔。在 1 上，将显示一半，等等