JS绘图Flot如何实现动态可刷新曲线图


Posted in Javascript onOctober 16, 2020

刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。

同样,为了兼容不同浏览器,请一定要引入三个JS文件,否则不保证在IE下的运行。

首先来看一下效果!

JS绘图Flot如何实现动态可刷新曲线图

刷新间隔的实现其实就是定时调用某个函数,这个函数将绘图对象里面的数据更新即可。

我们来看一下代码:

<!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>

输入不同的刷新间隔,绘图的速度会响应的调整。以上示例来自官方,少做修改并加以注释,希望对一些人有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
JS绘图Flot应用图形绘制异常解决方案
Oct 16 #Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 #Javascript
JS highcharts动态柱状图原理及实现
Oct 16 #Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 #Javascript
JS highcharts实现动态曲线代码示例
Oct 16 #Javascript
Swiper实现导航栏滚动效果
Oct 16 #Javascript
You might like
php打造属于自己的MVC框架
2012/03/07 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python实现发送邮件及附件功能
2021/03/02 Python
python二元表达式用法
2019/12/04 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
基于python实现对文件进行切分行
2020/04/26 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
override和overload的区别
2016/03/09 面试题
2014保险公司个人工作总结
2014/12/09 职场文书
运动会通讯稿300字
2015/07/20 职场文书