Chart.js日期刻度问题：最近30天与前30天数据对齐异常

核心问题 #

当前图表按日期的绝对时间顺序渲染，导致跨月的前期数据点位置错乱。要实现“同日期对齐（如7月22日与8月22日共轴）”且刻度按“前期25日至当期24日”排序，需放弃绝对时间排序，改用相对周期位置映射x轴坐标。

具体解决步骤 #

1. 给数据添加相对位置标识 #

不要直接用原始Date对象作为x轴依据，为每组数据的每个点计算周期内的位置索引，确保前期数据与当期数据的同周期位置一一对应：

// 定义结束日期（示例）
const endDate = new Date('2024-08-24');

// 处理当期30天数据（最近30天）
const currentData = Array.from({ length: 30 }, (_, i) => {
  const date = new Date(endDate);
  date.setDate(endDate.getDate() - i);
  return {
    date: date,
    dayOfMonth: date.getDate(),
    posIndex: 29 - i, // 索引从0到29，对应刻度从25日到24日
    value: Math.floor(Math.random() * 100)
  };
}).reverse();

// 处理前期30天数据（当期之前的30天）
const previousData = Array.from({ length: 30 }, (_, i) => {
  const date = new Date(endDate);
  date.setDate(endDate.getDate() - 30 - i);
  return {
    date: date,
    dayOfMonth: date.getDate(),
    posIndex: 29 - i, // 和当期数据的索引完全对应
    value: Math.floor(Math.random() * 100)
  };
}).reverse();

2. 自定义x轴刻度与标签 #

在图表配置中，使用posIndex作为x轴的数据源，同时手动指定刻度标签的顺序（前期25日至当期24日）：

// 以Recharts为例（对应你的代码沙箱使用的库）
<XAxis
  dataKey="posIndex"
  tick={{ fontSize: 12 }}
  tickFormatter={(index) => {
    // 定义需要的刻度标签序列
    const tickLabels = [25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24].slice(0,30);
    return tickLabels[index];
  }}
/>

3. 优化tooltip显示 #

如果需要在鼠标悬停时显示完整日期（如“7月25日”“8月25日”），可在Tooltip组件中配置：

<Tooltip
  formatter={(value, name, props) => {
    const fullDate = new Date(props.payload.date).toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
    return [`${fullDate}: ${value}`, name === 'current' ? '当期数据' : '前期数据'];
  }}
/>

关键提醒 #

• 必须保证两组数据的posIndex完全一一对应，才能实现同日期点的轴上对齐
• 绝对不要用原始Date对象作为x轴的dataKey，否则会按时间戳排序，导致跨月点位置错乱

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