将系列总数添加到Highcharts中的图例

使用Highcharts.js – 我想将系列总数添加到图例中(当前它表示’12345’)。 我知道我需要写一个labelFormatter函数,但我不知道足够的JavaScript来弄清楚如何总结每个系列的总和。 代码如下(此处也有实时版本: http : //jsbin.com/ukabob/8 )。

$(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', backgroundColor: '#E9E7DC', borderRadius:0, margin: [0, 150, 30, 0] }, colors: ['#A74B59', '#46C4B7', '#EDBA70'], credits: { enabled: false }, title: { text: null }, xAxis: { categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'], gridLineWidth:1, gridLineColor: '#FFFFFF', labels: { style: { color: '#000000' }, formatter: function() { return '
'+ this.value +'
'; }, y:25 }, lineColor: '#FFFFFF', tickColor: '#FFFFFF', tickLength: 30 }, yAxis: { gridLineWidth:0, title: { text: null }, labels: { enabled: false } }, plotOptions: { series: { marker: { radius: 6, lineWidth: 2, lineColor: null, // inherit from series symbol: 'circle', states: { hover: { fillColor: '#E9E7DC', lineWidth: 2, radius:6 } } }, states: { hover: { lineWidth:4 } } } }, tooltip: { borderWidth:0, borderRadius: 0 }, legend: { borderRadius:0, backgroundColor: '#FFFFFF', itemMarginBottom: 7, layout: 'vertical', align: 'right', verticalAlign: 'top', y: 30, x: 2, borderWidth: 0, width:130, symbolPadding: 10, useHTML:true, shadow: { color: '#000', width: 3, opacity: 0.15, offsetY: 2, offsetX: 1 }, labelFormatter: function() { return '
' + this.name +'
(Total: 12345)'; } }, series: [{ name: 'Honeywell', data: [700,725,750,850,950,1000,1025,1050,1050,1050] }, { name: 'Bombardier', data: [661,758,880,990,1065,1136,1193,1241,1289,1335] }, { name: 'Embraer', data: [747,789,839,861,890,908,984,1030,1097,1156] }] }); }); });

一个更通用和动态的答案:

 legend: { labelFormatter: function() { var total = 0; for(var i=this.yData.length; i--;) { total += this.yData[i]; }; return this.name + '- Total: ' + total; } } 

弄清楚了。 我将总数添加到系列中,然后使用this.options调用它。 请参阅以下更新代码:

  legend: { borderRadius:0, backgroundColor: '#FFFFFF', itemMarginBottom: 7, layout: 'vertical', align: 'right', verticalAlign: 'top', y: 30, x: 2, borderWidth: 0, width:130, symbolPadding: 10, useHTML:true, shadow: { color: '#000', width: 3, opacity: 0.15, offsetY: 2, offsetX: 1 }, labelFormatter: function() { return '
' + this.name +'
(Total: ' + this.options.total + ')'; } }, series: [{ name: 'Honeywell', total: 9150, data: [700,725,750,850,950,1000,1025,1050,1050,1050] }, { name: 'Bombardier', total: 10548, data: [661,758,880,990,1065,1136,1193,1241,1289,1335] }, { name: 'Embraer', total: 9301, data: [747,789,839,861,890,908,984,1030,1097,1156] }] }); });