張玉葉，宿 超

(1.濟(jì)南職業(yè)學(xué)院計(jì)算機(jī)系，山東 濟(jì)南 250014；2.山東廣播電視大學(xué)，山東 濟(jì)南 250014)

實(shí)時(shí)監(jiān)控系統(tǒng)中動(dòng)態(tài)折線圖的實(shí)現(xiàn)

張玉葉1，宿 超2

(1.濟(jì)南職業(yè)學(xué)院計(jì)算機(jī)系，山東 濟(jì)南 250014；2.山東廣播電視大學(xué)，山東 濟(jì)南 250014)

以一個(gè)智能?chē)婌F實(shí)時(shí)監(jiān)控系統(tǒng)中粉塵濃度動(dòng)態(tài)折線圖的實(shí)現(xiàn)為例，講解了如何利用Jpgraph在PHP中畫(huà)圖。給出了具體的實(shí)現(xiàn)過(guò)程和完整代碼及程序調(diào)試技巧。

Jpgraph；PHP；WEB；圖表

一、引言

在一些工業(yè)設(shè)備實(shí)時(shí)監(jiān)控系統(tǒng)中經(jīng)常需要監(jiān)測(cè)設(shè)備的運(yùn)行情況，為了顯示直觀清楚，通常需要用圖形化的方式將其顯示出來(lái)。在開(kāi)發(fā)智能?chē)婌F實(shí)時(shí)監(jiān)控系統(tǒng)時(shí)需要實(shí)時(shí)監(jiān)控井下的粉塵、溫度、瓦斯等情況，為了讓井上管理人員及時(shí)了解粉塵、溫度、瓦斯等變化情況，監(jiān)控界面中以圖形化的方式將這些數(shù)據(jù)顯示出來(lái)。本文以粉塵濃度動(dòng)態(tài)折線圖的實(shí)現(xiàn)為例，詳細(xì)講解了如何利用Jpgraph在PHP中做圖的方法，并給出了具體的實(shí)現(xiàn)代碼。

二、環(huán)境配置

本系統(tǒng)采用WAMP開(kāi)發(fā)平臺(tái)，即windows操作系統(tǒng)、apache服務(wù)器、MySql數(shù)據(jù)庫(kù)和PHP編程語(yǔ)言。要在php中使用Jpgraph,須將Jpgraph的類(lèi)包導(dǎo)入到程序中。相應(yīng)的配置方法[1,2]：

1.將下載的Jpgraph壓縮包解壓到某一文件夾中，如c:jpgraph。

2.編輯php.ini文件。

(1)找到php.ini文件里的“;extension=php_gd2.dll”，將其前面的;(分號(hào))去掉，使其支持GD庫(kù)。

(2)修改include_path配置項(xiàng)，在該項(xiàng)后面增加Jpgraph類(lèi)庫(kù)的保存目錄,例如：“,;c:jpgraph”。

三、圖表的建立

在PHP中利用Jpgraph生成圖表，通常需要三個(gè)步驟：

1.建立數(shù)據(jù)集。

2.利用Jpgraph提供的相應(yīng)類(lèi)作圖。

3.獲取圖片，在相應(yīng)的PHP頁(yè)面中顯示。

四、粉塵濃度動(dòng)態(tài)折線圖的實(shí)現(xiàn)

具體的實(shí)時(shí)監(jiān)控系統(tǒng)通常由下位機(jī)采集數(shù)據(jù)，然后傳遞給上位機(jī)顯示。需要保存的歷史數(shù)據(jù)通常放在上位機(jī)的數(shù)據(jù)庫(kù)中。本文主要講解上位機(jī)中如何將下位機(jī)采集并放到數(shù)據(jù)庫(kù)中的數(shù)據(jù)以圖形化方式顯示出來(lái)，至于下位機(jī)如何采集數(shù)據(jù)并送往數(shù)據(jù)庫(kù)不在本文的討論范圍內(nèi)。設(shè)下位機(jī)已經(jīng)將采集到的數(shù)據(jù)送往數(shù)據(jù)庫(kù)中相應(yīng)的表中存放。在測(cè)試時(shí)可通過(guò)往表中人工插入數(shù)據(jù)來(lái)模擬下位機(jī)不停地將采集到的數(shù)據(jù)送往表中。下面以粉塵濃度動(dòng)態(tài)折線圖的實(shí)現(xiàn)為例說(shuō)明如何利用Jpgraph在PHP中做圖。設(shè)在某一時(shí)刻粉塵濃度表中的數(shù)據(jù)如表1所示。

