基于Extjs與Highcharts的Web監測數據播放器設計與實現

李澤良

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

【關鍵詞】Highcharts Extjs 播放器

1 引言

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

2 Extjs簡介

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

3 Highcharts介紹

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

3.1 圖表主要組成

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

3.2 準備工作

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

3.3 Highcharts配置

4 監測數據播放器的設計實現

4.1 播放器主要功能

監測數據播放器的主要功能包括：

（1）查詢：可查詢指定時間范圍內的監測數據；

（2）播放：按照時間順序，在播放器中連續顯示監測數據；

（3）暫停：暫停播放；

（4）停止：停止播放監測數據；

（5）快進：加快監測數據的顯示速度。

4.2 播放器主頁面

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

4.3 監測數據的播放

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

5 結束語

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

參考文獻：

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

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

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

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

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

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

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

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

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

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

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