將連接圖例用於兩個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