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 ...
随机推荐
-
zendframework 2
我想我的生活需要新的挑战 zf2整个框架里面都应用了namespace,并且他的每个模块,我们都可以根据自己的需要去命名路径,对我来说,zf2的模块化更加的清晰,对于外包来说,或许很方便. 创建他,我 ...
-
【jquery】:表单返回信息
第一个页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
-
SQL Server性能优化(4)命名和书写规范
命名规范是一个老生常谈的问题,好的命名规范对于团队程序开发,对bug定位.处理,项目延续有很重要的作用. 一. 列举现在的问题: 1.名称首字母不大写 2. 用中文名字 ...
-
IIS中asp网站播放flv视频技术
播放flv视频文件需要使用flvplayer.swf程序(32K). HTML嵌入代码: <div id="FlashFile"> <object type=&q ...
-
svn: E200007: CHECKOUT can only be performed on a version resource
这两天不知道怎么了svn一直出错:出错信息如下: svn: E200007: Commit failed (details follow): svn: E200007: Commit failed ( ...
-
css关键字unset
今天遇到了一个css属性 display:unset 以为是新增的display的属性值,查了好久,发现并没有这个属性值, 后来发现了unset是css的关键字,将一个属性的属性值设置为unset,目 ...
-
create a plugin for PowerShell ISE
可参考:Creating Add-ons, Plugins, and Tools for the PowerShell ISE http://www.leeholmes.com/blog/2013/0 ...
-
【Hibernate步步为营】--最后的集合映射
上篇文章具体讨论了组合对象映射的原理.它事实上指的是怎样将对象模型中的组合关系映射到关系模型中,它是通过使用Hibernate提供的<component>标签来实现的,并须要在该标签中加入 ...
-
【javascript】iOS Safari 中点击事件失效的解决办法
问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. ...
-
Hadoop虚拟机的jdk版本和本地eclipse的版本不一致怎么办
在本周学习Hadoop遇到了一个问题,困扰了半天,本人在安装Hadoop时是按照视频来的,结果发现Hadoop上的jdk版本和本地eclipse的版本不一致,导致本地的程序到处jar包传到虚拟机上运用 ...