如何在图表中的 x 轴上显示自定义值？

Question

 <LineChart
    width={400}
    height={200}
    data={data}
    margin={{
      top: 5, right: 30, left: 20, 
    }}
  >
    <CartesianGrid  />
    <XAxis dataKey="x" /* tick={false} *//>
    
    <YAxis  />
    <Tooltip content={tooltipContent}/>
    
    <Line type="monotone"  dataKey="y" strokeWidth={1} dot={false} activeDot={{ r: 5 }} />
    
  </LineChart>

我的数据集只包含小数点（23.444,54.6665,..）。我想将轴分成相等的 10 半（10、20、30、...100）。如何在轴上显示这些值？下面是图表的图像 [1]: https://i.stack.imgur.com/TatGP.png

Answer 1

要在 XAxis 上使用自定义值，或自定义 ticks，您需要在 XAxis 组件上使用以下属性：

用 type="number"
提供刻度值 ticks={[10, 20, 30, [...], 100]}
和域指定限制domain={[10, 100]}

最后，您的 XAxis 应该如下所示：

<XAxis
  dataKey="x"
  type="number"
  ticks={[10, 20, 30, [...], 100]}
  domain={[10, 100]}
/>

如何在图表中的 x 轴上显示自定义值？

how to show custom values on x-axis in recharts?

reactjs

recharts