Question

我有一个堆叠的柱形图，每列有三个堆栈。见https://jsfiddle.net/Lfvnraqd/1/

工具提示显示单个堆栈的编号以及所有三个堆栈的总数（即每年所有程序的总数）。只要显示所有堆栈，这都可以正常工作。但是当我通过单击图例中的相应项目隐藏一个或两个堆栈时，工具提示中显示的总数是所有可见堆栈的总数，但我希望它仍然显示所有三个堆栈的总数。如果可能的话，无需为总数设置单独的系列。

有办法吗？

代码：

$(function () {
 Highcharts.setOptions({
   colors: ['#f59000', '#2274c1', '#90aaef']
 });
 $('#container').highcharts({
 chart: {
    borderColor: '#cccccc',
    borderWidth: 2,
    marginTop: 43,
    type: 'column'
  },
 xAxis: {
        categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
        tickLength: 20
  },
  yAxis: {
        min: 0,
        max: 45,
        reversedStacks: false,
        tickInterval: 5,
        title: {
            text: null
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }
    },
  credits: {
        enabled: false
    },
  title: {
     text: 'Number of procedures per year',
    y: 18
    },
 tooltip: {
        headerFormat: '<b>Year {point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.stackTotal}'
    },
 plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
 series: [{
        name: 'Resolved before conciliation',
        data: [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10]
    }, {
        name: 'Conciliation successful',
        data: [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0]
    }, {
        name: 'Expert\'s decision',
        data: [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
    }]
 });
});

Answer 1

点值的求和需要手动完成，因为图表仅对可见数据起作用。

在图表中设置数据之前，您需要计算其总和：

var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10];
var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0];
var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]

var sums = Object.keys(data1).map(i => {
  return data1[i] + data2[i] + data3[i];
});

并访问tooltip.pointFormatter

中的属性总和

pointFormatter: function () {
  return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x];
}

示例：https://jsfiddle.net/Lfvnraqd/2/

Highcharts stacked column：隐藏堆栈时显示总计

1 个答案: