本文详解如何使用 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 字符串（如 "2024-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 字符串 "2024-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('2024-05-20'), max: new Date('2024-05-21') }
通过以上配置，两个非同步时间序列将被精准映射至同一时间轴上，各自独立采样点自然分布，实现如题图所示的清晰双线对比效果——无需插值、无需对齐，真正尊重原始数据的时间语义。
