
Chart.js 图表标签更新了但数据不显示,根本原因是配置对象中 data 结构未正确定义——datasets 必须是包含至少一个数据集对象的数组,而非空数组或未初始化对象。
chart.js 图表标签更新了但数据不显示,根本原因是配置对象中 `data` 结构未正确定义——`datasets` 必须是包含至少一个数据集对象的数组,而非空数组或未初始化对象。
在你最初的 creerGraph() 函数中,data: [] 的写法是错误的。Chart.js 要求 data 是一个对象,且必须包含 labels 数组和 datasets 数组(后者每个元素是一个含 data、backgroundColor 等属性的对象)。将 data: [] 写成 data: [] 会导致 chart.data.datasets 为 undefined,因此后续 dataset.data.push(...) 实际执行失败,控制台虽无报错,但数据始终无法写入。
✅ 正确的初始化方式如下:
function creerGraph() {
const ctx = document.getElementById("myChart");
const config = {
type: 'pie',
data: {
labels: [], // 标签容器(字符串数组)
datasets: [{
data: [], // 数值数据(数字数组)
backgroundColor: [], // 颜色数组(与 data 长度一致)
borderWidth: 0 // 可选:去除饼图边框更美观
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' }
}
},
plugins: []
};
window.chart = new Chart(ctx, config); // 建议加 window. 显式声明全局变量,避免作用域问题
}随后,在 ajouteDonnees() 中,你无需遍历 datasets(因为只有一个数据集),可直接操作首个数据集:
function ajouteDonnees(tabDonnees) {
const colors = ['#fc5c65','#fd9644','#fed330','#26de81','#2bcbba','#45aaf2','#4b7bec','#a55eea','#778ca3'];
tabDonnees.forEach((item, i) => {
chart.data.labels.push(item.Libellé);
chart.data.datasets[0].data.push(item.Nombre);
chart.data.datasets[0].backgroundColor.push(colors[i % colors.length]); // 防止索引越界
});
chart.update(); // 触发重绘,必需
}⚠️ 注意事项:
-
不要用
chart.data.datasets.forEach(...):若datasets未正确定义(如为[]或undefined),该循环不会执行,也不会报错,极易被忽略; -
确保
tabDonnees是标准 JavaScript 数组:WEBDEV 导出的结构表需通过.toJSArray()或类似方法转换(依 WEBDEV 版本而定),否则length和索引访问可能异常; -
调用
chart.update()是必须步骤:仅修改数据属性不会自动刷新图表; -
颜色数组长度不足时使用取模
%:避免colors[i]报undefined,提升鲁棒性。
完成上述修正后,图表即可正常渲染标签与对应数据。建议首次调试时在 ajouteDonnees 开头添加 console.log(chart.data),验证 datasets[0].data 是否已正确填充。


















