javascript - 如何在 highcharts 柱形图的每个类别中引用另一个系列的 yData

Question

我有一个柱形图，其中显示两个系列，其中包含多年的数据。

每年这两个系列都有一个专栏。

我想为这些列创建一个数据标签，显示每年两列值(yData 之和)总和的百分比。为此，我需要引用当前 y 值以及给定类别(年份)中两个 y 值的总和。

我尝试过这样的事情:

dataLabels:{
    enabled:true,
    formatter:function(e) {
        var mychart = $('#e_74').highcharts();
        var sum = parseInt(mychart .series[1].yData, 10) + parseInt(mychart .series[0].yData, 10);
        var pcnt = (this.y / sum * 100);
        return Highcharts.numberFormat(pcnt) + '%';                     
    }
}

问题:

这适用于第一年/类别，因为 yData 的总和始终是两个系列的第一个元素的总和 - 所以它在第一年是正确的。然而，随后的年份仍然引用前两个元素的总和 - 使得后续的数据标签不准确。

如何引用每个单独类别的 yData 的当前总和？

预先感谢您的宝贵时间。

这是一个jsfiddle我正在进行的工作

这是我尝试为此图实现的完整代码的副本

$(function () {         
     $('#e_74').highcharts({
        chart: {
            type: 'column'
        },
        credits: {
        enabled: false
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '20px'
            }
        },
        title: {
            text: 'Title',
        },
        navigation: {
            buttonOptions:
            {
                enabled: false
            }
        },
        xAxis: {
              categories: [2013, 2014]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number '
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:,.0f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0,
                borderWidth: 0
                },
            series: {
             dataLabels:{
                    enabled:true,
                    formatter:function(e) {
                        var mychart = $('#e_74').highcharts();    
                        var sum = parseInt(mychart.series[1].yData[1], 10) + parseInt(mychart.series[0].yData[1], 10);
                        var pcnt = (this.y /  sum * 100);
                        return Highcharts.numberFormat(pcnt) + '%';
                    }
                }
                }
            },
            series: [{showInLegend: true, name: 'With trained HW', data: [94426, 147615]}, {showInLegend: true, name: 'Without trained HW', data: [16863, 29198]}]
        });
    });

Answer 1

您需要获取 x 索引才能引用正确的类别。

如果您使用循环执行此操作，则可以使其动态化，以便它适用于任意数量的系列:

formatter:function() {
  var i = this.point.index;
  var sum = 0;
  $.each(this.series.chart.series, function() {
    sum += this.yData[i];
  })
  var pcnt = (this.y /  sum * 100);
  return Highcharts.numberFormat(pcnt) + '%';
}

示例:

• http://jsfiddle.net/jlbriggs/89uny567/

附加系列示例:

• http://jsfiddle.net/jlbriggs/89uny567/1/

OTOH，这会冗余地计算总数，如果您有很多数据点，这可能会成为问题。

在构建图表之前计算相关值，并将适当的百分比值与每个数据点一起作为可选变量发送以从数据标签引用，可能是值得的。

编辑 -------------------

预处理数据并使用“总计”数组来计算每个条形的百分比的示例，从而避免对每个条形重复计算相同的总计:

• http://jsfiddle.net/jlbriggs/89uny567/2/