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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
基于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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python中获取对象信息的方法
2015/04/27 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
利用python循环创建多个文件的方法
2018/10/25 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python子类继承父类构造函数详解
2019/02/19 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
用python写PDF转换器的实现
2020/10/29 Python
运动会广播稿60字
2014/01/15 职场文书
代理人委托书
2014/08/01 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
九寨沟导游词
2015/02/02 职场文书
中班上学期个人总结
2015/02/12 职场文书
小学少先队活动总结
2015/05/08 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
Python合并pdf文件的工具
2021/07/01 Python