Recharts多Y轴散点图24小时时间序列X轴重复小时问题求解

你当前的配置出现X轴重复小时，核心是两点：

• domain={['auto', 'auto']}会取数据中created字段的最小、最大值作为X轴范围，范围不一定正好覆盖完整的24个整点区间
• tickCount={24}仅为刻度数量的参考值，Recharts自动生成的刻度是在轴范围内均匀取值，很可能多个刻度落在同一个小时区间内，格式化后显示相同的HH值，就会出现重复

最稳妥的方式是自定义固定刻度+指定轴范围，完全控制刻度的生成逻辑，避免自动生成的刻度重复：

1. 先根据你要展示的时间范围，生成24个整点的时间戳数组作为刻度
2. 把数组的首尾值作为X轴的domain范围，数组本身作为ticks属性传入X轴配置

代码示例 #

// 生成24个整点时间戳的工具方法，可根据业务需求调整时间范围（比如改为最近24小时）
const get24HourTicks = () => {
  const ticks = [];
  // 示例逻辑：生成当日0点到23点的整点时间戳
  let current = moment().startOf('day');
  for (let i = 0; i < 24; i++) {
    ticks.push(current.valueOf());
    current = current.add(1, 'hour');
  }
  return ticks;
}

const xTicks = get24HourTicks();

// 修改后的X轴配置
<XAxis
    dataKey='created'
    domain={[xTicks[0], xTicks.at(-1)]}
    name='hour'
    tickFormatter={(unixTime) => moment(unixTime).format('HH')}
    type='number'
    ticks={xTicks}
/>

其他适配场景 #

如果你的业务需要展示非固定24小时的时间范围，只需要调整ticks的生成逻辑：提前把所有数据的created字段按小时去重，生成对应的整点时间戳数组作为ticks即可，无需修改其他配置。

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