本文轉自：http://www.jqueryflottutorial.com/cn/how-to-make-jquery-flot-realtime-update-chart.html
實時更新圖表可以用到的地方有很多,如CPU負載圖、內存用量圖或是像在線人數圖等,在這我們會用CPU負載圖做爲範例.
所需要的檔案
所有的檔案都需加到<head>裏, 因爲我們有用到時間格式, 所以加入了jquery.flot.time.js, 另外Flot本身並不支持軸標籤的設置, 所以需要透過加入jquery.flot.axislabels.js插件來達成軸標籤的設置.以下程序代碼就是此範例所會用到的全部檔案
|
1
2
3
4
5
|
<script
type="text/javascript"
src="/js/jquery-1.8.3.min.js"></script>
<!--[if
lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]--> <script
type="text/javascript"
src="/js/flot/jquery.flot.js"></script><script
type="text/javascript"
src="/js/flot/jquery.flot.time.js"></script>
<script
type="text/javascript"
src="/js/flot/jquery.flot.axislabels.js"></script> |
加入定位點
準備好所需要的檔案後, 接下來就是決定Flot要繪圖的位置, 你可以自行決定Flot要在那裏出現, 只要在<body>加上下面的<div>標籤, 並給一個id, 然後設置定位點的長度和寬度後面要繪製時會用到此id.|
1
|
<div
id="flot-placeholder"
style="width:600px;height:300px"></div> |
|
1
2
3
4
|
.legendLabel{ color:White;} |
建立數據
因爲我們範例所用到的數據點多達100個, 爲了方便我們就不直接建立數據所需要用到的數組, 而是建立一個自定函式來產生所要用的數據. 我們先建立一個叫做totalPoints的變量, 它代表了我們所要繪製的數據點數量, 再來就是updateInterval, 這代表數據更新的時間間隔, 我們設定爲1000毫秒錶示每秒鐘會更新一次. 另外我們還建立了一個叫now的變量, 用來取得現在時間的毫秒數. 接着就是跑循環用隨機數建立出我們所要的數據點.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var
data = [];var
totalPoints = 100;var
updateInterval = 1000;var
now = new
Date().getTime();function
GetData() { data.shift();
//移除數組中的第一個項目 while
(data.length < totalPoints) { var
y = Math.random() * 100; var
temp = [now += updateInterval, y]; //data
format [x, y] data.push(temp); }} |
|
1
2
3
4
5
|
[ [1366080403385,
27.774008526466787], [1366080404385, 16.122459364123642], [1366080405385,
36.352222855202854], [1366080406385, 79.74009534809738], [1366080407385,
15.236222557723522], [1366080408385, 92.99933034926653], ...] |
實時更新圖選項
因爲我們畫的是線圖,所以設定series.lines.show爲true,我們也設定了series.lines.fill爲true,讓線圖可以填滿區域.另外我們設定了series.lines.lineWidth,這個屬性可以控制線的寬度.|
1
2
3
4
5
6
7
|
series:
{ lines:
{ show:
true, lineWidth:
1.2, fill:
true }} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
xaxis:
{ mode:
"time", tickSize:
[2, "second"], tickFormatter:
function
(v, axis) { var
date = new
Date(v); if
(date.getSeconds() % 20 == 0) { var
hours = date.getHours() < 10 ? "0"
+ date.getHours() : date.getHours(); var
minutes = date.getMinutes() < 10 ? "0"
+ date.getMinutes() : date.getMinutes(); var
seconds = date.getSeconds() < 10 ? "0"
+ date.getSeconds() : date.getSeconds(); return
hours + ":"
+ minutes + ":"
+ seconds; }
else
{ return
""; } }, axisLabel:
"Time", axisLabelUseCanvas:
true, axisLabelFontSizePixels:
12, axisLabelFontFamily:
'Verdana,
Arial', axisLabelPadding:
10} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
yaxis:
{ min:
0, max:
100, tickFormatter:
function
(v, axis) { if
(v % 10 == 0) { return
v + "%"; }
else
{ return
""; } }, axisLabel:
"CPU
loading", axisLabelUseCanvas:
true, axisLabelFontSizePixels:
12, axisLabelFontFamily:
'Verdana,
Arial', axisLabelPadding:
6} |
|
1
2
3
4
5
6
7
8
|
legend:
{ labelBoxBorderColor:
"#fff"}grid:
{ backgroundColor:
"#000000", tickColor:
"#008040"} |
設定實時更新
把數據及選項都完成後,最後面就是要讓圖表能定時來更新,一開始我們先呼叫一次GetData(),先把初始數據建立起來,之後就再呼叫$.plot,並把data及options變數帶入.我們再建立一個自定函式叫update(),在此函式裏再做一次GetData()及呼叫$.plot,然後利用setTimeout讓圖表能夠不斷的重新更新.如此一來實時更新圖表就完成了.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(document).ready(function
() { GetData(); dataset
= [ {
label: "CPU",
data: data, color: "#00FF00"
} ]; $.plot($("#flot-placeholder1"),
dataset, options); function
update() { GetData(); $.plot($("#flot-placeholder1"),
dataset, options) setTimeout(update,
updateInterval); } update();}); |