基于AJAX異步傳輸技術與Echarts3技術的動態數據繪圖實現

鄭幸源，洪 親,2,3,4，蔡堅勇,2,3,4，陳順凡,2,3,4，柯俊敏

(1.福建師范大學 光電與信息工程學院；2.福建師范大學 醫學光電科學與技術教育部重點實驗室；3.福建師范大學 福建省光子技術重點實驗室；4.福建師范大學 智能光電系統工程研究中心，福建 福州 350007)

基于AJAX異步傳輸技術與Echarts3技術的動態數據繪圖實現

鄭幸源1，洪 親1,2,3,4，蔡堅勇1,2,3,4，陳順凡1,2,3,4，柯俊敏1

(1.福建師范大學 光電與信息工程學院；2.福建師范大學 醫學光電科學與技術教育部重點實驗室；3.福建師范大學 福建省光子技術重點實驗室；4.福建師范大學 智能光電系統工程研究中心，福建 福州 350007)

大數據分析和概率統計為人類提供了各種寶貴信息，而信息可視化又為人們更好地理解信息提供了極大便利。基于AJAX技術和Echarts3制圖技術，通過AJAX傳遞用戶交互需求中所獲取的數據，以EChart3為主體實現一種針對基礎圖表類型的支持數據挖掘和類型轉換交互的數據可視化分析組件，達到清晰和直觀的信息呈現效果，提升任務執行效率。

AJAX；Echarts3；數據動態制圖；數據挖掘

0 引言

信息化時代，大數據以可視化圖表呈現能更直觀、更快速、更精準地反映狀態的變動和數據間暗藏的關聯。結合Ajax和Echart3技術，能夠更好地從數據庫中讀取所需信息，動態地以圖表的形式加以呈現，所表達的信息更形象，脈絡更清晰。對企業、科研等領域的數據分析處理、總結歸納和整合統計都具有較高的實用價值。

1 相關技術

1.1 AJAX

1.1.1 AJAX簡介

AJAX即“Asynchronous JavaScript And XML”，是指一種創建交互式網頁應用的網頁開發技術，其主要特點是可以為Web開發提供異步的交換方式和數據傳輸，實現在不重新加載、不刷新界面的情況下與服務器進行信息連接和交換，可極大地改善用戶的使用感受，尤其是對提高信息傳輸和交換疏導等方面的速度有十分重要的作用[1]。AJAX中的XHTML和CSS具有靈活性、拼裝性和實用性的特點，因而經常被用來構建一個適用化和精準化的標準用戶界面，并為用戶提供相應的用戶系統數據。DOM由于對XHTML、HTML、XML有著結構化的操作方法和強大的操作能力，DOM被AJXA用來實現交互信息和數據的動態顯示。XSTL與XML在數據交互的結構化和共享傳輸方面都有著極大優勢。

1.1.2 AJAX工作原理

AJAX引擎工作原理如圖1所示。它打破了Web的應用局限，實現服務器反應和用戶的異步交互，進而達到更好的用戶體驗效果；同時能夠很大程度地減小服務器的壓力，減少用戶的閑置時間，提升服務效率。AJAX的工作原理是在服務器和用戶端之間增加了一個AJAX引擎的中間層，但不能保證所有用戶請求都能通過服務器在AJAX的中間層進行多用戶請求，更有不得已在服務器端獲取新數據時，使用用戶程序時才利用后臺給服務器發送數據請求，這樣不會打斷用戶的操作過程。

圖1 AJAX引擎工作原理

1.2 Echarts3

ECharts3是百度公司的一個開源數據可視化工具，也是一個純JavaScript語言開發的圖表庫，特別適合于網絡應用。它能提供直觀生動、可交互、可個性化定制的數據可視化圖表，可以流暢地運行在PC和移動設備上，兼容當前絕大部分瀏覽器，是當前各種網絡數據可視化工具中功能最完善、用戶體驗最好的一個。

2 設計與實現

2.1 B/S架構與操作技術選擇

Browser/Server(簡稱B/S)結構即瀏覽器和服務器結構[2]，它是Internet技術興起后的一種網絡結構模式(見圖2)，主要由瀏覽器、服務器、數據庫組成。

本文采用當下流行的PHP語言作為服務器端語言，采用ThinkPHP3.2框架，選擇MYSQL作為數據庫，瀏覽器(客戶端)使用AJAX+Echarts3技術實現前后端數據交互并完成動態制圖[3]。

圖2 B/S架構

2.2 Echarts3在客戶端的引入與圖表實現

Echart3在HTML中的引入較為簡單，只需要像普通的JavaScript庫一樣在head標簽中用script標簽引入。在繪圖前需要為Echarts3準備一個具備高寬的DOM容器，然后就可以通過echarts.init方法初始化一個Echarts3實例并通過setOption方法生成各種各樣的圖表，其流程如圖3所示。

