郭　惠

(山西旅游職業(yè)學(xué)院 計(jì)算機(jī)科學(xué)系，山西 太原　030031)

基于B/S模式的動(dòng)態(tài)數(shù)據(jù)3D實(shí)時(shí)展示系統(tǒng)

郭惠

(山西旅游職業(yè)學(xué)院 計(jì)算機(jī)科學(xué)系，山西 太原030031)

隨著HTML5規(guī)范的發(fā)布，在瀏覽器端繪制3D實(shí)時(shí)圖表，立體直觀(guān)地反映數(shù)據(jù)的動(dòng)態(tài)變化已成為可能。本文利用HTML5技術(shù)，設(shè)計(jì)了基于B/S模式的動(dòng)態(tài)數(shù)據(jù)3D實(shí)時(shí)展示系統(tǒng)。該系統(tǒng)采用了B/S架構(gòu)，使用HTML5、JavaScript和AJAX等技術(shù)，引用了jQuery和jQuery UI代碼庫(kù)及Highcharts圖表庫(kù)。系統(tǒng)以股價(jià)為數(shù)據(jù)源，展示了股價(jià)的3D實(shí)時(shí)動(dòng)態(tài)圖表，包括3D柱狀圖、3D餅圖、3D面積圖等，并且相應(yīng)控件可以隨意拖動(dòng)和縮放。該系統(tǒng)支持IE9、Safari、Chrome、Firefox等主流瀏覽器。

計(jì)算機(jī)軟件；3D圖表；B/S；動(dòng)態(tài)數(shù)據(jù)；HTML5；AJAX技術(shù)；Highcharts圖表庫(kù)

本文著錄格式：郭惠. 基于B/S模式的動(dòng)態(tài)數(shù)據(jù)3D實(shí)時(shí)展示系統(tǒng)[J]. 軟件，2016，37（9）：81-84

0　引言

HTML5標(biāo)準(zhǔn)規(guī)范為桌面和移動(dòng)平臺(tái)帶來(lái)無(wú)縫銜接的豐富內(nèi)容，比如對(duì)網(wǎng)頁(yè)3D功能的支持，可以在瀏覽器中呈現(xiàn)絢麗的3D[1]視覺(jué)效果。而圖表是展示數(shù)據(jù)的有效方式，可以直觀(guān)地反映數(shù)據(jù)的變化。因此，本文利用HTML5技術(shù)，設(shè)計(jì)了基于B/S模式[2-4]的動(dòng)態(tài)數(shù)據(jù)3D實(shí)時(shí)展示系統(tǒng)，該系統(tǒng)每隔2秒獲取當(dāng)前股價(jià)的實(shí)時(shí)信息并更新圖表，從而可以立體生動(dòng)直觀(guān)地體現(xiàn)股價(jià)信息的動(dòng)態(tài)變化。

1　系統(tǒng)概述

1.1系統(tǒng)功能描述

系統(tǒng)包括前臺(tái)和后臺(tái)兩部分。前臺(tái)的功能包括：各種3D圖表繪制、3D圖表控件位置的拖動(dòng)、3D圖表控件大小的縮放、各種3D圖表實(shí)時(shí)更新。后臺(tái)負(fù)責(zé)股票數(shù)據(jù)的實(shí)時(shí)更新。系統(tǒng)總體層次方框圖如圖1所示：

1.2系統(tǒng)運(yùn)行環(huán)境

系統(tǒng)硬件設(shè)備要求：客戶(hù)端計(jì)算機(jī)硬件要求：1 GHz32位或2 GHz64位處理器、1 GB內(nèi)存（基于32位）或2 GB內(nèi)存（基于64位）、16 GB可用硬盤(pán)空間（基于32位）或20 GB可用硬盤(pán)空間（基于64位）、鼠標(biāo)、鍵盤(pán)、10/100 Mb/s網(wǎng)卡。服務(wù)器硬件需求：具有PentiumIII處理器且滿(mǎn)足以下要求的計(jì)算機(jī)：128 M內(nèi)存、4 GB硬盤(pán)、鼠標(biāo)、鍵盤(pán)、10/100 Mb/s網(wǎng)卡。

支持程序：瀏覽器客戶(hù)端：操作系統(tǒng)為Windows7、Windows Vista或更高版本；瀏覽器為IE9.0及以上，Google Chrome 1.0及以上，Mozilla Firefox 4及以上，Safari 4.0及以上。WEB服務(wù)器軟件：操作系統(tǒng)為CentOS；WEB應(yīng)用服務(wù)器為Apache網(wǎng)頁(yè)服務(wù)器；腳本為PHP；相關(guān)類(lèi)庫(kù)為jQuery、jQuery UI、Highcharts。

圖1　系統(tǒng)總體層次方框圖Fig.1　Block diagram of the overall system

1.3系統(tǒng)架構(gòu)

