Highcharts-如何在点击时仅显示两个系列

Question

我发现这个例子有一半可以满足我的需求。我需要它来显示两个系列，而不仅仅是一个。

events: {
                show: function () {
                    var chart = this.chart,
                        series = chart.series,
                        i = series.length,
                        otherSeries;
                    while (i--) {
                        otherSeries = series[i];
                        if (otherSeries != this && otherSeries.visible) {
                            otherSeries.hide();
                        }
                    }
                },
                legendItemClick: function() {
                    if(this.visible){
                         return false;   
                    }
                }
            }

http://jsfiddle.net/tK38J/65/

例如：单击系列1，然后看到系列1和2。单击系列3，然后看到系列3和4。系列2和4将隐藏在图例中。有可能吗？

Answer 1

您可以链接具有相同可见性的系列，并在legendItemClick事件中隐藏其他系列：

    plotOptions: {
        series: {
            events: {
                legendItemClick: function() {
                    if (this.visible) {
                        return false;
                    }

                    this.chart.series.forEach(function(s) {
                        if (s !== this && s !== this.linkedSeries[0]) {
                            s.hide();
                        }
                    }, this);
                }
            }
        }
    },
    series: [{
        data: [...],
        id: 'first'
    }, {
        data: [...],
        linkedTo: 'first'
    }, {
        data: [...],
        visible: false,
        id: 'third'
    }, {
        data: [...],
        linkedTo: 'third'
    }]

---

实时演示： http://jsfiddle.net/BlackLabel/s6x37azb/

API参考： https://api.highcharts.com/highcharts/series.line.linkedTo