Highcharts在動(dòng)態(tài)數(shù)據(jù)監(jiān)測(cè)系統(tǒng)中的開發(fā)與應(yīng)用

摘要：為解決傳統(tǒng)數(shù)據(jù)監(jiān)測(cè)系統(tǒng)中數(shù)據(jù)不直觀的問題，提出將開源的Web圖表組件Highcharts應(yīng)用到原有的系統(tǒng)中來，快速實(shí)現(xiàn)數(shù)據(jù)以圖表呈現(xiàn)，且有相應(yīng)的數(shù)據(jù)交互。分析了Highcharts的基本組成及應(yīng)用過程，重點(diǎn)研究了其獲取外部動(dòng)態(tài)數(shù)據(jù)的呈現(xiàn)過程，給出了一個(gè)快速開發(fā)到原數(shù)據(jù)監(jiān)測(cè)系統(tǒng)中的方法，并將其應(yīng)用在一個(gè)溫濕度環(huán)境監(jiān)測(cè)系統(tǒng)中，實(shí)現(xiàn)了用戶不僅很直觀地看出數(shù)據(jù)的變化，也可以動(dòng)態(tài)地查看每個(gè)時(shí)間節(jié)點(diǎn)溫濕度的數(shù)據(jù)值。結(jié)果表明，用戶對(duì)監(jiān)控的感知體驗(yàn)較好，可提高生產(chǎn)的水平和效率。

關(guān)鍵詞：環(huán)境監(jiān)測(cè)；圖表；Highcharts；數(shù)據(jù)交互

中圖分類號(hào)：TP311文獻(xiàn)標(biāo)志碼：A文章編號(hào)：1008-1739（2018）16-69-3

Development and Application of Highcharts in the Dynamic Data Monitoring System

ZHAO Jianxun

（Information Center， Xi爺an University， Xi爺an Shaanxi 710068， China）

0引言

隨著信息技術(shù)對(duì)社會(huì)生產(chǎn)力的不斷推進(jìn)，特別是大數(shù)據(jù)和云計(jì)算技術(shù)的發(fā)展，人類生產(chǎn)的決策越來越依賴于生產(chǎn)目標(biāo)的數(shù)據(jù)，因此，準(zhǔn)確且直觀的數(shù)據(jù)監(jiān)測(cè)技術(shù)具有非常重大的現(xiàn)實(shí)意義。環(huán)境數(shù)據(jù)是一種基于時(shí)間序列的數(shù)據(jù)，它是各環(huán)境要素在一段時(shí)間內(nèi)動(dòng)態(tài)記錄的數(shù)據(jù)集合，隨著時(shí)間的推移，這些數(shù)據(jù)量將變得繁雜[1]。傳統(tǒng)的數(shù)據(jù)監(jiān)測(cè)系統(tǒng)的結(jié)果主要以報(bào)表的形式呈現(xiàn)，這種形式很難為管理員提供直觀的數(shù)據(jù)變化過程，當(dāng)數(shù)據(jù)量非常大時(shí)，無序的報(bào)表會(huì)讓管理員對(duì)生產(chǎn)過程失去控制。

為了能把握生產(chǎn)過程，對(duì)各要素?cái)?shù)據(jù)進(jìn)行直觀清晰的了解，需要選擇一種基于Web、可動(dòng)態(tài)交互的圖表組件來完成對(duì)數(shù)據(jù)監(jiān)測(cè)系統(tǒng)的開發(fā)和應(yīng)用。由于Highcharts組件的兼容性、性能和交互性在同類組件中處于領(lǐng)先地位，因此本文用Highcharts來實(shí)現(xiàn)對(duì)數(shù)據(jù)監(jiān)測(cè)系統(tǒng)數(shù)據(jù)呈現(xiàn)部分的開發(fā)[2]。

1 Highcharts

Highcharts是用JavaScript語言寫的一個(gè)HTML5圖表庫，能很簡(jiǎn)捷地在Web網(wǎng)站或Web應(yīng)用程序添加有互動(dòng)性的圖表，個(gè)人和非商業(yè)用途可以免費(fèi)使用其開放性源碼。Highcharts支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖和綜合圖表[2]。

Highcharts純粹使用Web客戶端腳本語言的特性，使其不僅支持靜態(tài)頁面開發(fā)，也支持ASP、JSP及PHP等動(dòng)態(tài)Web的開發(fā)。Highcharts一開始就遵循HTML5的開發(fā)標(biāo)準(zhǔn)，使其支持IE6以上、Firefox及Chrome等多種瀏覽器，也支持iOS和Android等多平臺(tái)應(yīng)用。服務(wù)器端不需要其他插件或服務(wù)端支持，僅僅引用2個(gè)JavaScript的文件就可以開始相關(guān)開發(fā)。Highcharts的數(shù)據(jù)可以是JavaScript數(shù)組、JSON文件及表格等多種形式，結(jié)合Ajax技術(shù)，可以實(shí)現(xiàn)數(shù)據(jù)圖表的動(dòng)態(tài)更新。

Highcharts圖表顯示由多種要素組成，其中最常用的基本要素有標(biāo)題、坐標(biāo)軸、數(shù)據(jù)列、數(shù)據(jù)提示框及圖例等部分，依據(jù)這些要素會(huì)將散列的數(shù)據(jù)在瀏覽器上以曲線、折線、梯形圖及餅圖等多種樣式動(dòng)態(tài)呈現(xiàn)。

2 Highcharts的應(yīng)用過程