本系統(tǒng)基于B/S模式，采用HTML5+JS[5]，同時(shí)使用了jQuery和jQuery UI代碼庫(kù)。3D圖表的繪制調(diào)用了Highcharts圖表庫(kù)。與后臺(tái)服務(wù)器的數(shù)據(jù)交換使用了AJAX技術(shù)[6]，得到了JSON格式的股票數(shù)據(jù)。當(dāng)前股價(jià)的獲得調(diào)用了新浪股票接口。系統(tǒng)采用用戶(hù)界面層、Web服務(wù)器層、數(shù)據(jù)訪(fǎng)問(wèn)層、數(shù)據(jù)層的多層架構(gòu)[7]。系統(tǒng)架構(gòu)圖如圖2所示。其中，用戶(hù)界面層是系統(tǒng)的用戶(hù)接口，即人機(jī)交互界面，用于系統(tǒng)動(dòng)態(tài)圖表實(shí)時(shí)顯示效果的體現(xiàn)；Web服務(wù)器層包括兩個(gè)功能：首先負(fù)責(zé)接收用戶(hù)的服務(wù)申請(qǐng)，調(diào)用數(shù)據(jù)訪(fǎng)問(wèn)層的相應(yīng)接口，另一方面，負(fù)責(zé)接收數(shù)據(jù)訪(fǎng)問(wèn)層返回的結(jié)果，同時(shí)在瀏覽器端顯示；數(shù)據(jù)訪(fǎng)問(wèn)層主要負(fù)責(zé)業(yè)務(wù)邏輯的完成，進(jìn)行數(shù)據(jù)層的信息交互；數(shù)據(jù)層主要是新浪數(shù)據(jù)訪(fǎng)問(wèn)平臺(tái)，可以方便迅速地實(shí)時(shí)獲取當(dāng)前的股價(jià)信息。

圖2　系統(tǒng)架構(gòu)圖Fig.2　System architecture diagram

Highcharts是一個(gè)用純JavaScript編寫(xiě)的HTML5圖表庫(kù)，能夠很簡(jiǎn)單便捷的在Web網(wǎng)站或是Web應(yīng)用程序添加有交互性的圖表，全部源碼開(kāi)放。Highcharts支持的圖表類(lèi)型有直線(xiàn)圖、曲線(xiàn)圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、儀表圖、氣泡圖、瀑布流圖等多達(dá)20種圖表，其中很多圖表可以集成在同一個(gè)圖形中形成混合圖。同時(shí)Highcharts支持IE6+、iPhone/iPad、Android等目前市面上所有主流的瀏覽器，又前瞻性的支持手機(jī)瀏覽器，且成熟穩(wěn)定、速度快，因此本系統(tǒng)選用了Highcharts API作為圖表繪制的接口。

2　系統(tǒng)具體設(shè)計(jì)

2.1網(wǎng)頁(yè)界面設(shè)計(jì)

網(wǎng)頁(yè)界面采用Div+CSS網(wǎng)頁(yè)布局技術(shù)設(shè)計(jì)，整體感覺(jué)簡(jiǎn)潔明快，重點(diǎn)突出。部分代碼如下：

2.2圖表繪制及實(shí)時(shí)更新的實(shí)現(xiàn)

2.2.1圖表繪制及實(shí)時(shí)更新實(shí)現(xiàn)的時(shí)序圖

圖表繪制及實(shí)時(shí)更新實(shí)現(xiàn)的時(shí)序圖描述如圖3所示。

2.2.2系統(tǒng)內(nèi)部調(diào)用流程圖

系統(tǒng)內(nèi)部調(diào)用方面，首先用戶(hù)在拖動(dòng)左邊的圖標(biāo)至繪圖區(qū)時(shí)，系統(tǒng)會(huì)創(chuàng)建新的Highcharts.chart對(duì)象，該對(duì)象調(diào)用XMLHttpRequest對(duì)象的send()方法，通過(guò)后臺(tái)的PHP程序調(diào)用新浪股票數(shù)據(jù)接口獲得當(dāng)前股價(jià)，從而實(shí)現(xiàn)對(duì)新創(chuàng)建的Highcharts.chart對(duì)象的數(shù)據(jù)初始化。以后每隔2秒，都會(huì)調(diào)用XMLH-ttpRequest對(duì)象的send()方法，獲取實(shí)時(shí)股價(jià)，對(duì)當(dāng)前Highcharts.chart對(duì)象的數(shù)據(jù)進(jìn)行更新，并刷新圖表。具體流程圖如圖4所示。

圖3　圖表繪制及實(shí)時(shí)更新時(shí)序圖Fig.3　Sequence diagram of chart drawing and real-time update

2.2.3股票數(shù)據(jù)的實(shí)時(shí)獲得

