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

使用两个Highcharts饼图的连接图例

1 个答案: