基于B/S模式的動態數據3D實時展示系統

郭　惠

(山西旅游職業學院 計算機科學系，山西 太原　030031)

基于B/S模式的動態數據3D實時展示系統

郭惠

(山西旅游職業學院 計算機科學系，山西 太原030031)

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

計算機軟件；3D圖表；B/S；動態數據；HTML5；AJAX技術；Highcharts圖表庫

本文著錄格式：郭惠. 基于B/S模式的動態數據3D實時展示系統[J]. 軟件，2016，37（9）：81-84

0　引言

HTML5標準規范為桌面和移動平臺帶來無縫銜接的豐富內容，比如對網頁3D功能的支持，可以在瀏覽器中呈現絢麗的3D[1]視覺效果。而圖表是展示數據的有效方式，可以直觀地反映數據的變化。因此，本文利用HTML5技術，設計了基于B/S模式[2-4]的動態數據3D實時展示系統，該系統每隔2秒獲取當前股價的實時信息并更新圖表，從而可以立體生動直觀地體現股價信息的動態變化。

1　系統概述

1.1系統功能描述

系統包括前臺和后臺兩部分。前臺的功能包括：各種3D圖表繪制、3D圖表控件位置的拖動、3D圖表控件大小的縮放、各種3D圖表實時更新。后臺負責股票數據的實時更新。系統總體層次方框圖如圖1所示：

1.2系統運行環境

系統硬件設備要求：客戶端計算機硬件要求：1 GHz32位或2 GHz64位處理器、1 GB內存（基于32位）或2 GB內存（基于64位）、16 GB可用硬盤空間（基于32位）或20 GB可用硬盤空間（基于64位）、鼠標、鍵盤、10/100 Mb/s網卡。服務器硬件需求：具有PentiumIII處理器且滿足以下要求的計算機：128 M內存、4 GB硬盤、鼠標、鍵盤、10/100 Mb/s網卡。

支持程序：瀏覽器客戶端：操作系統為Windows7、Windows Vista或更高版本；瀏覽器為IE9.0及以上，Google Chrome 1.0及以上，Mozilla Firefox 4及以上，Safari 4.0及以上。WEB服務器軟件：操作系統為CentOS；WEB應用服務器為Apache網頁服務器；腳本為PHP；相關類庫為jQuery、jQuery UI、Highcharts。

圖1　系統總體層次方框圖Fig.1　Block diagram of the overall system

1.3系統架構

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

圖2　系統架構圖Fig.2　System architecture diagram

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

2　系統具體設計

2.1網頁界面設計

網頁界面采用Div+CSS網頁布局技術設計，整體感覺簡潔明快，重點突出。部分代碼如下：

2.2圖表繪制及實時更新的實現

2.2.1圖表繪制及實時更新實現的時序圖

圖表繪制及實時更新實現的時序圖描述如圖3所示。

2.2.2系統內部調用流程圖

系統內部調用方面，首先用戶在拖動左邊的圖標至繪圖區時，系統會創建新的Highcharts.chart對象，該對象調用XMLHttpRequest對象的send()方法，通過后臺的PHP程序調用新浪股票數據接口獲得當前股價，從而實現對新創建的Highcharts.chart對象的數據初始化。以后每隔2秒，都會調用XMLH-ttpRequest對象的send()方法，獲取實時股價，對當前Highcharts.chart對象的數據進行更新，并刷新圖表。具體流程圖如圖4所示。

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

2.2.3股票數據的實時獲得

（1）后臺獲取股票實時數據，并處理數據生成JSON格式數據的PHP代碼如下：

圖4　系統內部調用流程圖Fig.4　System internal call flow chart

2.2.4具體圖表的繪制

具體圖表的繪制調用了Highcharts圖表庫, 是目前使用比較廣泛的圖表控件。截取部分關鍵代碼如下：

（2）瀏覽器端對JSON數據處理的JS代碼截取如下：

2.3.3D圖表控件位置拖動和大小縮放的實現

3D圖表控件位置拖動和大小縮放通過繪圖Div層的位置移動和大小縮放來實現。具體實現調用了jQuery UI API。其流程圖如圖5所示。截取部分關鍵代碼如下：

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

3　系統效果展示

3.1系統繪圖界面

系統繪圖界面如圖6所示。

圖6　系統繪圖界面Fig.6　System drawing interface

3.2動態圖表截圖

動態圖表截圖如圖7和圖8所示。

圖7　3D實時柱形圖Fig.7　3D real-time column chart

圖8　3D實時餅圖Fig.8　3D real-time pie chart

4　總結

本系統可以用于企業數據、天氣數據、股票數據等的圖形報表展示，系統長時間運行穩定，可以生動的體現各項數據信息的變化。且該系統具有維護成本低、界面統一友好、不存在移植性等優點，因此，該系統具有廣泛的應用價值。

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

[2] 陸美玲, 于俊樂. 基于B/S模式的學生管理系統的設計[J].軟件, 2013, 34(11): 55-56.

[3] 曹瑞明, 劉志華. 基于B/S結構的現代考試系統的設計[J].軟件, 2013, 34(12): 117-118.

[4] 王志勃, 史夢安, 刁志剛. B/S模式下監控系統設計與實現[J]. 軟件, 2014, 35(8): 46-49.

[5] 劉春梅, 孫鵬, 胡琳琳. 基于JavaScript引擎的終端動態數據處理方法[J]. 微計算機應用. 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的鉆井工程參數遠程實時監測系統[J]. 新型工業化, 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-)，女，助理講師，主要研究方向：計算機應用技術、計算機軟件。