Recharts多Y轴散点图X轴时间戳如何在两个刻度间正确定位？

解决方案 #

你遇到的问题根源是X轴的范围和刻度没有按整点固定配置，导致时间戳无法按比例对应到小时刻度之间，按以下步骤修改即可实现需求：

1. 固定X轴时间范围：不要使用默认的domain={['auto', 'auto']}，改为手动指定你需要展示的时间跨度边界，比如展示过去24小时数据就取「当前时间往前推24小时的时间戳」为左边界，「当前时间戳」为右边界，保证X轴总跨度固定为24小时对应的毫秒数。
2. 自定义X轴刻度：生成对应每个整点的时间戳数组作为ticks属性值，让X轴只显示整点刻度，非整点的时间数据会自动按时间差比例落在相邻两个刻度之间。

代码示例 #

首先提前计算X轴的范围和刻度值：

// 示例为展示过去24小时数据的计算逻辑
const now = Date.now();
const dayAgo = now - 24 * 60 * 60 * 1000;
// 生成25个整点时间戳（覆盖24小时的首尾整点）
const xAxisTicks = Array.from({ length: 25 }, (_, index) => {
  const hourStamp = new Date(dayAgo);
  hourStamp.setMinutes(0, 0, 0);
  return hourStamp.getTime() + index * 60 * 60 * 1000;
})

然后修改X轴的配置项：

<XAxis
    dataKey='created'
    domain={[dayAgo, now]} // 固定24小时范围
    name='created'
    tickFormatter={(unixTime) => moment(unixTime).format('HH')}
    type='number'
    ticks={xAxisTicks} // 传入自定义整点刻度
/>

原理说明 #

Unix时间戳本身是连续的数值，固定X轴总跨度为24小时的毫秒差之后，每个小时的间隔对应的X轴像素距离是固定的，任意时间戳的位置会自动按比例计算：例如23:01的时间戳距离23点整刻度只有60*1000毫秒的差值，自然就会落在23和00两个刻度之间靠近23的位置。
如果你当前测试用的是4小时数据，只需要把时间范围的左边界改为4小时前的时间戳，生成对应4个整点的刻度数组即可。

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