在Highcharts中分组传奇 [英] Grouping Legends in Highcharts
问题描述
我有两个堆积的条形图,但所有的传说(两个栏)都一起显示。我想根据栏中堆积的项目对图例进行分组。
可以帮助我吗?
$ $ $ $('#container $' ).highcharts({
图表:{
类型:'bar'
},
标题:{
text:'Total水果消费,按性别分组''b $ b},
xAxis:{
类别:['苹果','橘子','梨','葡萄','香蕉' ]
},
yAxis:{
allowDecimals:false,
min:0,
title:{
text:'Number of fruit'
}
},
tooltip:{
formatter:function(){
return'< b> + this.x + '< / b>< br />'+
this.series.name +':'+ this.y +'< br />'+
总计:'+ this.point.stackTotal;
}
},
plotOptions:{
bar:{
stacking:'normal'
系列:[{
name:'John',
data:[5,3,4,7,2],
stack:'male'
},{
名称:'Joe',
data:[3,4,4,2,5],
stack:'男性'
},{
名称:'Jane',
数据:[2,5,6,2,1],
堆叠:'女性'
},{
name:'Janet',
data:[3,0,4,4,3],
stack:'female'
}]
});
});
我有类似的栏。我想将janet和jane分组在一起,并将joe和john分组为另一个分组。
基于参考示例你链接到了,你可以在版本3中使用新系列的'linkedTo'属性来完成这项工作。
$ b
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
更新示例:
http://jsfiddle.net/jlbriggs/6gw5P/2/
linkedTo:':previous'
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.
Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
updated example: http://jsfiddle.net/jlbriggs/6gw5P/2/
linkedTo:':previous'
这篇关于在Highcharts中分组传奇的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!