基于Extjs與Highcharts的Web監(jiān)測(cè)數(shù)據(jù)播放器設(shè)計(jì)與實(shí)現(xiàn)

李澤良

【摘 要】為了實(shí)現(xiàn)Web頁(yè)面的快速開(kāi)發(fā)，提升開(kāi)發(fā)人員的工作效率。通過(guò)了解前臺(tái)頁(yè)面開(kāi)發(fā)人員使用的編程語(yǔ)言，分析當(dāng)前網(wǎng)絡(luò)應(yīng)用程序的開(kāi)發(fā)現(xiàn)狀，研究了Extjs框架和Highcharts圖表庫(kù)結(jié)合使用的方法，設(shè)計(jì)并實(shí)現(xiàn)了一種基于Web的監(jiān)測(cè)數(shù)據(jù)播放器。實(shí)驗(yàn)證實(shí)了使用JavaScript框架與圖表庫(kù)能幫助開(kāi)發(fā)人員快速創(chuàng)建Web圖表頁(yè)面，極大地減少了開(kāi)發(fā)工作量。

【關(guān)鍵詞】Highcharts Extjs 播放器

1 引言

隨著網(wǎng)絡(luò)技術(shù)的普及，桌面應(yīng)用程序正逐步向網(wǎng)絡(luò)應(yīng)用程序轉(zhuǎn)變，很多編寫(xiě)桌面應(yīng)用程序的開(kāi)發(fā)人員受之影響，也逐步向開(kāi)發(fā)B/S架構(gòu)的網(wǎng)絡(luò)應(yīng)用程序的方向發(fā)展。因?yàn)榇蟛糠珠_(kāi)發(fā)人員沒(méi)有美工基礎(chǔ)，對(duì)Html語(yǔ)言也不太熟悉，需要編寫(xiě)大量的代碼才能實(shí)現(xiàn)Web程序的頁(yè)面與各種圖表，而且頁(yè)面也不太美觀。但借助現(xiàn)有的JavaScript框架（如Extjs、EasyUI、Bootstrap等），開(kāi)發(fā)人員只需要編寫(xiě)少量代碼，就可以繪制出美觀且風(fēng)格統(tǒng)一的Web頁(yè)面。本文提出了一種利用Highcharts圖表庫(kù)實(shí)現(xiàn)Web監(jiān)測(cè)數(shù)據(jù)顯示的方法，該方法可快速實(shí)現(xiàn)Web圖表頁(yè)面，大大提高了開(kāi)發(fā)效率。

2 Extjs簡(jiǎn)介

Extjs可以用來(lái)開(kāi)發(fā)RIA，即富客戶端的AJAX應(yīng)用，它是用JavaScript編寫(xiě)的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端AJAX框架。因此，可以把Extjs用在.Net、Java、Php等各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中。Extjs最開(kāi)始基于YUI技術(shù)，由開(kāi)發(fā)人員JackSlocum開(kāi)發(fā)，通過(guò)參考JavaSwing等機(jī)制來(lái)組織可視化組件，無(wú)論從UI界面上CSS樣式的應(yīng)用，還是到數(shù)據(jù)解析上的異常處理，都可以算是一款不可多得的JavaScript客戶端技術(shù)精品。

3 Highcharts介紹

Highcharts是一個(gè)用純JavaScript編寫(xiě)的圖表庫(kù)，它能夠很簡(jiǎn)單便捷地在Web網(wǎng)站或是Web應(yīng)用程序添加有交互性的圖表，并且可以免費(fèi)供個(gè)人和非商業(yè)用途使用。Highcharts支持的圖表類型有直線圖、曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、儀表圖、氣泡圖、瀑布流圖等20種，其中很多圖表可以集成在同一個(gè)圖形中形成混合圖。

3.1 圖表主要組成

一般情況下，Highcharts包含標(biāo)題（Title）、坐標(biāo)軸（Axis）、數(shù)據(jù)列（Series）、數(shù)據(jù)提示框（Tooltip）、圖例（Legend）、版權(quán)標(biāo)簽（Credits）等，另外還可以包括導(dǎo)出功能按鈕（Exporting）、標(biāo)示線（PlotLines）、標(biāo)示區(qū)域（PlotBands）、數(shù)據(jù)標(biāo)簽（DataLabels）等，具體如圖1所示。

