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 mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
React冒泡和阻止冒泡的应用详解
Aug 18 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
用session做客户验证时的注意事项
2006/10/09 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python Socket使用实例
2017/12/18 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python3的socket使用方法详解
2020/02/18 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
温馨提示标语
2014/06/26 职场文书
英语教研活动总结
2014/07/02 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python