圖3 Echartt3基本流程

代碼如下：

//聲明文檔使用html5規范

//網頁頭部分

//頭部分結束

上述程序運行結果圖4所示。

2.3 利用AJAX讀取后臺數據實現動態數據制圖

現階段Web開發中，由于JQuery具有兼容性好、免費、開源、使用簡單等優點，已經成為最流行的JavaScript庫，它能使用戶更方便地為網頁提供AJAX交互，因而本文使用JQuery中封裝的AJAX技術來實現具體操作。利用AJAX異步傳輸技術實時向服務器發送請求，服務器通過數據庫得到數據再由AJAX傳遞給Echart3進行繪制，最終呈現在HTML網頁中[4]。具體流程如圖5所示。

首先創建一個Echart3的div容器，設計所需呈現的數據，之后定義變量app，使用app中的計時器(timeTicket)的方法來設置異步刷新間隔(setInterval)屬性，從中嵌套AJAX來實現動態傳輸數據，代碼如下：

圖4 程序運行結果

圖5 具體實現流程

var app={};

app.timeTicket=setInterval(function () {

$.ajax({

type:"post",async:false,

url:"...",//服務端PHP文件路徑

dataType:"json",//傳輸格式json

success:function (result) {

myChart.setOption({

//需要圖表數據

});},

error:function () {alert("請求失敗");}

})

},2000)

AJAX中的服務端地址指向了PHP文件,PHP是一種通用的開源腳本語言，吸收了C、Java、Perl的特點。它可以將程序嵌入到HTML文檔中去執行，系統資源消耗少、代碼運行快，是當下最流行的服務端語言。本文AJAX指向PHP文件，通過編寫PHP文件調用數據庫數據傳遞信息，最后通過Echarts3呈現在圖表中。

運用ThinkPHP3.2框架的PHP文件，其代碼如下：

namespace HomeController;

Use ThinkController;

Class 控制器名 extend Controller{

Public function 方法名(){

$data=D(“數據庫名”);

$number[‘數值名’]=$data->getField(‘數值名’,true);//獲取所需數據

echo json_encode($number);//數據轉化成json格式輸出

}}

>

這樣，AJAX通過PHP文件中的方法動態獲取來自數據庫的數據，再傳輸給Echarts3，只要將數據實時傳入數據庫，在Echarts3上就能實現動態數據制圖的整個過程。

3 結語

計算機科學技術和互聯網技術的迅速發展，對人們的生活和工作方式帶來了極大影響。對通過網絡獲取和交互中產生的各種信息進行圖表化，可實現清晰和直觀的呈現效果。基于AJAX異步傳輸和Echarts3實現動態數據制圖，通過鮮明、直觀的數據和圖表進行總結和管理，能夠極大提高工作效率，可廣泛應用于各類信息系統中的信息可視化。用戶體驗方面，在實現基本圖表制作并展現其功能的同時，可以根據用戶需求進行拓展的數據交互，大大提高了用戶對數據的控制和溝通能力；企業體驗方面，在大量數據信息收集之后，通過本文技術繪制出直觀的圖表，對提高管理績效，發現事物本質，進而采取措施解決問題和預防問題等都起到至關重要的作用；科研實驗方面，實時獲取實驗數據，動態地在圖標中加以呈現，能更準確表現出數據走向并把握其規律，為研究的順利進行奠定堅實基礎，具有較強的商業和科研價值，同時也為當下盛行的數據挖掘、云計算都提供了技術支持。

[1] BIANCHI,GIUSEPPE.Performance analysis of the IEEE 802.11 distributed coordination function[J].IEEE Journal on Selected Areas in Communications,2006,18(3):535-547.

[2] 盧偉濤.Web應用系統的測試與分析[D].北京：北京交通大學,2010.

[3] 肖漢.軟件工程理論與實踐[M].北京：科學出版社，2010.

[4] 馬朝暉，溫繼文.PHP和MYSQL WEB應用開發核心技術[M].北京：機械工業出版社，2012.

[5] 謝川.軟件工程[M].北京：機械工業出版社，2008.

[6] 王宜貴.軟件工程[M].北京：機械工業出版社，2009.

(責任編輯：孫 娟)

鄭幸源(1992-)，男，福建福州人，福建師范大學光電與信息工程學院碩士研究生，研究方向為數據庫應用；洪親(1964-)，女，福建福州人，福建師范大學光電與信息工程學院副教授，研究方向為科學教育、數據庫研究與應用。本文通訊作者為洪親。

10.11907/rjdk.162530

TP391

A

1672-7800(2017)003-0143-03