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

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

highchart访问一次后台服务返回多张图表数据的更多相关文章

  1. Oracle存储过程返回一张表数据

    在oracle数据库中你要在程序里得到一张表的数据就必须先创建游标和SQL Service不一样. --创建游标create or replace package pkg_Dataas type re ...

  2. angular访问后台服务及监控会话超时的封装

    angular访问后台服务及监控会话超时的封装 angular本身自带访问组件http和httpclient,组件本身都是异步模式访问.本文只列举了对http组件的封装同时也一同处理会话超时监控. 获 ...

  3. 利用广播调用后台服务方法并根据方法返回的内容更新UI

    一.UI布局代码 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  4. Android Services (后台服务)

    一.简介 服务是可以在后台执行长时间运行的应用程序组件,它不提供用户界面. 另一个应用程序组件可以启动一个服务,并且即使用户切换到另一个应用程序,它仍然在后台运行. 另外,组件可以绑定到一个服务来与它 ...

  5. Dubbo封装rest服务返回结果

    由于Dubbo服务考虑到一个是给其他系统通过RPC调用,另外一个是提供HTTP协议本身系统的后台管理页面,因此Dubbo返回参数在rest返回的时候配置拦截器进行处理. 在拦截器中,对返回参数封装成如 ...

  6. vue学习过程总结(07) - vue的后台服务API封装及跨域问题的解决

    以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...

  7. Android 三级联动选择城市+后台服务加载数据库

    技术渣,大家将就着看 首先我们需要一个xml数据保存到数据库,这里我从QQ下面找到一个loclist.xml文件 <CountryRegion Name="中国" Code= ...

  8. 应用AXIS开始Web服务之旅(soap web services)——使用三种不同的语言访问创建的Web服务,分别是JAVA、VB、VC

    一. 介绍 本文并不是想介绍Web服务的原理.系统架构等,我们假设您已经了解了关于Web服务的一些基本的概念.原理等知识.本文主要是针对那些已经了解Web服务概念,但是还没有亲身体会Web服务所带来令 ...

  9. Android : App客户端与后台服务的AIDL通信以及后台服务的JNI接口实现

    一.APP客户端进程与后台服务进程的AIDL通信 AIDL(Android Interface definition language-“接口定义语言”) 是 Android 提供的一种进程间通信 ( ...

随机推荐

  1. 建工发债sql

    管理费用 为了得到科目名称,只好再从外面写一层 select a.*, (select b.subjname from bd_accsubj b where b.subjcode=a.scode an ...

  2. HTML DOM元素的Dragdrop

    在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...

  3. mysql删造成表死锁研究

    现在互联网公司对于代码的管理越来越规范,一般都会有3个环境:开发环境,测试环境,正式环境.在开发环境进行开发,开发完成后将代码提交到测试环境进行测试,测试完毕后上线到正式环境. 今天在正式环境上遇到一 ...

  4. Junit4参数化测试实现程序与用例数据分离

    http://touchfu.iteye.com/blog/732930 现状:你是不是还在为自己的TestCase代码杂乱无章而苦恼,咎其根本还在于针对不同的用例,输入参数和mock信息的组装全部作 ...

  5. eclispe中在线安装maven插件

    启动Eclipse之后,在菜单栏中选择Help,然后选择Install New Software-,接着你会看到一个Install对话框, 点击Work with:字段边上的Add按钮,你会得到一个新 ...

  6. ArcGIS Engine中的8种数据访问 (转)

    数据是GIS的基础, 访问数据也是进行任何复杂的空间分析及空间可视化表达的前提.ArcGIS支持的数据格式比较丰富,对不同的数据格式支持的程度也有很大差异.本文主要介绍一下以下八种数据格式在ArcGI ...

  7. (Array,位操作)137. Single Number II

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  8. UNIX网络编程-Poll模型学习

    1.相关接口介绍 1.1 poll ---------------------------------------------------------------------- #include &l ...

  9. OpenCV的数据类型---Cv

    CvScalar就是一个包含四个元素的结构体变量. CvScalar定义可存放1—4个数值的数值,其结构如下. typedef struct CvScalar{    double val[4];}C ...

  10. NOIP复赛

    [代码为王] http://www.cnblogs.com/codeisking [洛谷] http://www.luogu.org/ NOIP2015 金币 扫雷游戏 求和 推销员 枚举 数学 优先 ...