Chart.js堆叠柱状图失效求助（Django+AWS账单场景）

核心问题定位 #

堆叠柱状图不生效的绝大多数原因是Chart.js的堆叠配置不完整，或是Django传递的数据格式有误，和版本更新关联不大（只要配置语法匹配对应版本即可）。

必须满足的两个配置条件 #

1. 轴配置开启堆叠

针对竖向柱状图，需要在options.scales.y（数值轴）设置stacked: true；如果是横向柱状图，则需配置x轴。Chart.js v3+版本的正确配置示例：

options: {
    scales: {
        y: {
            stacked: true, // 强制y轴上的柱状图堆叠
            title: {
                display: true,
                text: '月度成本(USD)'
            }
        },
        x: {
            stacked: true, // 可选，确保x轴类别完全对齐
            title: {
                display: true,
                text: '月份'
            }
        }
    }
}

如果使用Chart.js v2版本，语法需调整为scales.yAxes[0].stacked: true，注意版本差异。

2. 数据集指定统一堆叠组

所有需要堆叠的数据集必须设置相同的stack属性值，比如统一设为'total'，明确告诉Chart.js这些数据属于同一堆叠组：

datasets: [
    {
        label: 'EC2',
        data: [120, 150, 130],
        backgroundColor: '#ff6384',
        stack: 'total' // 关键：所有堆叠数据集使用相同stack值
    },
    {
        label: 'S3',
        data: [30, 40, 35],
        backgroundColor: '#36a2eb',
        stack: 'total'
    }
]

Django数据传递注意事项 #

• 确保传递的labels（月份数组）和每个服务的costs（成本数组）长度完全一致，否则会导致部分数据不显示或堆叠错位。
• 成本数据必须是数字类型，不能是字符串。比如views.py里要确保costs是整数/浮点数数组：

# views.py 正确示例
def home(request):
    months = ['2024-01', '2024-02', '2024-03']
    aws_services = [
        {'name': 'EC2', 'costs': [125.5, 148.2, 136.7], 'color': '#ff6384'},
        {'name': 'S3', 'costs': [32.1, 41.8, 37.3], 'color': '#36a2eb'},
        {'name': 'Lambda', 'costs': [21.3, 26.5, 23.9], 'color': '#cc65fe'}
    ]
    return render(request, 'home.html', {'labels': months, 'services': aws_services})

快速排查步骤 #

1. 打开浏览器F12控制台，检查是否有JavaScript报错（比如数据格式错误、Chart.js未正确加载）。
2. 右键查看页面源代码，确认Django传递的labels和costs数据格式是否正确（比如数组是否闭合、数值是否为数字类型）。
3. 核对Chart.js版本：v3+用scales.y.stacked，v2版本用scales.yAxes[0].stacked，不要混用语法。

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