Chart.js 2.7.0按类型分组X轴堆叠柱状图实现问题

嘿，我来帮你搞定这个分组堆叠柱状图的需求！你遇到的核心问题是没用到Chart.js专门用于同组内堆叠的stack属性，反而误用了多X轴的方式，咱们一步步来解决：

核心思路 #

要实现「同一分组内的数据集堆叠，不同分组并列」，不需要创建多个X轴，只需要给每个数据集指定stack属性——拥有相同stack值的数据集，会在X轴的同一类别位置上堆叠，同时配合坐标轴的stacked配置即可。

完整代码示例 #

var ctx = document.getElementById("chart1").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // X轴的分组标签，对应两个柱状组
        labels: ["分组1", "分组2"],
        datasets: [
            // 分组1的第一个堆叠数据：49
            {
                label: '数据A',
                data: [49, 0], // 分组2位置填0，不显示
                backgroundColor: 'rgba(255, 99, 132, 0.7)',
                stack: 'group1' // 指定属于group1堆叠组
            },
            // 分组1的第二个堆叠数据：59
            {
                label: '数据B',
                data: [59, 0],
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                stack: 'group1'
            },
            // 分组2的第一个堆叠数据：29
            {
                label: '数据C',
                data: [0, 29], // 分组1位置填0，不显示
                backgroundColor: 'rgba(255, 206, 86, 0.7)',
                stack: 'group2' // 指定属于group2堆叠组
            },
            // 分组2的第二个堆叠数据：32
            {
                label: '数据D',
                data: [0, 32],
                backgroundColor: 'rgba(75, 192, 192, 0.7)',
                stack: 'group2'
            }
        ]
    },
    options: {
        scales: {
            xAxes: [{
                stacked: true, // 开启X轴堆叠，让同stack的数据集在同一位置堆叠
                ticks: {
                    beginAtZero: true
                }
            }],
            yAxes: [{
                stacked: true, // 开启Y轴堆叠，让数值叠加
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

关键细节说明 #

• stack属性的作用：每个数据集的stack值决定了它属于哪个堆叠组，相同值的数据集会被放在X轴的同一类别位置上叠加。
• 数据数组的填充：对于不属于当前分组的数据集，对应位置填0，这样它就不会在该分组的位置显示。
• 坐标轴的stacked配置：必须同时开启X轴和Y轴的stacked为true，才能实现正确的堆叠效果——X轴控制同位置堆叠，Y轴控制数值叠加。

你之前的问题原因 #

• 直接设置全局stacked: true会让所有数据集都堆在同一个X位置，这不是你要的分组效果。
• 使用多个X轴（xAxisID）是不必要的，Chart.js的多轴适合完全独立的坐标轴场景，反而会导致轴重复、数据集找不到对应轴而隐藏的问题。

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