Javascript 如何在highcharts柱形图的每个类别中引用其他系列的yData

Javascript 如何在highcharts柱形图的每个类别中引用其他系列的yData,javascript,highcharts,Javascript,Highcharts,我有一个柱状图,它显示了两个系列,其中包含若干年的数据 这两个系列中的每一个都有一个专栏 我想为这些列创建一个数据标签,显示每年这两列值(yData之和)总和的百分比。为此,我需要引用当前y值以及给定类别(年份)中两个y值的总和 我试过这样的方法: dataLabels:{ enabled:true, formatter:function(e) { var mychart = $('#e_74').highcharts(); var sum = p

我有一个柱状图,它显示了两个系列,其中包含若干年的数据

这两个系列中的每一个都有一个专栏

我想为这些列创建一个数据标签,显示每年这两列值(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总和

提前感谢您抽出时间

这是我正在进行的工作的一部分

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

$(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]}]
        });
    });
$(函数(){
$('e#u 74')。高图({
图表:{
类型:“列”
},
学分:{
已启用:false
},
野田:{
风格:{
fontWeight:'粗体',
字体大小:“20px”
}
},
标题:{
文本:“标题”,
},
导航:{
按钮选项:
{
已启用:false
}
},
xAxis:{
类别:[2013、2014]
},
亚克斯:{
分:0,,
标题:{
文本:“数字”
}
},
工具提示:{
headerFormat:“{point.key}”,
pointFormat:“{series.name}:”+
“{point.y:,.0f}”,
页脚格式:“”,
分享:是的,
useHTML:true
},
打印选项:{
专栏:{
点填充:0,
边框宽度:0
},
系列:{
数据标签:{
启用:对,
格式化程序:函数(e){
var mychart=$('e#u 74')。highcharts();
var sum=parseInt(mychart.series[1].yData[1],10)+parseInt(mychart.series[0].yData[1],10);
var pcnt=(此.y/总和*100);
返回高位图表。数字格式(pcnt)+'%';
}
}
}
},
系列:[{showInLegend:true,name:'有经过训练的硬件',数据:[94426147615]},{showInLegend:true,name:'没有经过训练的硬件',数据:[1686329198]}]
});
});

您需要获得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) + '%';
}
例如:

附加系列的示例:

OTOH,这会冗余地计算总数,如果你有很多数据点,这可能是个问题

在构建图表之前,计算相关值,并将适当的百分比值与每个数据点一起作为可选变量发送到数据标签中以供参考,这可能是值得的

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

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


您需要获得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) + '%';
}
例如:

附加系列的示例:

OTOH,这会冗余地计算总数,如果你有很多数据点,这可能是个问题

在构建图表之前,计算相关值,并将适当的百分比值与每个数据点一起作为可选变量发送到数据标签中以供参考,这可能是值得的

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

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


更新的答案和更有效的示例更新的答案和更有效的示例