JS绘图Flot如何实现动态可刷新曲线图
刚刚做的是一个静态的曲线图，只要设置数据，就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。
同样，为了兼容不同浏览器，请一定要引入三个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>
输入不同的刷新间隔，绘图的速度会响应的调整。以上示例来自官方，少做修改并加以注释，希望对一些人有所帮助。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js生成图片验证码
本文实例为大家分享了js生成图片验证码的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <div id="v_container" style="width: 200px;hei
-
JS实现简易图片自动轮播
本文实例为大家分享了JS实现简易图片自动轮播的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>自动播放选项卡</title> <style> *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1px solid
-
JS绘图Flot如何实现可选显示曲线图功能
刚刚做了可以动态去刷新的曲线图,下面再来实现一个可以选择显示那个显示值的曲线图. 首先看一下效果: 下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图. 重点是需要的数据的格式,我们来看一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
-
JS highcharts动态柱状图原理及实现
实现一个柱状图,这个柱状图的高度在不停的刷新,效果如下: 官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用! 看一下代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>Highcharts Example&l
-
js轮播图之旋转木马效果
本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将数组最后一个数据删除,然后添加到数组的开头 先附上效果图,再来实现 接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl
-
jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>折线图</title> <!--[if lte IE 8]> <script language="javascript" type="text/javas
-
JS绘图Flot应用图形绘制异常解决方案
今天再次动手用Flot,但是今天用的时候出现一些问题 首次报错的是 网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QQDownload 721; InfoPath.2) 时间戳: Fri, 8 Jun 2012 04:59:50 UTC 消息: 'window.G_vmlCanvasManager' 为空或不是对象 行: 698 字符: 17 代码: 0 URI: http://loc
-
JS绘图Flot如何实现动态可刷新曲线图
刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示.下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例. 同样,为了兼容不同浏览器,请一定要引入三个JS文件,否则不保证在IE下的运行. 首先来看一下效果! 刷新间隔的实现其实就是定时调用某个函数,这个函数将绘图对象里面的数据更新即可. 我们来看一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o
-
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:
-
D3.js实现简洁实用的动态仪表盘的示例
本文介绍了D3.js实现简洁实用的动态仪表盘的示例,分享给大家,具体如下: 动态效果图: 仪表盘效果图 细看上面的动态效果图,可以发现: 一个值变换到一个新的值时,是一个渐变的过程: 圆弧末尾有一个竖线,作为仪表盘的指针,在仪表盘数值变化时,有一个弹性的动画效果. 一开始,我是用Echarts来实现仪表盘,但是它无法满足上面的两点需求.所以后来改成用D3.js. D3.js可以完美地实现图表的定制,从细节上,完美地满足我们的需求. 初始化仪表盘 1.首先定义一个svg元素: <svg id=&quo
-
基于vue 动态菜单 刷新空白问题的解决
1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新,重新根据后台返回数据生成动态路由,就像你在登陆时做的事情一样. 代码示范注意点: //注意:确定自己避免了路由守卫进入死循环 let oneRun = true; //通过oneRun变量控制 避免陷入死循环 router.beforeEach((to,from,next)=>{ if(oneRun){ oneRun = false;//
-
vue3动态路由刷新后空白或者404问题的解决
目录 前言 实现 登出页面需要清除缓存 排错过程 总结 前言 之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "
-
五步教你用Nginx部署Vue项目及解决动态路由刷新404问题
目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法
-
JS实现从表格中动态删除指定行的方法
本文实例讲述了JS实现从表格中动态删除指定行的方法.分享给大家供大家参考.具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteR
-
JS实现点击Radio动态更新table数据
tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name