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>
显示效果：