是否可以在一个图形中做两个馅饼并合并图例?
我这样做了:http://jsfiddle.net/Adysone/YpfBs/
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: "Pie Charts",
align: 'center'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
tooltip: {
formatter: function () {
return this.key + ': ' + this.y + ' (' + Math.round(this.percentage) + '%)';
}
},
plotOptions: {
pie: {
showInLegend: true,
size: 200
}
},
series: [
{
name: "2011",
data: [
{
name: "Apple",
color: "#FF3333",
y: 8
},
{
name: "Banana",
color: "#FFF55C",
y: 11
},
{
name: "Grape",
color: "#90007B",
y: 9
},
{
name: "Pear",
color: "#F1FFB8",
y: 3
}
],
center: [150,100],
size: 150
},
{
name: "2012",
data: [
{
name: "Apple",
color: "#FF3333",
y: 5
},
{
name: "Banana",
color: "#FFF55C",
y: 15
},
{
name: "Pear",
color: "#F1FFB8",
y: 8
}
],
center: [450,100],
size: 150
}
]
});
但传说中的项目是重复的,因为它们在两个馅饼中很常见,我该如何才能使它们独一无二?
如果不可能,我可以将两个传说分开吗?
谢谢!
答案 0 :(得分:9)
请查看使用3个饼图并具有共同图例的示例http://jsfiddle.net/u7FQS/15/
$(chart.series[0].data).each(function(i, e) {
e.legendItem.on('click', function(event) {
var legendItem=e.name;
event.stopPropagation();
$(chart.series).each(function(j,f){
$(this.data).each(function(k,z){
if(z.name==legendItem)
{
if(z.visible)
{
z.setVisible(false);
}
else
{
z.setVisible(true);
}
}
});
});
});
});