Chart.js堆叠柱状图创建异常：显示为分组样式，求问题排查

你的问题出在Chart.js版本不兼容，以及配置语法不符合对应版本要求：

核心原因 #

你使用的是Chart.js 2.1.6（较旧版本），但配置代码用的是Chart.js v3+的语法。v2版本不支持scales.x和scales.y这种嵌套结构，因此你的堆叠配置没有生效，图表默认显示为分组样式。

两种解决方案 #

方案1：升级Chart.js到v3及以上版本 #

直接替换HTML中的CDN链接为新版本（比如3.9.1），你的原有JS配置可以直接使用，因为v3支持当前的堆叠配置写法：

修改后的HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/Chart.min.js"></script>
<canvas id="bar-chart" width="600" height="350"></canvas>

JS代码保持你原来的写法即可，v3会正确识别scales.x.stacked和scales.y.stacked配置，生成堆叠柱状图。

方案2：适配Chart.js v2.x版本的语法 #

如果你不想升级版本，需要按照v2的规则修改配置：

• 将scales.x改为scales.xAxes，scales.y改为scales.yAxes，以数组形式配置
• 给每个数据集添加相同的stack属性值，确保它们属于同一堆叠组

修改后的完整代码：

JS部分：

const ctx = document.getElementById('bar-chart')
var chart = new Chart(ctx, {
    type: 'bar',
    options: {
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    },
    data: {
        labels: ['A','B','C'],
        datasets: [{
            label: 'Year 2020',
            data: [10,20,25],
            backgroundColor: '#ff0000',
            stack: 'group1'
        },{
            label: 'Year 2021',
            data: [15,30,10],
            backgroundColor: '#00ff00',
            stack: 'group1'
        },{
            label: 'Year 2022',
            data: [30,5,25],
            backgroundColor: '#0000ff',
            stack: 'group1'
        }]
    }
})

HTML部分保持原有的2.1.6链接即可。

这样修改后，就能生成你需要的垂直堆叠柱状图了。

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