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 相关文章推荐
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
JS获取当前时间戳方法解析
Aug 29 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
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
浅谈django中的认证与登录
2016/10/31 Python
Python循环结构的应用场景详解
2019/07/11 Python
详解python pandas 分组统计的方法
2019/07/30 Python
flask 实现token机制的示例代码
2019/11/07 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
中秋节礼品促销方案
2014/02/02 职场文书
优秀实习生感言
2014/03/01 职场文书
我爱我家教学反思
2014/05/01 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
小学生环保倡议书
2014/05/15 职场文书
公司副总经理任命书
2014/06/05 职场文书
捐款感谢信
2015/01/20 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python字典和列表性能之间的比较
2021/06/07 Python
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js