在Web頁面上實(shí)現(xiàn)Highcharts圖表功能，主要需要2步：第一步引入各類Highcharts的JS源碼文件，其中最基礎(chǔ)的文件是“highcharts.js”文件；第二步對(duì)Highcharts圖表各個(gè)要素的值的初始化。

2.1 JS源碼引入

Highcharts的JS源碼文件是整個(gè)應(yīng)用的基礎(chǔ)，在HTML頁面可以本地或在線方式引入，以下分別是本地和在線方式引用highcharts.js文件：

2.2要素初始化

①在HTML頁面的body部分為創(chuàng)建一個(gè)定義顯示圖表大小的容器div，如下：

<？php while （$row = mysql_fetch_array（$result）） {//PHP里用SQL引擎

$data[] = $row[value]； } ？>//獲得數(shù)據(jù)生成字符串

var chart = new Highcharts.Chart（{

series： [{ data： [<？php echo join（$data， ，） ？>]--，//將所有字符串輸出到數(shù)據(jù)列中

3.2從外部文件的讀取

外部數(shù)據(jù)（如CSV、HTML表格及Google在線表）是可以用Highcharts的內(nèi)置數(shù)據(jù)處理模塊直接處理，該模塊會(huì)對(duì)以上3種格式解析生成虛擬的表格，并且默認(rèn)將該表第一行的數(shù)據(jù)解析成圖例，列數(shù)據(jù)解析成軸的值和數(shù)據(jù)列的值，開發(fā)者也可根據(jù)行和列進(jìn)行自行編程并輸出到圖表上[4]。

4 Highcharts在溫濕度監(jiān)測(cè)的動(dòng)態(tài)數(shù)據(jù)刷新

溫濕度數(shù)據(jù)的監(jiān)測(cè)是環(huán)境監(jiān)測(cè)系統(tǒng)的重要組成部分，本文用Highcharts的內(nèi)置數(shù)據(jù)處理模塊實(shí)現(xiàn)原監(jiān)測(cè)系統(tǒng)中溫濕度數(shù)據(jù)的圖表展示。在原監(jiān)測(cè)系統(tǒng)中[5]，上位機(jī)程序?qū)ο挛粰C(jī)中變化的溫濕度數(shù)據(jù)已經(jīng)寫入到數(shù)據(jù)庫中，首先實(shí)現(xiàn)Web服務(wù)器端用ASP語言連接ACCESS數(shù)據(jù)庫[6]，其次生成查詢后的HTML表格，最后使用數(shù)據(jù)模塊轉(zhuǎn)換成為曲線圖表展示，具體步驟如下：

（1）先用ASP語言實(shí)現(xiàn)數(shù)據(jù)庫的連接與查詢

<%Setconn=Server.CreateObject（"ADODB. Connection"）

conn.Open "* ＼1.mdb"

sql = "select * from com order by id ASC" ---%>

（2）引入Highcharts各個(gè)組件

//基礎(chǔ)組件

//數(shù)據(jù)處理模塊

（3）在HTML頁面先指定Highcharts圖表容器container

（4）HTML頁面生成查詢所得表格

（5）指定Highcharts數(shù)據(jù)模塊中的數(shù)據(jù)來源位datatable，并對(duì)表數(shù)據(jù)其他項(xiàng)進(jìn)行配置：

$（function （） {

$（#container）.highcharts（{

data： { table： datatable }，---

對(duì)數(shù)據(jù)庫進(jìn)行連接后以圖表頁面顯示，如圖1所示，不僅顯示了某個(gè)時(shí)刻的溫濕度具體數(shù)值，也體現(xiàn)了整體數(shù)據(jù)的變動(dòng)趨勢(shì)。

5結(jié)束語

研究并總結(jié)軟件生命周期中影響軟件可靠性的因素，即軟件開發(fā)過程中軟件產(chǎn)品度量和軟件開發(fā)過程度量的度量指標(biāo)，可靠性度量參數(shù)均從不同角度進(jìn)行軟件可靠性度量，參數(shù)之間并不是孤立的，且參數(shù)之間彼此都有一定的關(guān)系，有很多參數(shù)是進(jìn)行軟件可靠性評(píng)估或建立軟件可靠性模型的必要參數(shù)，研究和收集可靠性度量參數(shù)對(duì)于提高軟件質(zhì)量和軟件可靠性有重要意義。

參考文獻(xiàn)

[1]曾宇，宋永端，王弼堃.基于Proteus和Keil軟件的溫室環(huán)境監(jiān)測(cè)系統(tǒng)開發(fā)[J].農(nóng)業(yè)工程學(xué)報(bào)，2012，28（14）：177-183.

[2] HighCharts.[EB/OL].（2017-10-8）.https：//www.highcharts.com.

[3]吳孟春，丁嵐.HighCharts組件在氣象業(yè)務(wù)中的開發(fā)和應(yīng)用[J].計(jì)算機(jī)與網(wǎng)絡(luò)，2014，40（12）：65-68.

[4] Highcharts.[EB/OL].（2017-10-7）.https：//www.hcharts. cn/demo/highcharts.

[5]趙建勛.Proteus下SHT11數(shù)據(jù)監(jiān)測(cè)系統(tǒng)的研究與設(shè)計(jì)[J].電子設(shè)計(jì)工程，2016，24（7）：58-62.

[6]李峻屹.ASP與ASP.NET技術(shù)的比對(duì)測(cè)試與分析[J].寶雞文理學(xué)院學(xué)報(bào)（自然科學(xué)版），2013，33（1）：39-42.