首页 文章

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

提问于
浏览
1

我有一个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)?

1 回答

  • 0

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

    visible: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
    

    visible: visibility[0]
    

    请看看这个http://jsfiddle.net/umrtd5rs/3/

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

相关问题