Highcharts stackLabels需求：替换列值总和为逐项堆叠显示

我懂你的需求啦——不想让堆叠标签只显示总和，而是把每个堆叠项的数值都上下错落着显示出来对吧？其实只要调整下Highcharts的标签配置逻辑就行，把全局的堆叠总和标签关掉，转而给每个系列单独配置数据标签，具体操作如下：

核心配置调整要点 #

• 关闭全局总和标签：先把图表配置里yAxis.stackLabels.enabled设为false，这样默认的总和标签就不会显示了。
• 给每个系列单独加数据标签：在每个series对象里配置dataLabels，通过verticalAlign和y属性控制标签位置，让它们上下错开避免重叠。

完整示例代码 #

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '堆叠列逐项标签展示示例'
    },
    xAxis: {
        categories: ['分类A', '分类B', '分类C']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        },
        // 关闭默认的堆叠总和标签
        stackLabels: {
            enabled: false
        }
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>总计: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            // 统一设置数据标签的基础样式
            dataLabels: {
                style: {
                    color: '#222',
                    fontSize: '12px',
                    fontWeight: 'normal'
                }
            }
        }
    },
    series: [{
        name: '系列1',
        data: [5, 3, 4],
        dataLabels: {
            enabled: true,
            verticalAlign: 'top',
            y: -6 // 向上偏移，避开柱子顶部
        }
    }, {
        name: '系列2',
        data: [2, 2, 3],
        dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            y: 6 // 向下偏移，和上一个标签错开
        }
    }, {
        name: '系列3',
        data: [3, 4, 4],
        dataLabels: {
            enabled: true,
            verticalAlign: 'top',
            y: -6 // 再次向上偏移，形成交替排列
        }
    }]
});

额外优化提示 #

• 如果堆叠系列数量更多，可以按奇偶系列设置不同的偏移方向（比如奇数向上、偶数向下），或者按固定数值递增/递减y值，确保标签完全不重叠。
• 可以通过dataLabels.formatter自定义标签内容，比如加上单位、系列缩写等，示例：formatter: function() { return this.series.name + ': ' + this.y; }。
• 要是想把标签放在柱子内部，可将verticalAlign设为middle，再调整y值，同时注意文字颜色和柱子颜色的对比度，保证可读性。

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