如何在Highcharts堆叠条形图中增加分组数量？

一、新增分组后数据不显示的原因及修复 #

你新增的x轴分类abhinav无法显示，核心原因是所有series的data数组长度仅为3，和x轴categories的4个分类数量不匹配，第四个分类没有对应的数据点，自然无法渲染。

修复方法：确保每个series的data数组长度与x轴分类数量一致，给每个series补充第四个分类对应的数据值（无数据可填0）。示例修改如下：

series: [{
    name: 'Norway',
    data: [148, 133, 124, 0], // 补充第四个分类的数据
    stack: 'Europe'
}, {
    name: 'Germany',
    data: [102, 98, 65, 0],
    stack: 'Europe'
}, {
    name: 'United States',
    data: [113, 122, 95, 0],
    stack: 'North America'
}, {
    name: 'Canada',
    data: [77, 72, 80, 0],
    stack: 'North America'
}, {
    name: 'abhinav',
    data: [193, 222, 15, 100], // 补充第四个分类的数据
    stack: 'xs'
}]

二、在堆叠条形图末尾添加总计文本 #

要实现堆叠条右侧显示总计文本的效果，可以通过图表加载事件结合Highcharts的渲染器来绘制。以下是完整修改后的JS代码：

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        events: {
            load: function() {
                const chart = this;
                const xAxis = chart.xAxis[0];
                // 遍历每个x轴分类
                xAxis.categories.forEach((category, index) => {
                    // 获取当前分类的所有数据点
                    const points = chart.series.map(series => series.points[index]);
                    // 计算堆叠总和
                    const total = points.reduce((sum, point) => sum + (point.y || 0), 0);
                    // 获取最后一个数据点的位置（堆叠条的右端）
                    const lastPoint = points[points.length - 1];
                    if (lastPoint) {
                        // 绘制总计文本
                        chart.renderer.text(
                            `总计: ${total}`,
                            lastPoint.plotX + chart.plotLeft + 10, // 向右偏移10px避免重叠
                            lastPoint.plotY + chart.plotTop + lastPoint.pointWidth / 2 + 5 // 垂直居中对齐
                        ).attr({
                            zIndex: 5 // 确保文本显示在图表上层
                        }).add();
                    }
                });
            }
        }
    },

    title: {
        text: '冬奥会历史奖牌榜（按大洲分组）'
    },

    xAxis: {
        categories: ['金牌', '银牌', '铜牌','abhinav']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: '奖牌数量'
        }
    },

    tooltip: {
        formatter: function () {
            return `<b>${this.x}</b><br/>${this.series.name}: ${this.y}<br/>总计: ${this.point.stackTotal}`;
        }
    },

    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return this.y + '枚';
                }
            }
        }
    },

    series: [{
        name: '挪威',
        data: [148, 133, 124, 0],
        stack: '欧洲'
    }, {
        name: '德国',
        data: [102, 98, 65, 0],
        stack: '欧洲'
    }, {
        name: '美国',
        data: [113, 122, 95, 0],
        stack: '北美洲'
    }, {
        name: '加拿大',
        data: [77, 72, 80, 0],
        stack: '北美洲'
    }, {
        name: 'abhinav',
        data: [193, 222, 15, 100],
        stack: 'xs'
    }]
});

关键说明 #

1. 修复了数据长度不匹配的问题，确保每个分类都有对应的数据点；
2. 通过chart.events.load事件监听图表加载完成，遍历每个分类计算堆叠总和；
3. 利用renderer.text在堆叠条的右侧绘制总计文本，通过坐标计算保证文本对齐；
4. 修正了原tooltip中的HTML转义错误，直接使用<>以正常渲染格式。

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