Highcharts在動態數據監測系統中的開發與應用

摘要：為解決傳統數據監測系統中數據不直觀的問題，提出將開源的Web圖表組件Highcharts應用到原有的系統中來，快速實現數據以圖表呈現，且有相應的數據交互。分析了Highcharts的基本組成及應用過程，重點研究了其獲取外部動態數據的呈現過程，給出了一個快速開發到原數據監測系統中的方法，并將其應用在一個溫濕度環境監測系統中，實現了用戶不僅很直觀地看出數據的變化，也可以動態地查看每個時間節點溫濕度的數據值。結果表明，用戶對監控的感知體驗較好，可提高生產的水平和效率。

關鍵詞：環境監測；圖表；Highcharts；數據交互

中圖分類號：TP311文獻標志碼：A文章編號：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引言

隨著信息技術對社會生產力的不斷推進，特別是大數據和云計算技術的發展，人類生產的決策越來越依賴于生產目標的數據，因此，準確且直觀的數據監測技術具有非常重大的現實意義。環境數據是一種基于時間序列的數據，它是各環境要素在一段時間內動態記錄的數據集合，隨著時間的推移，這些數據量將變得繁雜[1]。傳統的數據監測系統的結果主要以報表的形式呈現，這種形式很難為管理員提供直觀的數據變化過程，當數據量非常大時，無序的報表會讓管理員對生產過程失去控制。

為了能把握生產過程，對各要素數據進行直觀清晰的了解，需要選擇一種基于Web、可動態交互的圖表組件來完成對數據監測系統的開發和應用。由于Highcharts組件的兼容性、性能和交互性在同類組件中處于領先地位，因此本文用Highcharts來實現對數據監測系統數據呈現部分的開發[2]。

1 Highcharts

Highcharts是用JavaScript語言寫的一個HTML5圖表庫，能很簡捷地在Web網站或Web應用程序添加有互動性的圖表，個人和非商業用途可以免費使用其開放性源碼。Highcharts支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表[2]。

Highcharts純粹使用Web客戶端腳本語言的特性，使其不僅支持靜態頁面開發，也支持ASP、JSP及PHP等動態Web的開發。Highcharts一開始就遵循HTML5的開發標準，使其支持IE6以上、Firefox及Chrome等多種瀏覽器，也支持iOS和Android等多平臺應用。服務器端不需要其他插件或服務端支持，僅僅引用2個JavaScript的文件就可以開始相關開發。Highcharts的數據可以是JavaScript數組、JSON文件及表格等多種形式，結合Ajax技術，可以實現數據圖表的動態更新。

Highcharts圖表顯示由多種要素組成，其中最常用的基本要素有標題、坐標軸、數據列、數據提示框及圖例等部分，依據這些要素會將散列的數據在瀏覽器上以曲線、折線、梯形圖及餅圖等多種樣式動態呈現。

2 Highcharts的應用過程

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

2.1 JS源碼引入

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

2.2要素初始化

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

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

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

var chart = new Highcharts.Chart（{

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

3.2從外部文件的讀取

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

4 Highcharts在溫濕度監測的動態數據刷新

溫濕度數據的監測是環境監測系統的重要組成部分，本文用Highcharts的內置數據處理模塊實現原監測系統中溫濕度數據的圖表展示。在原監測系統中[5]，上位機程序對下位機中變化的溫濕度數據已經寫入到數據庫中，首先實現Web服務器端用ASP語言連接ACCESS數據庫[6]，其次生成查詢后的HTML表格，最后使用數據模塊轉換成為曲線圖表展示，具體步驟如下：

（1）先用ASP語言實現數據庫的連接與查詢

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

conn.Open "* ＼1.mdb"

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

（2）引入Highcharts各個組件

//基礎組件

//數據處理模塊

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

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

（5）指定Highcharts數據模塊中的數據來源位datatable，并對表數據其他項進行配置：

$（function （） {

$（#container）.highcharts（{

data： { table： datatable }，---

對數據庫進行連接后以圖表頁面顯示，如圖1所示，不僅顯示了某個時刻的溫濕度具體數值，也體現了整體數據的變動趨勢。

5結束語

研究并總結軟件生命周期中影響軟件可靠性的因素，即軟件開發過程中軟件產品度量和軟件開發過程度量的度量指標，可靠性度量參數均從不同角度進行軟件可靠性度量，參數之間并不是孤立的，且參數之間彼此都有一定的關系，有很多參數是進行軟件可靠性評估或建立軟件可靠性模型的必要參數，研究和收集可靠性度量參數對于提高軟件質量和軟件可靠性有重要意義。

參考文獻

[1]曾宇，宋永端，王弼堃.基于Proteus和Keil軟件的溫室環境監測系統開發[J].農業工程學報，2012，28（14）：177-183.

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

[3]吳孟春，丁嵐.HighCharts組件在氣象業務中的開發和應用[J].計算機與網絡，2014，40（12）：65-68.

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

[5]趙建勛.Proteus下SHT11數據監測系統的研究與設計[J].電子設計工程，2016，24（7）：58-62.

[6]李峻屹.ASP與ASP.NET技術的比對測試與分析[J].寶雞文理學院學報（自然科學版），2013，33（1）：39-42.