3.2 準(zhǔn)備工作

Highcharts需要下載相應(yīng)的插件，可以從Highcharts官網(wǎng)上下載，具體地址如下：http：//www.highcharts.com/download。

3.3 Highcharts配置

4 監(jiān)測(cè)數(shù)據(jù)播放器的設(shè)計(jì)實(shí)現(xiàn)

4.1 播放器主要功能

監(jiān)測(cè)數(shù)據(jù)播放器的主要功能包括：

（1）查詢：可查詢指定時(shí)間范圍內(nèi)的監(jiān)測(cè)數(shù)據(jù)；

（2）播放：按照時(shí)間順序，在播放器中連續(xù)顯示監(jiān)測(cè)數(shù)據(jù)；

（3）暫停：暫停播放；

（4）停止：停止播放監(jiān)測(cè)數(shù)據(jù)；

（5）快進(jìn)：加快監(jiān)測(cè)數(shù)據(jù)的顯示速度。

4.2 播放器主頁(yè)面

使用Extjs的MVC模式，MVC（Model-View-Controller）即軟件項(xiàng)目設(shè)計(jì)模式，M指的是模型（Model），V指的是視圖（View），C指的是控制器（Controller），在View中創(chuàng)建播放器的主頁(yè)面，代碼如下：

4.3 監(jiān)測(cè)數(shù)據(jù)的播放

監(jiān)測(cè)數(shù)據(jù)的播放是通過(guò)定時(shí)刷新Highcharts圖表實(shí)現(xiàn)的。啟動(dòng)播放時(shí)，設(shè)置一個(gè)定時(shí)器，每秒向后臺(tái)請(qǐng)求監(jiān)測(cè)數(shù)據(jù)，并刷新圖表，以達(dá)到連續(xù)播放的效果，最終效果圖如圖2所示。通過(guò)停止定時(shí)器和修改定時(shí)器間隔實(shí)現(xiàn)停止及快進(jìn)功能。

5 結(jié)束語(yǔ)

本文主要對(duì)Highcharts圖表庫(kù)進(jìn)行基本介紹，并使用Extjs框架與Highcharts搭建播放器的Web頁(yè)面，對(duì)于不是美工出身的JavaScript程序員，通過(guò)使用JavaScript框架與圖表庫(kù)能快速創(chuàng)建各種Web頁(yè)面，既可以減輕工作量，又可以設(shè)計(jì)出非常美觀的Web頁(yè)面。

參考文獻(xiàn)：

[1] 徐會(huì)生，何啟偉，康愛(ài)媛. 深入淺出Ext JS[M]. 北京： 人民郵電出版社， 2009.

[2] 趙俊昌，祝紅濤，吳越人. 精通JS腳本之ExtJS框架[M]. 北京： 化學(xué)工業(yè)出版社， 2011.

[3] 衛(wèi)軍，夏慧軍，孟臘春. ExtJS Web應(yīng)用程序開(kāi)發(fā)指南[M]. 北京： 機(jī)械工業(yè)出版社， 2009.

[4] 頊宇峰. Highcharts網(wǎng)頁(yè)圖表制作實(shí)例詳解[M]. 北京： 清華大學(xué)出版社， 2016.

[5] 比伯奧特，卡茨. jQuery實(shí)戰(zhàn)[M]. 2版. 北京： 人民郵電出版社， 2012.

[6] 李剛. 瘋狂Ajax講義[M]. 北京： 電子工業(yè)出版社， 2013.

[7] 常倬林. Java Web從入門(mén)到精通[M]. 北京： 機(jī)械工業(yè)出版社， 2011.

[8] 弗蘭納根. JavaScript權(quán)威指南[M]. 北京： 機(jī)械工業(yè)出版社， 2012.

[9] Nicholas C Zakas. JavaScript高級(jí)程序設(shè)計(jì)[M]. 3版. 北京： 人民郵電出版社， 2012.

[10] 卡斯特羅，希斯洛普. HTML5與CSS3基礎(chǔ)教程[M]. 北京： 人民郵電出版社， 2014.

[11] 邢太北，許瑞建. CSS+DIV網(wǎng)頁(yè)布局技術(shù)詳解[M]. 北京： 清華大學(xué)出版社， 2014.