reactjs - 如何在图表中的 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]: /image/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]}
/>