highchart访问一次后台服务返回多张图表数据

 

本文承接上一篇，我们制作动态图表的时候，往往需要的不止一张图表，如果每张图表都与服务接口做一次交互的话未免太过频繁，这无论对前后还是后台都是一种压力，本文介绍一种一次访问返回多组数据的方式来减少前台与后台服务的交互，闲话少说，查看动态效果  →.→ 详细代码 ←.←

 

如上文所示，highchart 的 chart 属性可以添加 events 事件，上文中我们插入的事件为：

        events: {
            load: function () {
                var series = this.series[0];
                var old = 0;
                setInterval(function () {
                    var x = (k++);
                    var y = Math.random() * 100;
                    while (y - old >= 10 || y - old <= -10) {
                        y = Math.random() * 100;
                    }
                    old = y;
                    series.addPoint([x, parseInt(y)], true, true);
                }, 1000);
            }
        }

 

该事件为成功加载后每隔1秒钟获取一个随机数，若该数值与上一次产生的数值相差不超过10则将该数值添加到highchart数组中，否则重新生成随机数；但是该事件需要通过this.series[0] 来获取预定好的数组，如果我们需要多张图表的话，定义this.series[1],this.series[2].....产生的数据是放在一张图表里的，这与我们的需求不符。

当然我们也可以不写该events事件，而是直接将 setInterval(func,1000) 提到外面来写，如此便可实现 series 只定义一项，而分别应用到不同的图表中。