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

【问题标题】：Recharts - how do I set Y-Axis labels myself?Recharts - 我如何自己设置 Y 轴标签？
【发布时间】：2023-03-24 15:27:01
【问题描述】：

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

我将它绘制在这样的 LineChart 中：

<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，但我不能不知道如何改变它。我尝试更改“间隔”的值，但无法弄清楚其中的数字有何作用。

【问题讨论】：

标签： recharts

【解决方案1】：

要在 Y 轴上强制使用特定刻度值，您需要两个道具：

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

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

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

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

【讨论】：