今天想做一個統計圖表，像163博客的流量統計一樣的，借助 flot 實現了，而且很簡單。
下載 JS 文件，使用方法和 jquery 一樣。
注意：flot是自動繪制在畫布標簽（canvas）內的，IE不支持，需要添加 excanvas.min.js ，此文件可以在上面給出的flot網址中下載
上面的兩個網址已經將基礎說的很清楚了。
示例說明：
語法： $.plot(id, data, options);
1.id :放置 canvas 的 div 的ID
2.data :數據，一般為二維數組的形式。
例如：[[x1,y1],[x2,y2],[x3,y3] , ...]
如果某個數據為空，則對應點將被忽略，且改點前后兩個點將不再用直線連接。
3.options :樣式，用於設置顯示樣式。 options 的格式：
3.options :樣式，用於設置顯示樣式。 options 的格式：
| var options = { | |
| lines: { show: true }, | |
| points: { show: true }, | |
| xaxis: { tickDecimals: 0, tickSize: 1 } | |
| }; |
參數:
1.lines { } 顯示直線
show: true 顯示
color： "#FFFFFF" 線條顏色
steps: true 階梯形
2.points { } 顯示點
3.bars { } 顯示直方圖
4.xaxis { } 橫坐標的樣式
語法示例：$.plot($("#name"), [ d1,d2,d3 ]);
參數①：name 為畫布所在 div 的 id 。
參數②：d2，d3 一般為數列數組 [x,y]，x和y分別表示每個點的橫軸和縱軸，例如可以定義如下：
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
flot會依據其最大值和畫布大小自動設置刻度，例如設置div如下
<div id="placeholder" style="width:100px;height:100px;"></div>
則x方向每個像素表示 9/100=0.09 個單位，y方向每個像素表示 12/100=0.12 個單位。
語法示例：
$.plot($("#placeholder"), [
{
data: d1,
lines: { show: true, fill: true }
},
{
data: d2,
bars: { show: true }
},
{
data: d3,
points: { show: true }
},
{
data: d4,
lines: { show: true }
},
{
data: d5,
lines: { show: true },
points: { show: true }
},
{
data: d6,
lines: { show: true, steps: true }
}
]);
參數說明：lins 表示直線，參數 steps:true 表示梯形圖，bars 表示直方圖，points 表示點狀圖。與示例一比較，實例二將示例一中的數據用花括號括起，此時需要用 "data:" 指定數據源，逗號之后指定其顯示樣式。
例三：指定刻度顯示的內容
用法實例：
$.plot($("#placeholder"), [{ label: "", data: vData}],
{
series: { lines: { show: true }, points: { show: true} },
xaxis: { ticks: [[1, "1月"], [3, "3月"], [5, "5月"], [7, "7月"], [9, "9月"], [11, "11月"]], min: 1, max: 12 }, //指定固定的顯示內容
yaxis: { ticks: 5, min: 0 } //在y軸方向顯示5個刻度，此時顯示內容由 flot 根據所給的數據自動判斷
}
);
其中 vData 為自定義數據
var vData = [[1, 103], [2, 28], [3, 135], [4, 130], [5, 145], [6, 155], [7, 155], [8, 155], [9, 155], [10, 155], [11, 155], [12, 155]];
顯示效果為：
關鍵參數為 ticks 。可以看到本例中 x軸刻度的顯示內容是自己指定的，y軸讓 flot 自動划分，當然也可以指定y軸。
如果你是使用Internet Explorer, 且版本為8以下的, 瀏覽有用Flot繪制圖表的網頁可能無法正常觀看, 因為這些瀏覽器不支持HTML5 canvas標簽, 不過別擔心, 只要加入ExplorerCanvas插件(excanvas.min.js)就可以讓Internet Explorer也能正常顯示Flot圖表. 檔案可以到此下載.
加入定位點
准備好所需要的檔案后, 接下來就是決定Flot要繪圖的位置, 你可以自行決定Flot要在那里出現, 只要在<body>加上下面的<div>標簽, 並給一個id, 后面要繪制時會用到此id. 另一個比較重要的是, 你必須設置定位點的長度和寬度, 如果沒有設置就有可能發生Uncaught Invalid dimensions for plot, width = 0, height = 0的script錯誤.<div id="flot-placeholder" style="width:300px;height:150px"></div>