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

李澤良

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

【關鍵詞】Highcharts Extjs 播放器

1 引言

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

2 Extjs簡介

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

3 Highcharts介紹

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

3.1 圖表主要組成

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

3.2 準備工作

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

3.3 Highcharts配置

4 監(jiān)測數(shù)據(jù)播放器的設計實現(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）快進：加快監(jiān)測數(shù)據(jù)的顯示速度。

4.2 播放器主頁面

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

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

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

5 結束語

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

參考文獻：

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

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

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

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

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

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

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

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

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

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

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