如何一次只显示一对链接的 Highcharts 系列

Question

我有一个包含多个 'pairs' 的 Highcharts 柱形图，设置在一个数组中 - 其中一对是实际数字，另一对是行业平均值。

var links = {
    'Apples': 'Apples average',
    'Pears': 'Pears average',
    'Oranges': 'Oranges average',
    'Bananas': 'Bananas average'
};

.......

    series: [{
        id: 'Apples',
        name: 'Apples',
        color: 'rgba(0,167,184,1)',
        data: [3.8, 8.9, 8.4],
        pointPadding: 0.3,
        pointPlacement: 0.2

    }, {
        id: 'Apples average',
        name: 'Apples average',
        color: 'rgba(135,28,90,1)',
        data: [2.7, 8.1, 7.9],
        pointPadding: 0.3,
        pointPlacement: -0.2

    },

我尝试一次显示一对，因此当加载图表时，第一对可见，而下一个图例项（对）是单击，隐藏第一对，仅显示新对，依此类推

    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            events: {
                legendItemClick: function (event) {
                    var sisterSeries = this.chart.get(links[this.name]);
                    if (this.visible) {
                        sisterSeries.hide();
                    } else {
                        sisterSeries.show();
                    }
                }
            }
        }
    },

我无法实现 on/off 切换效果我需要一次只显示一对——我仍然需要手动单击现有的一对来隐藏它们。任何帮助将不胜感激。

关于如何切换系列（http://jsfiddle.net/tK38J/65/）有非常相似的问题，但我找不到要切换的数据成对的问题。

（在我的示例的图例中，我会隐藏“...平均”菜单项，这样它们就不需要实际用作链接）。

示例：http://jsfiddle.net/6cL56x9r/4/

Answer 1

Link 评论中提到的配对系列。如果只有一个主要系列应该可见，那么您可以像这样在 legendItemClick 事件中循环：

legendItemClick: function (event) {
                    this.chart.series.forEach(function (serie) {
                        if (serie.linkedSeries.length && this != serie) {
                        serie.setVisible(false, false);
                      }
                    }, this);
                }

示例：http://jsfiddle.net/6cL56x9r/11/

如果将属性 showInLegend 设置为 true，您可以保持链接系列可见，但是您需要稍微修改循环中的条件。

如何一次只显示一对链接的 Highcharts 系列

How to show only one pair of linked Highcharts series at a time

toggle

highcharts