本文详解 Chart.js 多图表实时数据更新的常见错误与正确实践，重点解决 Cannot read properties of undefined (reading 'push') 错误，提供两种可靠方案：修正数组索引访问或调整 datasets 结构。
本文详解 chart.js 多图表实时数据更新的常见错误与正确实践，重点解决 `cannot read properties of undefined (reading 'push')` 错误，提供两种可靠方案：修正数组索引访问或调整 datasets 结构。
在使用 Chart.js 构建实时监控仪表板时，常需将传感器、指标等动态数据（如每秒采集的重量和传感器读数）同步推送到多个图表中。但初学者极易因对 Chart.js 数据结构理解偏差而报错——典型如 Uncaught TypeError: Cannot read properties of undefined (reading 'push')，其根本原因在于：datasets 始终是一个数组（即使仅含一个数据集），必须通过索引（如 [0]）访问内部对象，而非直接访问 .data 属性。
回顾原始代码，问题出在这一行：
myChart0.data.datasets.data.push(data0); // ❌ 错误：datasets 是数组，无 .data 属性
由于 plotData0.datasets 定义为 [{ data: [] }]（即包含一个对象的数组），datasets.data 为 undefined，故调用 .push() 报错。
✅ 推荐方案：保持标准 Chart.js 结构，正确索引访问
Chart.js 官方文档明确要求 datasets 为数组类型（支持多数据集叠加）。因此，应始终通过 datasets[0] 访问首个数据集：
function addData(label, data0, data1) {
// 正确：通过索引访问 datasets 中的第一个数据集对象
myChart0.data.labels.push(label);
myChart0.data.datasets[0].data.push(data0); // ✅
myChart1.data.labels.push(label);
myChart1.data.datasets[0].data.push(data1); // ✅
myChart0.update();
myChart1.update();
}⚠️ 注意事项：
- 若后续需为同一图表添加第二个数据集（如同时显示“WEIGHT”和“TEMPERATURE”），只需向 datasets 数组 push 新对象，并在 addData 中按需更新对应索引（如 datasets[1].data.push(...)）。
- 标签（labels）需与各数据集的 data 数组长度严格一致，否则图表渲染异常。
- 高频更新（如每秒 1 次）无需额外优化，但若频率提升至 10Hz+，建议启用 animation: { duration: 0 } 并限制标签数量（如保留最近 60 秒数据）以保障性能。
? 备选方案：修改 datasets 为单对象（不推荐）
虽可将 datasets: [{...}] 改为 datasets: {...} 并直接使用 .data，但这违反 Chart.js 设计规范，会导致：
- 无法添加多数据集；
- 与官方插件、类型定义（TypeScript）、社区示例兼容性下降；
- 后续升级易引发未知错误。
因此，坚持使用 datasets[0].data 是更健壮、可扩展的实践。
最后，配合定时器实现每秒推送示例：
let timestamp = 0;
setInterval(() => {
const weight = Math.random() * 100; // 模拟实时数据
const sensor1 = Math.random() * 50 + 20;
addData(`t=${timestamp++}`, weight, sensor1);
}, 1000);掌握这一核心结构差异，即可稳定驱动任意数量的 Chart.js 图表实现实时可视化。
