在 Recharts 中,如何只显示轴上的第一个和最后一个刻度?

In Recharts, how do I show just the first and final tick on an axis?

我有一个包含 14 个数据点的 Recharts LineChart(尽管将来这可能会有所不同,所以理想情况下我不想对它进行硬编码)。我想在 XAxis 上显示 2 个刻度值 - 第一个和最后一个。

所以,我有:

<LineChart width={100} height={50} data={lineData}>
  <Line type="monotone" dataKey="data" dot={false} />
  <XAxis />
</LineChart>

其中 lineData 是:

"lineData": [
  { "data": 43.0 },
  { "data": 44.5 },
  { "data": 45.0 },
  { "data": 41.0 },
  { "data": 35.0 },
  { "data": 32.0 },
  { "data": 24.0 },
  { "data": 18.0 },
  { "data": 21.0 },
  { "data": 26.0 },
  { "data": 32.0 },
  { "data": 46.0 },
  { "data": 44.0 },
  { "data": 42.0 }
]

我已经尝试了 interval、tickCount 和 ticks 数组的各种组合,但没有任何效果 - 例如上面的代码给出“1 3 6 9 13”。

如何在 XAxis 上只显示第一个和最后一个刻度?它们可以被硬编码,所以假设我想在开始时使用“12:00”,在结束时使用“16:00”。我该如何实现?

要显示轴上的第一个和最后一个刻度,您可以使用 ticks 道具,该属性采用带有特定刻度的数组来显示。在此数组中,您可以简单地放置第一个和最后一个刻度值。

如果您需要在刻度上添加一个特定的标签,您可以在数组上添加一个 属性,例如 name 和您希望使用的 hard-coded 名称,如下所示:

const lineData = [
  { "data": 43.0, "name": "12:00" },
  { "data": 44.5 },
  ...
  { "data": 44.0 },
  { "data": 42.0, "name": "16:00" }
];

然后,在 XAxis 中指定要显示的报价:

<LineChart width={200} height={50} data={lineData}>
  <Line type="monotone" dataKey="data" dot={false} />
  <XAxis dataKey="name" ticks={['12:00', '16:00']} />
  <YAxis />
</LineChart>

否则,如果您不希望使用 hard-coded 标签,则需要提供 0 值和 lineData.length - 1(在您的示例中为 13)值以设置第一个和最后一个报价。

这里是 fiddle 以查看具有 hard-coded 值的结果:https://jsfiddle.net/hvgxw5pc/1/