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

原文地址:https://www.cnblogs.com/jying/p/4391243.html
作者:一定会去旅行
欢迎任何形式的转载,但请务必在文章开始位置使用明显加粗字体注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。

 

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

 

如上文所示,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 只定义一项,而分别应用到不同的图表中。

 

生活不止眼前的苟且,还有诗和远方~~
原文地址:https://www.cnblogs.com/jying/p/4391243.html
作者:一定会去旅行
欢迎任何形式的转载,但请务必在文章开始位置使用明显加粗字体注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。

posted @   一 定 会 去 旅 行  阅读(1019)  评论(1编辑  收藏  举报
编辑推荐:
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
阅读排行:
· DeepSeek 全面指南,95% 的人都不知道的9个技巧(建议收藏)
· 对比使用DeepSeek与文新一言,了解DeepSeek的关键技术论文
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· DeepSeekV3+Roo Code,智能编码好助手
· AI编程:如何编写提示词
历史上的今天:
2013-04-03 细数各大顶级网站的垃圾设置!!!
点击右上角即可分享
微信分享提示