jquery flot圖表插件

官網例子：http://people.iola.dk/olau/flot/examples/

官網例子打包下載：http://code.google.com/p/flot/downloads/list

官網API（英文）：   https://github.com/flot/flot/blob/master/API.md

中文API：http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html

首先在頁面引入：

<script src="JavaScript/jquery.js" type="text/javascript"></script><script src="JavaScript/jquery.flot.js" type="text/javascript"></script>

由於Flot是在HTML5的canvas標籤上畫的，因此不支持該標籤的瀏覽器要想畫圖還須要引入：

<!--[if IE]><script language="javascript" type="text/javascript" src="JavaScript/Flot/excanvas.pack.js"></script><![endif]-->

canvas標籤簡介：http://www.w3school.com.cn/html5/tag_canvas.asp

該插件能夠畫lines、points、bars、pie，（線狀圖、點狀圖、柱狀圖、餅狀圖）四種圖形。

畫圖以前用一個Div當作畫布：<div id="placeholder" style="width:600px;height:300px;"></div>

定義一個數據：var d1 = [[0, 10],[7, 25], [11, 23],[17, 22],[19, 5],[28, 10],[27, 30]];

1 畫一個淺藍色的線狀圖 $.plot($("#placeholder"), [{    data:d1,lines:{show:true},color: "#87CEFA"     }]);

2 畫一個深藍色的點狀圖 $.plot($("#placeholder"), [{    data:d1,points:{show:true},color: "#1E90FF"   }]);

你可能發現點狀圖的點怎麼是空心的？

實心：$.plot($("#placeholder"), [{  data:d1,points:{show:true,lineWidth:4,radius:2},color: "#1E90FF"  }]);

原來點的實心與否和lineWidth、radius（線的寬度、點的大小）有關，根據這兩個屬性能夠隨意設置點的大小和空心的大小。

3 怎麼把點狀圖的點連起來那，其實把兩圖合併就能夠了。

$.plot($("#placeholder"), [{   data:d1,lines:{show:true},color: "#87CEFA"   },{   data:d1,points:{show:true,lineWidth:4,radius:2},color: "#1E90FF"   }]);