![](/img/trans.png)
[英]Highcharts Treemap with multiple series: getting them all to show in legend
[英]Highcharts- Javascript- How to show cumulative count of all the series of legend by default, and linked series inside a legend
我正在使用 highcharts 来渲染柱状图和我的图例。 我想获得所有图例的总数(默认图例和链接图例)。
例如:在下面的小提琴中:我有 2 个图例:现在当我单击其中一个时,我想查看与单击的该图例有关的所有系列的累积计数。 http://jsfiddle.net/5eb0utxq/是可能的,目前它得到了一些计数,但我不确定这是否是与该传说相关的所有系列的总数。
代码:
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
series: {
showInLegend: true,
}
},
legend: {
labelFormatter: function() {
var totalLegend = this.yData.reduce(function(pv, cv) { return pv + cv; }, 0);
return this.name +" : "+ totalLegend;
}
},
series: [{
data: [4740, 1378, 8],
name: "Confirmed",
id: "Confirmed",
type: "column",
y: "86",
stack: "ACTIVE"
}, {
data: [2932, 141],
name: "Potential", id: "Potential",
stack: "ACTIVE",type: "column",
y: "86"
}, {
data:[1752, 11],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [1089, 2],
linkedTo: "Potential",showInLegend: false,
name: "Potential",
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [2332, 1960, 42],
linkedTo: "Potential",
name: "Potential",showInLegend: false,
type: "column",
y: "86",
stack: "NEW"
}, {
data: [480, 4684, 2258],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "NEW",
}]
});
});
您需要从所有链接系列中计算yData
, this
是主要系列,因此您可以使用以下代码:
legend: {
...,
labelFormatter: function() {
var totalLegend = 0;
[...this.linkedSeries, this].forEach(function(lSeries) {
lSeries.yData.forEach(el => {
totalLegend += el
});
});
return this.name + ' (' + totalLegend + ')';
}
}
现场演示: http : //jsfiddle.net/BlackLabel/kfger78b/
API参考: https : //api.highcharts.com/highcharts/legend.labelFormatter
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.