李澤良
【摘 要】為了實現(xiàn)Web頁面的快速開發(fā),提升開發(fā)人員的工作效率。通過了解前臺頁面開發(fā)人員使用的編程語言,分析當(dāng)前網(wǎng)絡(luò)應(yīng)用程序的開發(fā)現(xiàn)狀,研究了Extjs框架和Highcharts圖表庫結(jié)合使用的方法,設(shè)計并實現(xiàn)了一種基于Web的監(jiān)測數(shù)據(jù)播放器。實驗證實了使用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ā)展。因為大部分開發(fā)人員沒有美工基礎(chǔ),對Html語言也不太熟悉,需要編寫大量的代碼才能實現(xiàn)Web程序的頁面與各種圖表,而且頁面也不太美觀。但借助現(xiàn)有的JavaScript框架(如Extjs、EasyUI、Bootstrap等),開發(fā)人員只需要編寫少量代碼,就可以繪制出美觀且風(fēng)格統(tǒng)一的Web頁面。本文提出了一種利用Highcharts圖表庫實現(xiàn)Web監(jiān)測數(shù)據(jù)顯示的方法,該方法可快速實現(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)用程序添加有交互性的圖表,并且可以免費供個人和非商業(yè)用途使用。Highcharts支持的圖表類型有直線圖、曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等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è)計實現(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)即軟件項目設(shè)計模式,M指的是模型(Model),V指的是視圖(View),C指的是控制器(Controller),在View中創(chuàng)建播放器的主頁面,代碼如下:
4.3 監(jiān)測數(shù)據(jù)的播放
監(jiān)測數(shù)據(jù)的播放是通過定時刷新Highcharts圖表實現(xiàn)的。啟動播放時,設(shè)置一個定時器,每秒向后臺請求監(jiān)測數(shù)據(jù),并刷新圖表,以達(dá)到連續(xù)播放的效果,最終效果圖如圖2所示。通過停止定時器和修改定時器間隔實現(xiàn)停止及快進(jìn)功能。
5 結(jié)束語
本文主要對Highcharts圖表庫進(jìn)行基本介紹,并使用Extjs框架與Highcharts搭建播放器的Web頁面,對于不是美工出身的JavaScript程序員,通過使用JavaScript框架與圖表庫能快速創(chuàng)建各種Web頁面,既可以減輕工作量,又可以設(shè)計出非常美觀的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)頁圖表制作實例詳解[M]. 北京: 清華大學(xué)出版社, 2016.
[5] 比伯奧特,卡茨. jQuery實戰(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è)計[M]. 3版. 北京: 人民郵電出版社, 2012.
[10] 卡斯特羅,希斯洛普. HTML5與CSS3基礎(chǔ)教程[M]. 北京: 人民郵電出版社, 2014.
[11] 邢太北,許瑞建. CSS+DIV網(wǎng)頁布局技術(shù)詳解[M]. 北京: 清華大學(xué)出版社, 2014.