ChartJS技术问题：标签已更新但数据集为空，图表无法显示

核心问题 #

初始化图表时的配置结构完全错误：

• data被设为空数组[]，但ChartJS要求data必须是包含labels和datasets的对象
• options被设为空数组，正确类型应为对象{}
• 未初始化datasets数组，导致后续chart.data.datasets.forEach遍历不到任何数据集，无法添加数据

修改后的初始化函数 #

function creerGraph()
{
    const ctx = document.getElementById("myChart");
    
    const config = {
        type: 'pie',
        data: {
            labels: [],
            datasets: [{
                data: [],
                backgroundColor: []
            }]
        },
        options: {},
        plugins: [] 
    };
    
    chart = new Chart(ctx, config);
}

优化后的添加数据函数 #

直接获取第一个数据集（饼图通常仅需一个数据集），同时处理颜色数组越界问题：

function ajouteDonnees(tabDonnees)
{
    const colors = ['#fc5c65','#fd9644','#fed330','#26de81','#2bcbba','#45aaf2','#4b7bec','#a55eea','#778ca3'];
    const dataset = chart.data.datasets[0];
    
    for(var 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();    
}

说明 #

修改后，初始化阶段就创建了合法的空数据集结构，调用ajouteDonnees时能正确向数据集中添加标签、数值和颜色，调用chart.update()后图表即可正常渲染。

内容的提问来源于stack exchange，提问作者Rikako