刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。
同样,为了兼容不同浏览器,请一定要引入三个JS文件,否则不保证在IE下的运行。
首先来看一下效果!
刷新间隔的实现其实就是定时调用某个函数,这个函数将绘图对象里面的数据更新即可。
我们来看一下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Flot动态曲线</title> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> <script type="text/javascript"> $(function () { // 要绘制的数据和数据的数据点数 var data = [], totalPoints = 300; // 获得一些随机数据 function getRandomData() { if (data.length > 0) data = data.slice(1); while (data.length < totalPoints) { var prev = data.length > 0 ? data[data.length - 1] : 50; var y = prev + Math.random() * 10 - 5; if (y < 0) y = 0; if (y > 100) y = 100; data.push(y); } var res = []; for (var i = 0; i < data.length; ++i) res.push([i, data[i]]) return res; } var updateInterval = 30; // 刷新间隔 // 更改刷新间隔时间 $("#updateInterval").val(updateInterval).change(function () { var v = $(this).val(); if (v && !isNaN(+v)) { updateInterval = +v; if (updateInterval < 1) updateInterval = 1; if (updateInterval > 2000) updateInterval = 2000; $(this).val("" + updateInterval); } }); // 设置绘图参数 var options = { series: { shadowSize: 0 }, // 绘制线的阴影,不绘制设置 0 yaxis: { min: 0, max: 100 }, // Y 轴的最大值最小值 xaxis: { show: false } // 不显示 X 轴 }; // 绘图对象 参数为:绘制地点、数据、属性 var plot = $.plot($("#placeholder"), [ getRandomData() ], options); function update() { // 要实现动态绘图,只需重新设置其数据即可 plot.setData([ getRandomData() ]); // 设置数据 // 轴线不改变,不用调用 plot.setupGrid() plot.draw(); // 设置调用 setTimeout(update, updateInterval); } // 加载调用 update(); }); </script> </head> <body> <div id="placeholder" style="width:600px;height:300px;"></div> <br><br> 刷新时间间隔:<input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> </body> </html>
输入不同的刷新间隔,绘图的速度会响应的调整。以上示例来自官方,少做修改并加以注释,希望对一些人有所帮助。
请您到ITEYE看我的原创:http://cuisuqiang.iteye.com
或支持我的个人博客,地址:http://www.javacui.com
相关推荐
NULL 博文链接:https://cuisuqiang.iteye.com/blog/1462586
NULL 博文链接:https://cuisuqiang.iteye.com/blog/1462646
JS 插件 flot 动态绘图 曲线 刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。
flot-flot-0.8.0-26-g2347c9a.zip
Js 绘图 Flot 示例!提供给同学们学习!
flot-0.7.zip绘图实例,很有用的
Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放。
NULL 博文链接:https://lchshu001.iteye.com/blog/1325410
基于JS的图表控件,功能强大,好用,目前文档也日益变多
刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。 同样,为了兼容不同浏览器,请一定要引入三个JS文件,否则不保证在IE下的运行。 首先来看...
来自jqflot的官网demo,可以直接运行
NULL 博文链接:https://roger86.iteye.com/blog/837379
flot-柱形图,自己用的flot-柱形图
flot-0.8.3,直接下载即可。无需忍受国外的网速
angular-flot, angular.js 和Flot图表库之间的绑定 角 flot 包装Flotcharts的一个 Angular 指令。安装这里库是作为 Bower 组件和NPM模块提供的:Bower: bower install angular-flotnpm install
今天再次动手用Flot,但是今天用的时候出现一些问题 首次报错的是 网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QQDownload 721; InfoPath.2) 时间戳: Fri, 8 ...
Algorithm-flot-downsample.zip,flot图表的downsample插件。,算法是为计算机程序高效、彻底地完成任务而创建的一组详细的准则。
代码能直接运行,运行在html和jsp中都可,有完整的文件,点击其中的html文件即可看到效果
刚刚做了可以动态去刷新的曲线图,下面再来实现一个可以选择显示那个显示值的曲线图。 首先看一下效果: 下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图。 重点是需要的数据的格式,我们来看一下...
这是 jQuery Flot 图绘图库的插件。 它尝试以更平滑的方式显示折线图。 该插件基于此处提到的 nergal.dev 的工作。 这项工作是根据 MIT 许可证获得许可的。 它包括一个“拟合点”功能(法院:Michael Zinsmaier),...