Chart.js堆叠柱状图仅显示数据首位数字问题求助

你的代码存在三个核心问题，导致图表显示异常：

• 变量名拼写不一致：声明的是datasetes，赋值时却用了datasets，导致Chart无法读取正确数据集
• 数据集结构错误：误用PHP风格的=>和数组[]定义对象，不符合JavaScript语法
• 数据格式错误：data字段传入字符串而非数字数组，被Chart.js错误解析为字符序列，仅读取首位数字

修正后的完整代码 #

// 用对象数组定义符合要求的数据集
var datasets = [
    {
        label: "roland",
        data: [336], // 单标签对应单元素数字数组
        backgroundColor: 'rgba(255, 99, 132, 0.7)' // 堆叠时建议指定区分色
    },
    {
        label: "roland",
        data: [336],
        backgroundColor: 'rgba(54, 162, 235, 0.7)'
    },
    {
        label: "koen",
        data: [2],
        backgroundColor: 'rgba(255, 206, 86, 0.7)'
    },
    {
        label: "gerald",
        data: [43],
        backgroundColor: 'rgba(75, 192, 192, 0.7)'
    }
];

var total = 645; 

var ctx = document.getElementById('projectOfferte').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['medewerkers'],
        datasets: datasets,
    },
    options: {
        plugins: {
            title: {
                display: true,
                text: "Totaal Aantal uur: "+total,
                position: 'top',
                align: 'start',
            },
        },
        scales: {
            y: {
                stacked: true,
                beginAtZero: true // 让Y轴从0开始，避免堆叠高度失真
            },
            x: {
                stacked: true
            }
        }
    }
});

关键修正说明 #

1. 统一变量名：将datasetes改为datasets，确保赋值与引用一致
2. 修正对象语法：用{}包裹单个数据集，键值对使用JavaScript标准的:分隔
3. 规范数据格式：data字段必须是数字数组，单标签场景对应单元素数组，避免字符串解析问题
4. 优化显示效果：添加背景色区分不同堆叠项，开启beginAtZero让Y轴从0起始，更直观展示工时占比

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