flot图表的使用
2024-10-16 19:00:10
Flot是一套用Javascript写的绘制图表用的函式库, 专门用在网页上执行绘制图表功能, 由于Flot利用jQuery所以写出来的, 所以也称它为jQuery Flot ,它的特点是体积小、执行速度快、支持的图形种类齐全, 用于一般情况绝对够用. 除此之外, Flot还有许多plugins可供使用, 用以补足Flot本身所没有的功能。
- 绘制图表
网页内容:
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>FLOT DEMO</title>
</head>
<body>
<div id="placeholder" style="height:200px;" align="center"></div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.min.js"></script>
<script type='text/javascript'>
var d=[];
for (var i=0; i<15; i++) {
d.push([i, Math.random()]);
}
$.plot($("#placeholder"), [d]);
</script>
</html>
显示效果:
- 动态图表
使用setInterval来设定图表每一秒更新一次。
网页内容:
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>FLOT DEMO</title>
</head>
<body>
<div id="placeholder" style="height:200px;" align="center"></div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.min.js"></script>
<script type='text/javascript'>
$(function(){setInterval(plot_data,1000);})
var d=[];
var i=0;
function plot_data(){
d.push([i++, Math.random()]);
if(d.length>15) d.shift();
$.plot($("#placeholder"), [d]);
if(i>60){
i=0;d=[];
}
}
</script>
</html>
显示效果:
最新文章
- css遮罩代码(已验证)
- 用JQ仿造百度书籍预售页面的单屏滚页效果
- 优化Angular应用的性能
- 前端开发流程之(线上)绝对地址(图片+css+js)
- 比较下OceanBase的选举协议和Raft的选举协议的区别
- CSS 文字阴影(text-shadow)怎么用
- 洛谷 P1896 [SCOI2005]互不侵犯King
- 删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性
- word-wrap,word-break,text-wrap的区别
- 基于FPGA的DW8051移植(一)
- 杭电OJ_DIY_YTW2_1001 A Mathematical Curiosity
- Markdown 语法文档
- T-SQL基础(四)之集合运算
- doc命令大全(详细版)
- 潭州课堂25班:Ph201805201 django框架 第三课 模板路径,变量,过滤器,静态文件的引用 (课堂笔记)
- 免费ss账号网站
- MySQL练习题2
- Python中cPickle
- macbook上安装homestead
- Civil War