在Highcharts的堆叠和放大器中显示整个组的总数分组列'布局

Question

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

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'
        }]
    });
});