时间戳

首页 > 解决方案 > Highcharts - 如何在点击时只显示两个系列

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

问题描述

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

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 将隐藏在图例中。是否可以？

标签： highcharts

解决方案

您可以链接具有相同可见性的系列并在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

推荐阅读