事前准備
首先, 請先確定你已經下載了Flot檔案, 如果還沒有的話可以先回到 前一章 去下載. 這是你繪制的第一張圖, 我們用最常用的折線圖當例子, 折線圖常被用來顯示一段時間間隔趨勢的走向, 常見的有氣溫趨勢圖、 股票走勢圖等.
基本折線圖
繪制
繪制Flot圖表前, 你必須先指定一個定位點(Placeholder), 這個定位點將會是Flot繪制圖表的地方, 你可以把它放置在任何你想放的地方, 定位點如下, 放在<body>之間 <div id="flot-placeholder"></div>
再來用CSS給與定位點寬度與長度, 如果沒有指定定位點長與寬, 就會發生
"Uncaught Invalid dimensions for plot, width = 0, height = 0"的錯誤, 要特別注意!
#flot-placeholder{
width:350px;
height:300px;
}
接下來建立如下的數據數組組 變數data是數據源, 以指定x及y軸數據如[x, y], 變量dataset里是除了指定數據源外, 還指定了標簽(label)名稱, 若卷標名稱有設定時, 圖表右上方的圖例才會顯示.
var data = [
[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370],
[7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]
];
var dataset = [
{
label: "line1",
data: data
}
];
繪制圖表時可以設定一些選項讓圖表看起來更完整
var options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
}
}
};
最后再呼叫plot函式后把圖表繪制出來
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
呼叫plot函式需要帶入3個參數
$.plot(placeholder, data, options)
1. placeholder : 是一個DOM元素, Flot會把圖表插到這個元素之中, 這個元素必須要有指定寬度和高度.
2. data : 數據數組組, 如上面所提過的數據.
3. options : 在選項里可以設定Flot提供的屬性, 或是改變Flot的外觀、決定繪制何種圖形等.
下面是基本折線圖的完整程序代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#flot-placeholder{width:350px;height:300px;}
</style>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://www.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
var dataset = [{label: "line1",data: data}];
var options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
}
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
</script>
</head>
<body>
<div id="flot-placeholder"></div>
</body>
</html>
jquery 繪圖工具 flot 學習筆記
今天想做一個統計圖表，像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 的格式：
| 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軸。