李澤良

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

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

1 引言

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

2 Extjs簡介

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

3 Highcharts介紹

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

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)測數(shù)據(jù)播放器的設(shè)計(jì)實(shí)現(xiàn)

4.1 播放器主要功能

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

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

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

（3）暫停：暫停播放；

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

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

4.2 播放器主頁面

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

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

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

5 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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

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

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