JS绘图Flot如何实现动态可刷新曲线图资源-CSDN文库

40 浏览量 2021-01-18 18:21:32 上传评论收藏 87KB PDF 举报

资源详情

资源评论

资源推荐

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>

<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 () {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

内容反馈

weixin_38601103

粉丝: 7
资源: 945

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip