在“图表”中，如何仅显示轴上的第一个和最后一个刻度？

问题描述

我有一个带有14个数据点的图表折线图（尽管将来可能会有所不同，所以理想情况下，我不想对此进行硬编码）。我想在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": 46.0 },{ "data": 44.0 },{ "data": 42.0 }
]

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

如何仅显示XAxis上的第一个和最后一个刻度？它们可以是硬编码的，所以假设我要在开始处输入“ 12:00”，在结束处输入“ 16:00”。我该如何实现？

解决方法

要显示轴上的第一个和最后一个刻度，可以使用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/