Chart.js 中如何正确绘制两个不同步的时间序列数据集

在 chart.js 中绘制两个时间不同步的数据集时，需将 x 轴类型设为 `'time'` 并引入对应的时间适配器（如 `chartjs-adapter-date-fns` 或 `chartjs-adapter-moment`），否则 `{x: timestamp, y: value}` 格式的数据无法被正确解析，导致 x 轴消失或点位错乱。

要成功在单一线图中并列展示两个采样时间不一致的时间序列（例如两个 CO₂ 传感器在不同时间点上报的数据），关键在于启用 Chart.js 的时间轴（time axis）并确保时间格式被正确识别。默认的 Category 或 Linear X 轴无法解析 {x: Date|timestamp, y: number} 结构的对象，因此即使数据数组结构正确（如控制台验证无误），X 坐标仍会显示为 undefined，造成轴线不渲染、点位堆叠在原点等现象。

✅ 正确做法如下：

1. 引入时间适配器（必需）
   Chart.js v3+ 不再内置时间解析能力，必须单独安装并注册适配器。推荐使用轻量且现代的 chartjs-adapter-date-fns（v2.0+ 支持）：

   npm install chart.js chartjs-adapter-date-fns

   然后在 JS 入口处注册（若使用 ES 模块）：

   import { Chart } from 'chart.js';
   import { DateFnsAdapter } from 'chartjs-adapter-date-fns';
   Chart.register(DateFnsAdapter);

   ⚠️ 注意：若使用 CDN，请确保 标签顺序为：chart.js → chartjs-adapter-date-fns（或 moment.min.js + chartjs-adapter-moment）。

2. 配置 X 轴为 'time' 类型，并指定时间单位与格式
   在 options.scales.x 中显式声明：

   options: {
     scales: {
       x: {
         type: 'time',
         time: {
           unit: 'minute', // 可选：'second', 'minute', 'hour', 'day', 'month', 'year'
           tooltipFormat: 'HH:mm:ss', // 悬停提示格式
           displayFormats: {
             minute: 'HH:mm'
           }
         },
         title: {
           display: true,
           text: 'Time'
         }
       },
       y: {
         title: {
           display: true,
           text: 'CO₂ (ppm)'
         }
       }
     }
   }

3. 保持数据格式为 {x, y} 对象数组（无需对齐）
   你的原始数据构造方式完全正确——每个数据集独立映射为带 x（Date 实例或 ISO 字符串）和 y 的对象即可：

   data: {
     datasets: [
       {
         label: 'Sensor A (CO₂)',
         data: sensorModulesDict[sensorIDs[0]].map(item => ({
           x: new Date(item.time), // ✅ 推荐：传入 Date 实例（最可靠）
           y: item.co2
         })),
         borderColor: '#81D929',
         tension: 0.3
       },
       {
         label: 'Sensor B (CO₂)',
         data: sensorModulesDict[sensorIDs[1]].map(item => ({
           x: new Date(item.time), // ✅ 同样传入 Date 实例
           y: item.co2
         })),
         borderColor: '#E67417',
         tension: 0.3
       }
     ]
   }

   ? 提示：item.time 若为 Unix 时间戳（毫秒），直接 new Date(item.time) 即可；若为 ISO 字符串（如 "2024-05-20T14:23:18Z"），也兼容。避免使用纯数字时间戳而不包裹 Date —— 部分适配器版本对此敏感。

   

   XPaper Ai

   AI撰写论文、开题报告生成、AI论文生成器尽在XPaper Ai论文写作辅助指导平台

   下载

4. 完整可运行示例片段：

   import { Chart } from 'chart.js';
   import { DateFnsAdapter } from 'chartjs-adapter-date-fns';
   
   Chart.register(DateFnsAdapter);
   
   const ctx = document.getElementById('chart1').getContext('2d');
   new Chart(ctx, {
     type: 'line',
     data: {
       datasets: [
         {
           label: 'Sensor 0',
           data: [{x: new Date('2024-05-20T10:00:00'), y: 420}, {x: new Date('2024-05-20T10:05:00'), y: 425}],
           borderColor: '#81D929',
           fill: false
         },
         {
           label: 'Sensor 1',
           data: [{x: new Date('2024-05-20T10:02:00'), y: 418}, {x: new Date('2024-05-20T10:07:00'), y: 430}],
           borderColor: '#E67417',
           fill: false
         }
       ]
     },
     options: {
       scales: {
         x: {
           type: 'time',
           time: { unit: 'minute' },
           title: { display: true, text: 'Timestamp' }
         },
         y: {
           title: { display: true, text: 'CO₂ (ppm)' }
         }
       },
       responsive: true,
       maintainAspectRatio: false
     }
   });

? 常见问题排查：

• ❌ X 轴空白？→ 检查是否遗漏 Chart.register(adapter) 或适配器未加载。
• ❌ 所有点挤在左侧？→ 确认 x 值是 Date 实例或合法 ISO 字符串，而非字符串格式的时间（如 "10:00"）。
• ❌ 时间显示为 Unix 数字？→ 在 time.displayFormats 中配置对应单位的格式化规则。
• ❌ 多个数据集重叠难区分？→ 启用 tension: 0.3（平滑曲线）或添加 pointRadius: 3 / borderDash 提升可读性。

通过以上配置，Chart.js 将自动对齐所有数据点到统一的时间轴上，无需手动插值或同步采样，真正实现“一图双源、异步共绘”。