每个类别的highchart堆积列总数据 [英] highchart stacked column total data per categories

问题描述

我想获取每个类别的总数据. point.stackTotal仅给出活动数据的总数.

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

从我粘贴的代码示例中，我想知道每个水果的总消耗量.因此，即使我单击了右上角图例上的Joe的名字(这使堆叠图表上的所有Joe信息都无效)，我仍然会知道John，Jane和Joe在Apple(和其他水果)上的总消费量将鼠标悬停在每个栏类别上，显然，我要查找的不是point.stackTotal.

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

推荐答案

我认为您应该能够使用stackLabels.formatter函数显示类别中所有可见和隐藏列的总值.您可以在Highcharts API中获取有关stackLabels的更多信息: http://api.highcharts.com/highcharts/yAxis.stackLabels.formatter

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;
    }
  }

在这里您可以看到一个非常简单的示例，该示例如何实现与所需图表类似的功能: http://jsfiddle.net/h8f30uwo/

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

最好

这篇关于每个类别的highchart堆积列总数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！