reactjs - Recharts ReferenceLine 数据点之间

Question

我有一个带有数字 x 轴的 Recharts LineChart。我想在任意 x 值上绘制 ReferenceLine，但如果 ReferenceLine 的 x 属性不是我数据中的任何 x 值，则它不会显示.

与

const data = [{ x: 1, y: 3 }, { x: 1.5, y: 4 }, { x: 2, y: 3 }];
...
<ReferenceLine x={1.7} stroke="green" label="actual" alwaysShow={true} />

什么都没有显示，因为

const data = [{ x: 1, y: 3 }, { x: 1.5, y: 4 }, { x: 2, y: 3 }];
...
<ReferenceLine x={1.5} stroke="green" label="actual" alwaysShow={true} />

有效。

我在这里构建了沙箱: https://codesandbox.io/s/recharts-playground-xxwnl

有没有办法让每个 x 都显示 ReferenceLine？

Answer 1

问题是我没有明确地将 XAxis 类型设置为数字。改变后

<XAxis dataKey="x" />

这个给

<XAxis type="number" dataKey="x" />

它的行为符合预期