将连接图例用于两个Highcharts饼图

Question

我有几个饼图系列，它们的名称相同但值不同。 我希望能够通过单击图例来打开和关闭所有系列中具有相同名称的楔子。

文档和其他一些问题建议使用series.linkedTo来连接系列，但是我无法使其正常工作。

这是我尝试在Highcharts示例中构建的内容：

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]
    ]
}]

这是带有完整（无效）代码的小提琴： http : //jsfiddle.net/JanSoderback/psL0zy2g/22/

Answer 1

使用linkedTo不起作用，因为它不是要隐藏/显示的序列（与2行序列一样），而是序列的每个点。

但是，您可以做的就是更改单击图例的操作，如下所示：

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
        }
      }
    }
  }
...
},

请注意，只有两个派都包含相同数量的点（以相同顺序排序）时，此示例才有效。 如果不是这种情况，则可以对此进行扩展。

工作示例： http : //jsfiddle.net/ewolden/psL0zy2g/63/

event.legendItemClick上的API： https ：//api.highcharts.com/highcharts/series.pie.events.legendItemClick