如何在Highcharts堆叠柱状图中显示可见堆叠的数量？

我在应用中使用Highcharts，需求是在堆叠柱状图的堆叠标签里显示可见堆叠的数量。现有代码尝试用this.touched实现，但无法得到正确的可见堆叠计数，想要的效果是每个X轴分类上方的堆叠标签显示「总数值-可见堆叠数」（比如Jan对应973.9-3，Feb对应71.5-1）。

修改后的完整代码 #

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        stackLabels: {
            style: {
                color: 'black'
            },
            enabled: true,
            y: 0,
            formatter: function () {
                // 过滤当前堆叠中值不为null/undefined的点，统计数量
                const visibleStackCount = this.points.filter(point => point.y !== null && point.y !== undefined).length;
                return `${this.total.toFixed(1)}-${visibleStackCount}`;
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0,
            dataLabels: {
                enabled: false
            }
        }
    },
    series: [{
        data: [129.9, 71.5, 106.4]
    },{
        data: [144.0, null, null]
    },{
        data: [800, null, 135.6]
    }]
});

关键说明 #

• 堆叠标签的formatter函数中，this.points包含了当前X轴分类下所有堆叠的数据点
• 通过filter方法筛选出y值不为null或undefined的点，这些就是可见的堆叠项
• 统计筛选后的点的数量，就是需要显示的可见堆叠计数，替代原来的this.touched即可
• 用toFixed(1)保证总数值的格式和需求一致，可根据实际场景调整小数位数

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