React Recharts 如何按时间顺序对X轴进行正确排序？

问题根源 #

你当前遇到的X轴时间顺序错乱，是因为Recharts的category类型X轴默认会以第一个序列的类目顺序为基准，其他序列独有的类目会直接追加到轴的末尾，不会自动做时间排序。

最优实现方案（无需修改原始序列数据，无需补0） #

直接通过XAxis的ticks属性手动指定全量、排序后的时间刻度即可，这是Recharts官方提供的自定义类目轴顺序的标准方案。

步骤1：生成排序后的全量时间刻度 #

// 提取所有序列中的时间点去重
const allTimePoints = new Set()
series.forEach(serie => {
  serie.data.forEach(item => {
    // 此处替换为你实际的时间字段，示例中混用了time/category，你代码里X轴的dataKey是endTime，按需调整
    const timeVal = item.time || item.category || item.endTime
    allTimePoints.add(timeVal)
  })
})

// 按时间升序排序，避免字符串排序出错
const sortedTimeTicks = Array.from(allTimePoints).sort((a, b) => {
  const convertToMinute = (timeStr) => {
    const [hour, minute] = timeStr.split(':').map(Number)
    return hour * 60 + minute
  }
  return convertToMinute(a) - convertToMinute(b)
})

// 如果你是固定全天每15分钟一个节点，也可以直接生成全量时间，不用从序列提取：
// const sortedTimeTicks = Array.from({length: 96}, (_, i) => `${String(Math.floor(i/4)).padStart(2, '0')}:${String((i%4)*15).padStart(2, '0')}`)

步骤2：修改X轴配置绑定ticks #

<ResponsiveContainer>
  <LineChart>
    <CartesianGrid strokeDasharray="2 2" />
    <XAxis
      dataKey="endTime"
      type="category"
      allowDuplicatedCategory={false}
      ticks={sortedTimeTicks} <!-- 新增这行即可 -->
    />
    <YAxis dataKey={dataKey} />
    <Tooltip />
    <Legend />
    {chartData.map((irvMachine, i) => (
      <Line
        data={irvMachine.data}
        name={irvMachine.irvMachine}
        dataKey={dataKey}
        stroke={colors[i]}
        activeDot={{ r: 4 }}
        type="monotone"
        connectNulls <!-- 可选：缺失数据的点位自动连线，不需要可以去掉 -->
      />
    ))}
  </LineChart>
</ResponsiveContainer>

方案优势 #

• 不需要修改原始业务数据，不需要为缺失的时间点补冗余的0值记录，避免出现不符合业务逻辑的虚假数值
• 时间轴顺序完全可控，后续新增序列不需要调整逻辑，只需要生成ticks的时候纳入新序列的时间点即可
• 如果是固定时间间隔的场景，直接生成全量时间刻度即可，完全不用依赖序列返回的时间点

内容的提问来源于stack exchange，提问作者Hodl