时间戳

首页 > 解决方案 > 在 Recharts 中，如何仅显示轴上的第一个和最后一个刻度？

recharts - 在 Recharts 中，如何仅显示轴上的第一个和最后一个刻度？

问题描述

我有一个包含 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 }
]

我尝试了区间、tickCount 和刻度数组的各种组合，但没有任何效果——例如，上面的代码给出了“1 3 6 9 13”。

如何只显示 XAxis 上的第一个和最后一个刻度？它们可以是硬编码的，所以假设我想要“12:00”开头和“16:00”结尾。我该如何做到这一点？

标签： recharts

解决方案

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

如果您需要刻度上的特定标签，您可以在数组上添加一个属性，例如name您希望使用的硬编码名称，如下所示：

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>

否则，如果您不希望使用硬编码标签，则需要提供0值和lineData.length - 1（在您的示例中为 13）值来设置第一个和最后一个刻度。

这是使用硬编码值查看结果的小提琴：https ://jsfiddle.net/hvgxw5pc/1/

推荐阅读