Highcharts动态添加点数据
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动态添加点数据的更多相关文章
- html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...
- js动态添加table 数据tr td
成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table 概要代码 ...
- Js 动态添加的数据,监听事件监听不到
在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...
- layui 动态添加 表格数据
静态表格: <table class="layui-table" id="table" lay-filter="table"> ...
- 记一次LayUI中Table动态添加列数据
这次在开发中遇到,有列数不固定的情况.废话不多说,先上图,在上代码. 下面上JS代码 function SearchData() { var dYear = $("#DYear") ...
- 微信小程序之分享,动态添加分享数据
1.效果: 2..js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; r ...
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- asp.net gridview动态添加列,并获取其数据;
1,绑定数据前先动态添加列,见方法CreateGridColumn(只在第一次加载动态添加): 2,gvlist_RowDataBound为对应列添加控件: 前台代码: <%@ Page Lan ...
随机推荐
- cs
cs <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- MWeb 2.0.7 版发布!
更新前针对 MAS 上的评论重点说一下:MWeb 是支持直接对本地文件夹操作的,不用导入到文档库!请使用外部模式!请使用外部模式!!请使用外部模式!!! 重要的话讲三次!使用方法是 CMD + E 打 ...
- java随笔
java与c++的几点区别 (1)Java比C++程序可靠性更高.有人曾估计每50行C++程序中至少有一个BUG.姑且不去讨论这个数字是否夸张,但是任何一个C++程序员都不得不承认C++语言在提供强大 ...
- GZIP压缩优化
使用gzip优化web应用(filter实现) 相关知识: gzip是http协议中使用的一种加密算法,客户端向web服务器端发出了请求后,通常情况下服务器端会将页面文件和其他资源,返回到客户端,客户 ...
- 摘抄转载前辈们的Java集合类总结
本文摘自 Blue Sky:http://www.cnblogs.com/hubcarl JAVA 集合类介绍和使用 类关系示意图Iterable(接口) │ └--Collection (接口) ├ ...
- java方法与构造
public class StaticClass { static int i = 50; int y; // 构造只能有访问修饰符public.protected.private 修饰 (访问修饰符 ...
- Eclipse安装svn插件的几种方式
Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...
- [SublimeText] 安装包管理
由于各种访问原因,因此记录一下给自己使用,原文地址如下: http://www.bonusbits.com/wiki/HowTo:Setup_Package_Control_for_Sublime_T ...
- ThinkPHP的异步搜索
因为公司的后台框架采用了Ajax异步处理,控制器的方法,有时候会被多个连接所重复调用,虽然这个很符合OOP开发思想,但是为了维护这个框架,付出的汗水也是很大的. 说下正题了: 我在后台的搜索框调用了优 ...
- python之编写登陆接口(第一天)
作业:编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 针对此实例写了有二种类型的脚本,略有不同,具体如下: 帐号文件account.txt内容如下: sam 123 david ...