javascript - 为两个 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]
    ]
}]

这是带有完整(非工作)代码的 fiddle :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