javascript - 在 Highcharts 'stacked & grouped column' 布局中显示整个组的总计

Question

Here是 Highcharts 堆叠和分组列布局的基本演示。工具提示显示使用此调用的堆栈总数...

this.point.stackTotal

...但是，该组中有 2 个堆栈。如何显示组中所有堆栈的总数。类似...

this.point.groupTotal

...会很理想，但这行不通

Answer 1

您可以通过向工具提示函数添加额外的参数来实现此目的:shared:true 并添加一些额外的代码来汇总分组堆栈中的所有值

看这个例子:JSFIDDLE

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },
        tooltip: {
            formatter: function() {
                var s = '<b>'+ this.x +'</b>',
                sum = 0;               
                $.each(this.points, function(i, point) {
                    s += '<br/>'+ point.series.name +': '+
                        point.y;
                    sum += point.y;
                });                
                s += '<br/>Sum: '+sum               
                return s;
            },
            shared: true
        },


        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});