表1 粉塵濃度表

1.具體實(shí)現(xiàn)過(guò)程

(1)連接數(shù)據(jù)庫(kù)

粉塵濃度動(dòng)態(tài)折線圖中的數(shù)據(jù)來(lái)自于數(shù)據(jù)庫(kù)中的粉塵濃度表，首先要建立與數(shù)據(jù)庫(kù)的連接，因監(jiān)控系統(tǒng)中需要用到數(shù)據(jù)庫(kù)中的多個(gè)不同的表，為了便于代碼的重用，可將與數(shù)據(jù)庫(kù)的連接寫(xiě)成一個(gè)單獨(dú)的文件中(在此放在conn.php文件中)，用到時(shí)將其直接引入進(jìn)來(lái)即可。

與數(shù)據(jù)庫(kù)連接的代碼如下：

@mysql_connect("localhost","root","123456") or die("mysql 連接失敗");

@mysql_select_db("meikuang") or die("數(shù)據(jù)庫(kù)連接失敗");

mysql_set_charset("gb2312");

?>

(2)創(chuàng)建數(shù)據(jù)集并做圖

創(chuàng)建一個(gè)createimg.php文件，用于從數(shù)據(jù)庫(kù)的粉塵濃度表中查詢(xún)所有的數(shù)據(jù)并將其用折線圖顯示出來(lái)。

require_once 'src/jpgraph.php';//導(dǎo)入Jpgraph類(lèi)庫(kù)

require_once 'src/jpgraph_line.php';//導(dǎo)入Jpgraph類(lèi)庫(kù)的柱狀圖功能

include('conn.php');//導(dǎo)入數(shù)據(jù)庫(kù)連接文件

$strsql="select nongdu from dust ";//查詢(xún)粉塵濃度表中的濃度值

$result=mysql_query($strsql);//執(zhí)行查詢(xún)

$data=array();

while($rs=mysql_fetch_array($result)){

array_push($data,$rs['nongdu']);

}//創(chuàng)建數(shù)據(jù)庫(kù)集，將從表中查詢(xún)到的濃度值添加到數(shù)據(jù)集中

$graph=new Graph(800,400);//設(shè)置畫(huà)布大小

$graph->SetScale('textlin');//設(shè)置刻度樣式

$graph->SetShadow();//設(shè)置背景帶陰影

$graph->img->SetMargin(40,30,40,40);//設(shè)置圖表邊距

$lineplot=new LinePlot ($data);//建立LinePlot對(duì)象

$graph->add($lineplot);// 添加LinePlot對(duì)象

$graph->title->Set("實(shí)時(shí)粉塵濃度曲線圖");//設(shè)置標(biāo)題

$graph->xaxis->title->Set("時(shí)間");//設(shè)置X軸坐標(biāo)名稱(chēng)

$graph->yaxis->title->Set("濃度(mg/m3)");//設(shè)置Y軸坐標(biāo)名稱(chēng)

$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置標(biāo)題字體

$graph->xaxis->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置X軸字體

$graph->yaxis->title->SetFont(FF_SIMSUN,FS_BOLD); //設(shè)置Y軸字體

$lineplot->SetColor("red");//設(shè)置線條顏色

$graph->Stroke();//生成圖像

?>

(3)獲取圖片并顯示

創(chuàng)建一個(gè)index.php頁(yè)面，用于顯示粉塵濃度折線圖。在index.php頁(yè)面中用一個(gè)img圖像來(lái)顯示生成的折線圖，對(duì)應(yīng)的代碼為：。

(4)粉塵濃度折線圖的動(dòng)態(tài)更新

通過(guò)前面3步已經(jīng)能夠生成粉塵濃度折線圖，但還無(wú)法實(shí)現(xiàn)動(dòng)態(tài)更新，也即當(dāng)下位機(jī)采集到新的數(shù)據(jù)后并不能自動(dòng)反映到折線圖中，必須通過(guò)點(diǎn)擊“刷新”按鈕才能實(shí)現(xiàn)折線圖的更新，給用戶(hù)的使用帶來(lái)極大的不便，對(duì)此加以改進(jìn)，讓其能自動(dòng)更新。自動(dòng)更新的原理實(shí)際上就是對(duì)折線圖中的數(shù)據(jù)進(jìn)行動(dòng)態(tài)更新和加載，為了演示清楚和便于對(duì)照起見(jiàn)，在index.php頁(yè)面中再添加一動(dòng)態(tài)顯示當(dāng)前粉塵濃度值的div,相對(duì)應(yīng)的代碼：。

