只是說一下基本用法，舉一兩個例子，詳細用法請查看官方文檔
使用方法是要先引入jquery插件，然后引入flot插件。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../js/jquery.flot.js"></script>
首先來看一下官方introduction
Consider a call to the plot function:
var plot = $.plot(placeholder, data, options)
這應該是plot用法的總基調，因為每個參數都有默認值，所以只需指定需要修改的參數即可。
舉一個簡單的例子，data是基本數據數組
html文件
<!DOCTYPE html>
<html>
<head>
<title>學習使用flot</title>
<meta charset="utf-8">
</head>
<body>
<div id="navigate">
</div>
<div id="content">
<div id="flot" style="width:800px;height:600px;">
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.flot.js"></script>
<script type="text/javascript" src="../js/flottest.js"></script>
</body>
</html>
在js文件中寫入
$(function(){ $.plot($("#flot"),[[[0,0],[1,1],[2,1],[4,3],[5,7]]]) })
出來的效果如圖所示
data也可以是對象，
對於數據為對象類型時應當滿足如下格式內容：
{ color: color or number data: rawdata label: string lines: specific lines options bars: specific bars options points: specific points options xaxis: number yaxis: number clickable: boolean hoverable: boolean shadowSize: number highlightColor: color or number }
js代碼如下
var d1=[] for(var i=0;i<10;i +=0.2){ d1.push([i,Math.sin(i)*5]); } var d2 = [[0, 3], [4, 7], [8, 0], [9, 7]]; $.plot($("#flot2"),[{ data:d1, label:"sin(x)", lines: { show: true} },{ data:d2, label:"line", points:{show:true}, lines:{show:true} }]);
顯示效果如下：
