Question

我有一张Highcharts折线图和一些动态系列，如下所示：https://jsfiddle.net/km0jjxue/6/

var chart = Highcharts.chart('container', {
    series: [{
       data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
       visible: true,
    }, {
       data: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4],                        
       visible: true,
    }, {
       data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
       visible: false,
    }, {
       data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],        			 
       visible: false,
    }, {
       data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
       visible: false,
    }],
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

我还有一个过滤器，根据我在此过滤器中选择的内容，使用新数据重新加载图表。

当我取消选择或选择图表中的其他系列，然后更改我的过滤器中的选项，导致图表重新绘制新数据并且只有前两个系列再次可见时，会出现问题。

如果我选择系列3和系列4使其图表数据可见，然后在我的过滤器中选择另一个选项，那么当图表重新加载新数据时，我仍然可以使用系列3还选择了4个（不仅是系列1和系列2）？

Answer 1

我最近遇到过类似的问题。但是，我的数据来自服务器而不像你的。您可以使用JavaScript Cookie来保存系列的状态。而不是将状态指定为

可见：true / false

您可以从Cookie中获取已保存的状态。

使用plotOptions.series.events.legendItemClick和cookie作为

设置状态

plotOptions: {
        series: {
            events: {
                legendItemClick: function () {
                    var visibility = '',
                        seriesIndex = this._i;
                    $.each(this.chart.series, function(i,v) {
                        if(i == seriesIndex) {
                            visibility += v.visible ? 'fX' : 'tX';
                        } else {
                            visibility += v.visible ? 'tX' : 'fX';
                        }
                    });
                    saveSeriesState(visibility);
                }
            }
        }
    }

每次点击Legend Item时，都会触发legendItemClick事件，该事件将遍历您的所有系列并检查可见性。然后，它将正确的可见性值存储在正确的索引中作为字符串，稍后将对其进行解析以确定true或false。它将保存数组中所有系列的状态，并将其作为数组发送到cookie中。

JS用于保存cookie

function saveSeriesState(cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (365*24*60*60*1000)); // 1 year cookie
    var expires = "expires="+d.toUTCString();
    document.cookie = "SeriesVisibility=" + cvalue + "; " + expires;
}

获取cookie的JS

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';'),
        len = ca.length;
    for(var i=0; i<len; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) { 
            var ret = c.substring(name.length,c.length);
            ret = ret.split('X');
            $.each(ret, function(i,v) {
                ret[i] = (v === 'f') ? false : true;
            });
            return ret;
        }
    }
    return [true,true,true,true];
}

如您所见，它将返回一个包含每个系列的可见性的数组。它将遍历字符串数组并拆分保存的fX或tX。这里f表示假，t表示真实。参考这个，ret数组将保存已保存的状态，然后返回到调用函数。

然后，当您的页面加载并将可见性存储在数组中时，您可以调用getCookie函数

var visibility = getCookie("SeriesVisibility");

然后在你的系列中，而不是

visible: true/false

DO

visible: visibility[0]

请查看此http://jsfiddle.net/umrtd5rs/3/

帮我解决了我的问题。但是，由于我的数据来自服务器，我不得不即兴发挥。

Highcharts：在图表重新加载后保持系列可见性

1 个答案: