Chart.js 图表标签更新成功但数据未显示，根本原因在于初始化时 data 属性未按规范定义为包含 labels 和 datasets 的对象结构，导致后续 dataset.data.push() 无目标可操作。
chart.js 图表标签更新成功但数据未显示，根本原因在于初始化时 `data` 属性未按规范定义为包含 `labels` 和 `datasets` 的对象结构，导致后续 `dataset.data.push()` 无目标可操作。
在 Chart.js 中，config.data 必须是一个结构完整、符合 API 规范的对象，而非空数组 []。你原始代码中：
data: [],
这会导致 chart.data.labels 和 chart.data.datasets 均为 undefined —— 即使后续调用 chart.data.labels.push(...)，JavaScript 会静默失败（不会报错，但实际未生效），因为 chart.data.labels 并不存在；同理，chart.data.datasets.forEach(...) 也会因 datasets 为 undefined 或空数组而跳过循环，致使 dataset.data.push() 完全不执行。
✅ 正确的初始化方式应明确声明 data 为对象，并预置 labels 数组与至少一个 dataset 对象：
function creerGraph() {
const ctx = document.getElementById("myChart");
const config = {
type: 'pie',
data: {
labels: [], // ← 必须是数组，用于存储类别名
datasets: [{
data: [], // ← 必须是数组，用于存储数值
backgroundColor: [] // ← 可选，但建议初始化
}]
},
options: { responsive: true, maintainAspectRatio: false }, // 建议补充基础配置
plugins: []
};
window.chart = new Chart(ctx, config); // 使用 window. 确保全局可访问（尤其 WEBDEV 环境）
}随后，在 ajouteDonnees 中即可安全操作：
function ajouteDonnees(tabDonnees) {
const colors = ['#fc5c65','#fd9644','#fed330','#26de81','#2bcbba','#45aaf2','#4b7bec','#a55eea','#778ca3'];
// 确保只操作第一个 dataset（饼图通常只需一个）
const dataset = chart.data.datasets[0];
for (let i = 0; i < tabDonnees.length; i++) {
chart.data.labels.push(tabDonnees[i].Libellé);
dataset.data.push(tabDonnees[i].Nombre);
dataset.backgroundColor.push(colors[i % colors.length]); // 防止索引越界
}
chart.update(); // 触发重绘
}⚠️ 注意事项：
-
不要使用
chart.data.datasets.forEach(...)动态遍历多个 dataset（除非你明确需要多数据集），饼图单数据集场景下直接引用datasets[0]更安全、高效； -
colors[i]存在越界风险，建议使用colors[i % colors.length]循环复用； -
chart变量需在全局作用域或闭包内可访问（WEBDEV 中推荐挂载到window.chart）； - 首次调用
ajouteDonnees前，确保 DOM 已就绪（如放在DOMContentLoaded或 WEBDEV 的PageLoad事件中）； - 若仍不显示，请检查控制台是否有
Canvas is not available或ctx is null错误，并确认<canvas id="myChart"></canvas>元素真实存在于页面中。
正确初始化数据结构，是 Chart.js 动态更新的基石——标签与数据必须“同源同构”，才能被引擎识别并渲染。