（1）后臺(tái)獲取股票實(shí)時(shí)數(shù)據(jù)，并處理數(shù)據(jù)生成JSON格式數(shù)據(jù)的PHP代碼如下：

圖4　系統(tǒng)內(nèi)部調(diào)用流程圖Fig.4　System internal call flow chart

2.2.4具體圖表的繪制

具體圖表的繪制調(diào)用了Highcharts圖表庫(kù), 是目前使用比較廣泛的圖表控件。截取部分關(guān)鍵代碼如下：

（2）瀏覽器端對(duì)JSON數(shù)據(jù)處理的JS代碼截取如下：

2.3.3D圖表控件位置拖動(dòng)和大小縮放的實(shí)現(xiàn)

3D圖表控件位置拖動(dòng)和大小縮放通過(guò)繪圖Div層的位置移動(dòng)和大小縮放來(lái)實(shí)現(xiàn)。具體實(shí)現(xiàn)調(diào)用了jQuery UI API。其流程圖如圖5所示。截取部分關(guān)鍵代碼如下：

圖5　3D圖表拖動(dòng)和縮放流程圖Fig.5　Flow chart of 3D chart drag and zoom

3　系統(tǒng)效果展示

3.1系統(tǒng)繪圖界面

系統(tǒng)繪圖界面如圖6所示。

圖6　系統(tǒng)繪圖界面Fig.6　System drawing interface

3.2動(dòng)態(tài)圖表截圖

動(dòng)態(tài)圖表截圖如圖7和圖8所示。

圖7　3D實(shí)時(shí)柱形圖Fig.7　3D real-time column chart

圖8　3D實(shí)時(shí)餅圖Fig.8　3D real-time pie chart

4　總結(jié)

本系統(tǒng)可以用于企業(yè)數(shù)據(jù)、天氣數(shù)據(jù)、股票數(shù)據(jù)等的圖形報(bào)表展示，系統(tǒng)長(zhǎng)時(shí)間運(yùn)行穩(wěn)定，可以生動(dòng)的體現(xiàn)各項(xiàng)數(shù)據(jù)信息的變化。且該系統(tǒng)具有維護(hù)成本低、界面統(tǒng)一友好、不存在移植性等優(yōu)點(diǎn)，因此，該系統(tǒng)具有廣泛的應(yīng)用價(jià)值。

[1] M/Bochicchio, ALongo, LVaira. Extending Web applications with 3D features. IEEE International Symposium on Web Systems Evolution(WSE), 2011: 93-96.

[2] 陸美玲, 于俊樂(lè). 基于B/S模式的學(xué)生管理系統(tǒng)的設(shè)計(jì)[J].軟件, 2013, 34(11): 55-56.

[3] 曹瑞明, 劉志華. 基于B/S結(jié)構(gòu)的現(xiàn)代考試系統(tǒng)的設(shè)計(jì)[J].軟件, 2013, 34(12): 117-118.

[4] 王志勃, 史夢(mèng)安, 刁志剛. B/S模式下監(jiān)控系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件, 2014, 35(8): 46-49.

[5] 劉春梅, 孫鵬, 胡琳琳. 基于JavaScript引擎的終端動(dòng)態(tài)數(shù)據(jù)處理方法[J]. 微計(jì)算機(jī)應(yīng)用. 2010(04): 27-32.

[6] Iulian ILIE NEMEDI. Developing a Web Server Platform with SAPI support for AJAX RPC using JSON. Informatica Econnomica Journal, 2007, 4(44): 45-49.

[7] 王要偉, 閻春平. 基于Internet的鉆井工程參數(shù)遠(yuǎn)程實(shí)時(shí)監(jiān)測(cè)系統(tǒng)[J]. 新型工業(yè)化, 2013, 3(8): 41-49.

3D Real-time Display System of Dynamic Data Based on B/S Mode

GUO Hui
(Shanxi Vocational College of Tourism, Taiyuan 030031, China)

With the release of the HTML5 specification, the 3D real-time chart can be drawn on the browser side, which can reflect the dynamic change of the data. Based on HTML5 technology, this paper designs a dynamic data 3D real-time display system based on B/S mode. The system uses the B/S architecture, HTML5, JavaScript, AJAX technology, and the jQuery, jQuery UI, Highcharts code library. With share prices as the data source, the system shows 3D real-time dynamic chart of the shares, including 3D column diagram, 3D pie diagram, 3D area diagram etc, and the corresponding chart can be freely dragged and zoomed. The system supports IE9, Safari, Chrome, Firefox and other mainstream browsers.

Computer software; 3D chart; B/S; Dynamic data; HTML5; AJAX; Highcharts code library

TP 311

A

10.3969/j.issn.1003-6970.2016.09.019

郭惠(1981-)，女，助理講師，主要研究方向：計(jì)算機(jī)應(yīng)用技術(shù)、計(jì)算機(jī)軟件。