建立一個(gè)update.js文件(在index.php頁(yè)面中將此文件包含進(jìn)來(lái))，里面包含兩個(gè)函數(shù)，一個(gè)progress()函數(shù)和一個(gè)control()函數(shù)，用于實(shí)現(xiàn)折線圖的動(dòng)態(tài)更新及當(dāng)前粉塵濃度值的即時(shí)顯示。代碼如下(本代碼采用了jQuery框架[3])：

function control(){

var t=new Date();

progress(t);

$.get("resp.php?flag="+t,function(data){

$("#nongdu").html("當(dāng)前粉塵濃度"+data);//利用jQuery框架的AJAX技術(shù)獲取當(dāng)前粉塵濃度值

});

setTimeout('control()',2000);//此處的間隔時(shí)間可根據(jù)下位機(jī)采集數(shù)據(jù)的頻率設(shè)置，在此為演示將其設(shè)為2000

}

function progress(flag){

$("#img").attr("src","createimg.php?flag="+flag);//為圖像設(shè)置src屬性

}

最后在index.php頁(yè)面中再添加調(diào)用control()函數(shù)的語(yǔ)句，使得折線圖能夠動(dòng)態(tài)更新，相應(yīng)的代碼。

2.測(cè)試

啟動(dòng)Apache服務(wù)器，打開(kāi)瀏覽器瀏覽index.php文件，此時(shí)運(yùn)行結(jié)果如圖1所示。為測(cè)試折線圖能否自動(dòng)更新，再啟動(dòng)phpMyadmin，手工往粉塵濃度表里面添加一個(gè)粉塵濃度值(如34)，切換到粉塵濃度曲線圖頁(yè)面中，發(fā)現(xiàn)折線圖及粉塵濃度值已經(jīng)自動(dòng)發(fā)生了改變，運(yùn)行結(jié)果如圖2所示。通過(guò)測(cè)試結(jié)果可以看出，在沒(méi)有點(diǎn)擊“刷新”按鈕的情況下系統(tǒng)自動(dòng)實(shí)現(xiàn)了粉塵濃度折線圖的實(shí)時(shí)更新，也就達(dá)到了實(shí)時(shí)監(jiān)控系統(tǒng)的要求。

圖1 運(yùn)行結(jié)果1

圖2 運(yùn)行結(jié)果2

五、結(jié)束語(yǔ)

在一些工業(yè)設(shè)備的實(shí)時(shí)監(jiān)控系統(tǒng)中為了顯示的直觀、清晰，經(jīng)常需要使用各種圖表。本文介紹的粉塵濃度動(dòng)態(tài)折線圖的實(shí)現(xiàn)方法簡(jiǎn)單方便，根據(jù)此思路，用戶(hù)可利用Jpgraph提供的強(qiáng)大的圖表功能在PHP中制作各種不同的動(dòng)態(tài)圖表。

[1]宗小忠.基于LAMP的網(wǎng)站流量分析系統(tǒng)圖表功能的設(shè)計(jì)與實(shí)現(xiàn)[J].沙州職業(yè)工學(xué)院學(xué)報(bào)，2010,(02).

[2]馬春興等.輕松學(xué)PHP編程[M].北京：化學(xué)工業(yè)出版社,2012.

[3]曾順.精通JavaScript+jQuery[M].北京：人民郵電出版社,2008.

2014-10-09

本研究成果得到山東省高等學(xué)校青年骨干教師國(guó)內(nèi)訪問(wèn)學(xué)者項(xiàng)目經(jīng)費(fèi)資助(魯教人字[2013]8號(hào))。

張玉葉(1973-)，女，濟(jì)南職業(yè)學(xué)院講師，碩士，研究方向：程序設(shè)計(jì)、算法、嵌入式系統(tǒng)。 宿超，男，山東廣播電視大學(xué)高級(jí)工程師。

TP311.1

A

1008—3340(2015)02—0056—03