Javascript 对两个Highcharts饼图使用连接图例
我有几个名称相同但值不同的饼图系列。我希望能够通过单击图例来打开和关闭所有系列中具有相同名称的楔块 文档和其他几个问题建议使用series.linkedt连接该系列,但我无法让它工作 这就是我在Highcharts示例中尝试构建的内容:Javascript 对两个Highcharts饼图使用连接图例,javascript,highcharts,Javascript,Highcharts,我有几个名称相同但值不同的饼图系列。我希望能够通过单击图例来打开和关闭所有系列中具有相同名称的楔块 文档和其他几个问题建议使用series.linkedt连接该系列,但我无法让它工作 这就是我在Highcharts示例中尝试构建的内容: series: [{ center: ['25%', '50%'], showInLegend: true, id: 'aaa', data: [ ['Firefox', 44.2],
series: [{
center: ['25%', '50%'],
showInLegend: true,
id: 'aaa',
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
},
{
id: 'bbb',
linkedTo: 'aaa',
center: ['75%', '50%'],
data: [
['Firefox', 12.52],
['IE7', 12.83],
['IE6', 0],
['Chrome', 59.42],
['Other', 5.4]
]
}]
这里是对完整(非工作)代码的摆弄:使用
链接到
不起作用,因为您要隐藏/显示的不是序列(如两行序列),而是序列的每个点
但是,您可以做的是更改单击图例的操作,如下所示:
plotOptions: {
pie: {
point: {
events: {
legendItemClick: function() {
for (var i = 0; i < chart.series.length; i++) {
if (chart.series[i].points[this.index].visible == true) {
chart.series[i].points[this.index].setVisible(false, false);
} else {
chart.series[i].points[this.index].setVisible(true, false);
}
}
chart.redraw();
return false; //needed to stop the normal click from interferring
}
}
}
}
...
},
plotOptions:{
馅饼:{
要点:{
活动:{
legendItemClick:函数(){
对于(变量i=0;i
请注意,此示例仅适用于两个PIE包含相同数量的点,并按相同顺序排序的情况。如果不是这样,您可以在此基础上展开
工作示例:
事件API。legendItemClick:啊,我错过了系列和点之间的区别。令人困惑,因为legend UI是相同的,但它是有意义的。幸运的是,我的分数总是一样的。