时间:2021-05-26
刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。
同样,为了兼容不同浏览器,请一定要引入三个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) datadata = 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>输入不同的刷新间隔,绘图的速度会响应的调整。以上示例来自官方,少做修改并加以注释,希望对一些人有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
刚刚做了可以动态去刷新的曲线图,下面再来实现一个可以选择显示那个显示值的曲线图。首先看一下效果:下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图。重
本文实例讲述了jQuery实现折线图的方法。分享给大家供大家参考。具体如下:效果图如下所示:js引用:复制代码代码如下:定时刷新:复制代码代码如下://曲线图a
excel如何根据表格里的数据绘制曲线图?下面小编带来excel曲线图绘制方法,有兴趣的朋友一起来看看吧。excel曲线图绘制方法:绘制正弦曲线:由于我们要生成
Qt曲线图模块QCustomPlot库介绍QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线、动态曲线、多重坐标曲线,柱状图,蜡烛图等前段时间用Q
如何编译安装QChart请查看下面文章Qt图形图像开发之曲线图表库QtChart编译安装详细方法与使用实例使用Qt曲线图表模块Chart库首先要注意3点:(1)