Question

我有一个Highcharts柱形图，其中有多个＆＃39;对，设置在一个数组中 - 其中一对是实际数字，另一个是行业平均值。

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();
                    }
                }
            }
        }
    },

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

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

（在我的示例的图例中，我会隐藏＆＃39; ...平均＆＃39;菜单项，因此它们不需要实际作为链接工作。）

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

Answer 1

评论中提到的链接配对系列。如果只有一个主系列应该可见，那么你可以在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系列

1 个答案: