張玉葉，宿 超

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

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

張玉葉1，宿 超2

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

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

Jpgraph；PHP；WEB；圖表

一、引言

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

二、環(huán)境配置

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

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

2.編輯php.ini文件。

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

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

三、圖表的建立

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

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

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

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

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

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

表1 粉塵濃度表

1.具體實現(xiàn)過程

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

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

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

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

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

mysql_set_charset("gb2312");

?>

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

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

require_once 'src/jpgraph.php';//導(dǎo)入Jpgraph類庫

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

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

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

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

$data=array();

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

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

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

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

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

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

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

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

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

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

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

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

$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)建一個index.php頁面，用于顯示粉塵濃度折線圖。在index.php頁面中用一個img圖像來顯示生成的折線圖，對應(yīng)的代碼為：。

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

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

建立一個update.js文件(在index.php頁面中將此文件包含進來)，里面包含兩個函數(shù)，一個progress()函數(shù)和一個control()函數(shù)，用于實現(xiàn)折線圖的動態(tài)更新及當(dāng)前粉塵濃度值的即時顯示。代碼如下(本代碼采用了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);//此處的間隔時間可根據(jù)下位機采集數(shù)據(jù)的頻率設(shè)置，在此為演示將其設(shè)為2000

}

function progress(flag){

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

}

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

2.測試

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

圖1 運行結(jié)果1

圖2 運行結(jié)果2

五、結(jié)束語

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

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

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

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

2014-10-09

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

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

TP311.1

A

1008—3340(2015)02—0056—03