使用jQuery+flot插件在网页中动态显示服务器CPU运行状态

最新推荐文章于 2021-08-06 04:29:07 发布

月蚀工作室

最新推荐文章于 2021-08-06 04:29:07 发布

阅读量1.9k

点赞数 1

本文介绍如何使用jQuery Flot创建实时更新的CPU负载图表。通过设置Flot的配置选项，实现每秒更新图表数据，并展示如何自定义图表样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文转自：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插件来达成轴标签的设置.

以下程序代码就是此范例所会用到的全部档案

<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>

另外我们另外设置了一个CSS class "legendLabel", 因为我们背景会设定成黑色的, 所以我们利用CSS来把图例的文字颜色设定成白色的.

.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

    }

}

在x轴的选项里, 因为我们绘制的是时间格式图, 所以设定xaxis.mode为"time". 我们还设定了xaxis.tickSize: [2, "second"], 表示x轴的刻度标签以每隔2秒显示,如此一来可以调整图表里的网格线使其间隔更小.另外因为设定了tickSize后,刻度会因为太密集的显示,会让用户无法看到所显示的时间卷标, 所以我们再设定了xaxis.tickFormatter, 主要用意是让时间标签以每隔20秒的间隔显示.

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

}

在y轴的选项里,我们设定了yaxis.min为0,yaxis.max为100,这样一来就能把y轴的刻度标签限制在0~100之间.而yaxis.tickSize我们设定成5,如此一来可以让y轴的网格线出现的间隔距离缩小.另外我们也同样的设定了yaxis.tickFormatter,让y轴的刻度卷标以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为白色,这样能让图例更显眼点.而网格的部份,我们设定了backgroundColor为黑色,另外还设定了tickColor,这个属性可以改变网格线的颜色.

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();

});