Highcharts用来作为图表数据的展示十分方便,效果也比较好。highcharts不仅可以实现死数据的展示,也能实现动态数据的实时添加显示,类似财经股票的实时刷新效果,实现过程并不难,大致如下。

引用HighCharts 3.0后,可以对装载Highcharts图表的DIV容器加上一个方法highcharts(),该方法可以将图表装载到相应的容器中。js部分的代码如下:

其中主要的方法包括

function loadMoreDataForNoiseChart(seriesObj) {
var series = seriesObj[0];
var series1 = seriesObj[1];
chartsTime = setInterval(function () {
count;
var x = (newDate()).getTime()(8 * 60 * 60 * 1000); // 当前时间
var y;
// 第一条线
y = Math.floor(Math.random() * 70);
var newPoint;
newPoint = {
x: x, // current time
y: y,
marker: {
symbol: 'url(../../../Content/images/warnning.png)'
}
};
series.addPoint(newPoint, false, true); //只有第一条线的 第二个参数设为false
//第二条线
var y1;
y1 = Math.floor(Math.random() * 70);
var newPoint1;
newPoint1 = {
x: x, // current time
y: y1
};
series1.addPoint(newPoint1, true, true);
}, 1500); //1.5秒添加一次
}

 

getDataForNoiseMonitor()的具体实现如下:

//获得前几分钟的数据,使效果看起来比较好
function getDataForNoiseMonitor() {
var dataArr = [];
var plotName = ['一米阳光', '千里走单骑'];
for (var i = 0; i < myPlotName.length; i++) {
var tempObj = {
name: myPlotName[i],
data: []
};
var time = (newDate()).getTime()(8 * 60 * 60 * 1000), j; //调整时间
for (j = -10; j <= 0; j++) {
tempObj.data.push({
x: time + j * 3000, //前3分钟的时间
y: Math.floor(Math.random() * 70)
});
}
dataArr.push(tempObj);
}
returndataArr;
}

  

最后要说明的是,两个方法有一个共同的地方,就是折线的条数要相同,上面的示例中为两条。

效果如下:

 

Highcharts动态添加点数据的更多相关文章

  1. html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  2. js动态添加table 数据tr td

    成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table      概要代码 ...

  3. Js 动态添加的数据,监听事件监听不到

    在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...

  4. layui 动态添加 表格数据

    静态表格: <table class="layui-table" id="table" lay-filter="table"> ...

  5. 记一次LayUI中Table动态添加列数据

    这次在开发中遇到,有列数不固定的情况.废话不多说,先上图,在上代码. 下面上JS代码 function SearchData() { var dYear = $("#DYear") ...

  6. 微信小程序之分享,动态添加分享数据

    1.效果: 2..js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; r ...

  7. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  8. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  9. asp.net gridview动态添加列,并获取其数据;

    1,绑定数据前先动态添加列,见方法CreateGridColumn(只在第一次加载动态添加): 2,gvlist_RowDataBound为对应列添加控件: 前台代码: <%@ Page Lan ...

随机推荐

  1. 系统无法开始服务器进程。请检查用户名和密码。 (Exception from HRESULT: 0x8000401A)

    开始-运行-cmd,输入aspnet_regiis.exe -i 重新注册iis 或者 出现以下错误:检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-0000 ...

  2. python web前端

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  3. ArcGis for Android 工作与学习

    ArcGis安装 需求 windows7(32/64) Eclipse3.6以上版本 Android Sdk 2.2以上 Jdk 7 安装步骤 Eclipse安装 下载ArcGis插件 在Eclips ...

  4. AjaxStudyNote

    AjaxStudyNoteBy:Silvers:(E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6WEB基础-Ajax)15:02 2016/2/29什么是AjaxA ...

  5. 数据库中老师学生家长表添加自动同意好友自动(AgreeAddingFriend ),默认为True

    数据库中老师学生家长表添加自动同意好友自动(AgreeAddingFriend ),默认为True alter table Sys_User add AgreeAddingFriend bit alt ...

  6. SVN提交时响应很慢,我是这样解决的。

    现象:使用TortoiseSVN提交文件时,弹出提交窗口,要等待30秒的样子,才开始工作,开始提交文件后速度还是很快的. 解决后提交文件几乎是秒杀. 解决办法 (我的电脑可以了,但还是有些同事的电脑没 ...

  7. 手机sdk 开发

    题记:很多做游戏开发的人,估计都或多或少地接过渠道SDK,什么UC,当乐,91,小米,360......据统计国内市场当前不下于100家渠道,还包括一些没有SDK的小渠道.每个渠道SDK接入的方法呢, ...

  8. 谷歌 HTML/CSS 规范 2016-12-30

    背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...

  9. 006_Salesforce Sharing 使用说明

    Salesforce Sharing 使用说明 背景说明:Salesforce共享实施记录和其它数据时,需要员工之间共享或多个用户在一个组织间的共享.然而,共享这些数据是有风险的,尤其是当它涉及到敏感 ...

  10. iOS的生命周期

    iOS应用程序一般都是由自己编写的代码和系统框架组成.系统框架提供了一些基本的infrastructure给APP来运行,而开发者则自己编写代码定制APP的外观和行为,了解iOS infrastruc ...