本文详解 Chart.js 多图表场景下动态追加数据时常见的 Cannot read properties of undefined (reading 'push') 错误原因与解决方案，重点讲解 datasets 的数组结构特性及正确访问方式。
本文详解 chart.js 多图表场景下动态追加数据时常见的 `cannot read properties of undefined (reading 'push')` 错误原因与解决方案，重点讲解 `datasets` 的数组结构特性及正确访问方式。
在使用 Chart.js 创建多个实时更新的折线图时（例如每秒向两个图表分别推送传感器读数），一个高频错误是：调用 myChart.data.datasets.data.push(...) 时抛出 Uncaught TypeError: Cannot read properties of undefined (reading 'push')。该错误的根本原因在于对 Chart.js 数据结构的理解偏差——datasets 始终是一个数组（即使仅含单个数据集），而非直接的对象。
在您的初始化代码中：
const plotData0 = {
labels: [],
datasets: [{
data: [],
label: "WEIGHT",
borderColor: 'red',
borderWidth: 2,
tension: 0,
fill: false
}]
};
datasets 是一个包含一个对象的数组，因此必须通过索引（如 [0]）定位到具体的数据集对象，再访问其 data 属性。原始 addData 函数中 myChart0.data.datasets.data.push(data0) 的写法试图将 datasets 当作普通对象访问，而实际它是数组，故 datasets.data 为 undefined，导致 .push() 调用失败。
✅ 正确做法是显式指定数据集索引：
function addData(label, data0, data1) {
// 向第一个图表添加标签和对应数据点
myChart0.data.labels.push(label);
myChart0.data.datasets[0].data.push(data0); // ✅ 使用 [0] 访问首个数据集
// 向第二个图表添加标签和对应数据点
myChart1.data.labels.push(label);
myChart1.data.datasets[0].data.push(data1); // ✅ 同理
// 触发重绘
myChart0.update();
myChart1.update();
}
⚠️ 注意事项：
- 若后续需支持多数据集（如一个图表显示“WEIGHT”和“TEMPERATURE”两条曲线），则 datasets[0] 对应第一条，“datasets[1]”对应第二条，需按需调整索引；
- 每次调用 update() 前确保 labels 和各 datasets[i].data 长度一致，否则图表渲染可能异常；
- 为防止内存无限增长，建议在数据点超过阈值（如 100 个）时执行截断：
if (myChart0.data.labels.length > 100) { myChart0.data.labels.shift(); myChart0.data.datasets[0].data.shift(); }
? 扩展建议：若业务逻辑始终只使用单数据集，也可选择修改初始化结构（移除 datasets 的方括号），使其变为纯对象。但此做法违反 Chart.js 官方 API 规范（datasets 类型定义为 DataSet[]），不推荐用于生产环境，因可能引发兼容性问题或未来版本升级风险。
综上，掌握 Chart.js 的数据结构层级（chart.data.labels / chart.data.datasets[index].data）是实现稳定实时图表更新的关键基础。
