CPU负载实时更新图
所需要的档案
所有的档案都需加到<head>里, 因为我们有用到时间格式, 所以加入了jquery.flot.time.js, 另外Flot本身并不支持轴标签的设置, 所以需要透过加入jquery.flot.axislabels.js插件来达成轴标签的设置.以下程序代码就是此范例所会用到的全部档案
<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.<div id="flot-placeholder" style="width:600px;height:300px"></div>
.legendLabel { color:White; }
建立数据
因为我们范例所用到的数据点多达100个, 为了方便我们就不直接建立数据所需要用到的数组, 而是建立一个自定函式来产生所要用的数据. 我们先建立一个叫做totalPoints的变量, 它代表了我们所要绘制的数据点数量, 再来就是updateInterval, 这代表数据更新的时间间隔, 我们设定为1000毫秒表示每秒钟会更新一次. 另外我们还建立了一个叫now的变量, 用来取得现在时间的毫秒数. 接着就是跑循环用随机数建立出我们所要的数据点.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); } }
[ [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,这个属性可以控制线的宽度.series: { lines: { show: true, lineWidth: 1.2, fill: true } }
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 }
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 }
legend: { labelBoxBorderColor: "#fff" } grid: { backgroundColor: "#000000", tickColor: "#008040" }
设定实时更新
把数据及选项都完成后,最后面就是要让图表能定时来更新,一开始我们先呼叫一次GetData(),先把初始数据建立起来,之后就再呼叫$.plot,并把data及options变数带入.我们再建立一个自定函式叫update(),在此函式里再做一次GetData()及呼叫$.plot,然后利用setTimeout让图表能够不断的重新更新.如此一来实时更新图表就完成了.$(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(); });