如何在 Chart.js 中正确绘制两个非同步时间序列数据集_技术教程

本文详解如何使用 chart.js 的时间轴（time axis）和对应的时间适配器，将两个采样时间不一致、但共享同一时间维度的传感器数据集（如 co₂ 测量值）准确叠加显示在单一线图中。

在 Chart.js 中绘制多个非同步时间序列（即各数据点具有不同时间戳，无法对齐到统一时间网格）时，不能依赖默认的 category 或 linear X 轴——否则会出现 X 值未渲染、坐标错位或轴线消失等问题（正如提问者遇到的“X 轴未绘制”现象）。根本解法是：显式声明 X 轴为 'time' 类型，并确保时间格式被正确解析。

✅ 正确配置步骤

启用 time 轴类型：在 options.scales.x 中设置 type: 'time'；
指定时间单位与格式（可选但推荐）：通过 time.unit（如 'second', 'minute', 'millisecond'）和 time.tooltipFormat 提升可读性；
引入并注册时间适配器：Chart.js v3+ 默认不内置时间解析能力，需额外引入 chartjs-adapter-date-fns（推荐）或 chartjs-adapter-moment（已逐步弃用）；
确保数据中的 x 值为合法时间类型：支持 Date 对象、ISO 8601 字符串（如 "2025-05-20T14:23:18.123Z"）或时间戳（毫秒数）。

✅ 完整可运行示例代码

function drawChart() {
  const ctx = document.getElementById('chart1').getContext('2d');

  // 示例数据：两个传感器，各自独立的时间戳序列
  const dataset0 = sensorModulesDict[sensorIDs[0]].map(item => ({
    x: new Date(item.time), // ✅ 确保为 Date 实例（或 ISO 字符串）
    y: item.co2
  }));

  const dataset1 = sensorModulesDict[sensorIDs[1]].map(item => ({
    x: new Date(item.time),
    y: item.co2
  }));

  new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [
        {
          label: 'Sensor 0 (CO₂)',
          data: dataset0,
          borderColor: '#81D929',
          tension: 0.3 // 可选：平滑曲线
        },
        {
          label: 'Sensor 1 (CO₂)',
          data: dataset1,
          borderColor: '#E67417',
          tension: 0.3
        }
      ]
    },
    options: {
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'minute',           // 自动按分钟粒度分组刻度
            tooltipFormat: 'HH:mm:ss', // 悬停提示格式
            displayFormats: {
              minute: 'HH:mm'
            }
          },
          title: {
            display: true,
            text: 'Time'
          }
        },
        y: {
          title: {
            display: true,
            text: 'CO₂ (ppm)'
          }
        }
      },
      interaction: {
        intersect: false, // 允许悬停时显示最近的点（即使不在同一时刻）
        mode: 'nearest'
      }
    }
  });
}

⚠️ 关键注意事项

❌ 不要传入字符串形式的 Unix 时间戳（如 "1716214998"）：Date("1716214998") 会解析失败。应传入毫秒数 1716214998000 或 ISO 字符串 "2025-05-20T14:23:18Z"；
✅ 控制台验证技巧：执行 dataset0[0].x instanceof Date 应返回 true；
? 若使用 date-fns 适配器，请确认其版本与 Chart.js v4 兼容（v3.x 适配器不兼容 v4）；
? 当两数据集时间范围差异极大时，Chart.js 会自动缩放 X 轴——如需固定范围，可设置 min/max：
```
x: { type: 'time', min: new Date('2025-05-20'), max: new Date('2025-05-21') }
```

通过以上配置，两个非同步时间序列将被精准映射至同一时间轴上，各自独立采样点自然分布，实现如题图所示的清晰双线对比效果——无需插值、无需对齐，真正尊重原始数据的时间语义。