highchart stacked column total data per categories

问题

I want to get the total data per categories. The point.stackTotal only gives the total of the active data.

From the code example I pasted, I would like to know the total consumption per fruit. So even if I clicked Joe's name on the legend on upper right part (that makes all Joe's information on stacked chart inactive), I'd still know the total consumption of Apple (and any other fruits) of John, Jane, and Joe on mouseover each bar categories so apparently, what I am looking for is not the point.stackTotal.

$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

回答1:

I think that you should be able to show the total value for all visible and hidden columns for your category using stackLabels.formatter function. You can get more information about stackLabels in Highcharts API: http://api.highcharts.com/highcharts/yAxis.stackLabels.formatter

  stackLabels: {
    enabled: true,
    style: {
      fontWeight: 'bold',
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    },
    formatter: function() {
      var x = this.x,
        value = 0;

      series = this.axis.series;
      Highcharts.each(series, function(s) {
        value += s.userOptions.data[x];
      });
      return value;
    }
  }

Here you can see very simple example how you can achieve something similar to required chart: http://jsfiddle.net/h8f30uwo/

Best,

来源：https://stackoverflow.com/questions/40976746/highchart-stacked-column-total-data-per-categories

标签

javascript

Highcharts

stacked-chart