javascript 在 Highcharts 中对图例进行分组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15926516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grouping Legends in Highcharts
提问by Agi la
I have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar. can some one help me?
我有两个堆叠条形图，但所有图例（两个条形图）都显示在一起。我想根据栏中堆叠的项目对图例进行分组。有人能帮我吗？
$(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'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.
我有类似类型的酒吧。我想将珍妮特和珍妮分组为一组，将乔和约翰分组为另一组。
回答by jlbriggs
Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.
根据您链接到的参考示例，您可以使用版本 3 中的新系列“linkedTo”属性来执行此操作。
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
updated example: http://jsfiddle.net/jlbriggs/6gw5P/2/
更新示例：http: //jsfiddle.net/jlbriggs/6gw5P/2/
linkedTo:':previous'
回答by Jakob K
I know this is an old issue, but setting showInLegend on your series, will work, and seems the easiest way.
我知道这是一个老问题，但是在您的系列中设置 showInLegend 会起作用，并且似乎是最简单的方法。
showInLegend: false
Eg:
例如：
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
showInLegend: false
}
回答by Ben McCormick
You can't group the legends by stack, because then you'll lose the ability to identify the different components (IE either the individual series won't have a distinct color or the legend color won't match them). The legends map to the people because those are all distinct data sources and since you add them that way it displays them like that.
您不能按堆栈对图例进行分组，因为那样您将失去识别不同组件的能力（即，单个系列不会有不同的颜色，或者图例颜色与它们不匹配）。图例映射到人物，因为它们都是不同的数据源，并且由于您以这种方式添加它们，因此会以这种方式显示它们。
If you don't care about the different components having a distinct color, then you don't want a stacked bar chart at all. You can just have a normal bar chart with 2 series, male and female.
如果您不关心具有不同颜色的不同组件，那么您根本不需要堆叠条形图。您可以拥有一个包含 2 个系列（男性和女性）的普通条形图。
series: [{
name: 'Male',
data: [10, 7, 8, 9, 7]
},
name: 'Female',
data: [5, 5, 10, 6, 4]
}
}
