使用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 '<div style="font-size:22px; font-family: \'Advent Pro\',sans-serif;">'+
this.value +'</div>';
},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',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 '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\',sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: 12345)</span>';
}
},series: [{
name: 'Honeywell',data: [700,725,750,850,950,1000,1025,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;
}
}
