基于AJAX異步傳輸技術(shù)與Echarts3技術(shù)的動(dòng)態(tài)數(shù)據(jù)繪圖實(shí)現(xiàn)

鄭幸源，洪 親,2,3,4，蔡堅(jiān)勇,2,3,4，陳順?lè)?2,3,4，柯俊敏

(1.福建師范大學(xué) 光電與信息工程學(xué)院；2.福建師范大學(xué) 醫(yī)學(xué)光電科學(xué)與技術(shù)教育部重點(diǎn)實(shí)驗(yàn)室；3.福建師范大學(xué) 福建省光子技術(shù)重點(diǎn)實(shí)驗(yàn)室；4.福建師范大學(xué) 智能光電系統(tǒng)工程研究中心，福建 福州 350007)

基于AJAX異步傳輸技術(shù)與Echarts3技術(shù)的動(dòng)態(tài)數(shù)據(jù)繪圖實(shí)現(xiàn)

鄭幸源1，洪 親1,2,3,4，蔡堅(jiān)勇1,2,3,4，陳順?lè)?,2,3,4，柯俊敏1

(1.福建師范大學(xué) 光電與信息工程學(xué)院；2.福建師范大學(xué) 醫(yī)學(xué)光電科學(xué)與技術(shù)教育部重點(diǎn)實(shí)驗(yàn)室；3.福建師范大學(xué) 福建省光子技術(shù)重點(diǎn)實(shí)驗(yàn)室；4.福建師范大學(xué) 智能光電系統(tǒng)工程研究中心，福建 福州 350007)

大數(shù)據(jù)分析和概率統(tǒng)計(jì)為人類(lèi)提供了各種寶貴信息，而信息可視化又為人們更好地理解信息提供了極大便利。基于AJAX技術(shù)和Echarts3制圖技術(shù)，通過(guò)AJAX傳遞用戶交互需求中所獲取的數(shù)據(jù)，以EChart3為主體實(shí)現(xiàn)一種針對(duì)基礎(chǔ)圖表類(lèi)型的支持?jǐn)?shù)據(jù)挖掘和類(lèi)型轉(zhuǎn)換交互的數(shù)據(jù)可視化分析組件，達(dá)到清晰和直觀的信息呈現(xiàn)效果，提升任務(wù)執(zhí)行效率。

AJAX；Echarts3；數(shù)據(jù)動(dòng)態(tài)制圖；數(shù)據(jù)挖掘

0 引言

信息化時(shí)代，大數(shù)據(jù)以可視化圖表呈現(xiàn)能更直觀、更快速、更精準(zhǔn)地反映狀態(tài)的變動(dòng)和數(shù)據(jù)間暗藏的關(guān)聯(lián)。結(jié)合Ajax和Echart3技術(shù)，能夠更好地從數(shù)據(jù)庫(kù)中讀取所需信息，動(dòng)態(tài)地以圖表的形式加以呈現(xiàn)，所表達(dá)的信息更形象，脈絡(luò)更清晰。對(duì)企業(yè)、科研等領(lǐng)域的數(shù)據(jù)分析處理、總結(jié)歸納和整合統(tǒng)計(jì)都具有較高的實(shí)用價(jià)值。

1 相關(guān)技術(shù)

1.1 AJAX

1.1.1 AJAX簡(jiǎn)介

AJAX即“Asynchronous JavaScript And XML”，是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，其主要特點(diǎn)是可以為Web開(kāi)發(fā)提供異步的交換方式和數(shù)據(jù)傳輸，實(shí)現(xiàn)在不重新加載、不刷新界面的情況下與服務(wù)器進(jìn)行信息連接和交換，可極大地改善用戶的使用感受，尤其是對(duì)提高信息傳輸和交換疏導(dǎo)等方面的速度有十分重要的作用[1]。AJAX中的XHTML和CSS具有靈活性、拼裝性和實(shí)用性的特點(diǎn)，因而經(jīng)常被用來(lái)構(gòu)建一個(gè)適用化和精準(zhǔn)化的標(biāo)準(zhǔn)用戶界面，并為用戶提供相應(yīng)的用戶系統(tǒng)數(shù)據(jù)。DOM由于對(duì)XHTML、HTML、XML有著結(jié)構(gòu)化的操作方法和強(qiáng)大的操作能力，DOM被AJXA用來(lái)實(shí)現(xiàn)交互信息和數(shù)據(jù)的動(dòng)態(tài)顯示。XSTL與XML在數(shù)據(jù)交互的結(jié)構(gòu)化和共享傳輸方面都有著極大優(yōu)勢(shì)。

1.1.2 AJAX工作原理

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

圖1 AJAX引擎工作原理

1.2 Echarts3

ECharts3是百度公司的一個(gè)開(kāi)源數(shù)據(jù)可視化工具，也是一個(gè)純JavaScript語(yǔ)言開(kāi)發(fā)的圖表庫(kù)，特別適合于網(wǎng)絡(luò)應(yīng)用。它能提供直觀生動(dòng)、可交互、可個(gè)性化定制的數(shù)據(jù)可視化圖表，可以流暢地運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，是當(dāng)前各種網(wǎng)絡(luò)數(shù)據(jù)可視化工具中功能最完善、用戶體驗(yàn)最好的一個(gè)。

2 設(shè)計(jì)與實(shí)現(xiàn)

2.1 B/S架構(gòu)與操作技術(shù)選擇

Browser/Server(簡(jiǎn)稱B/S)結(jié)構(gòu)即瀏覽器和服務(wù)器結(jié)構(gòu)[2]，它是Internet技術(shù)興起后的一種網(wǎng)絡(luò)結(jié)構(gòu)模式(見(jiàn)圖2)，主要由瀏覽器、服務(wù)器、數(shù)據(jù)庫(kù)組成。

本文采用當(dāng)下流行的PHP語(yǔ)言作為服務(wù)器端語(yǔ)言，采用ThinkPHP3.2框架，選擇MYSQL作為數(shù)據(jù)庫(kù)，瀏覽器(客戶端)使用AJAX+Echarts3技術(shù)實(shí)現(xiàn)前后端數(shù)據(jù)交互并完成動(dòng)態(tài)制圖[3]。

圖2 B/S架構(gòu)

2.2 Echarts3在客戶端的引入與圖表實(shí)現(xiàn)

Echart3在HTML中的引入較為簡(jiǎn)單，只需要像普通的JavaScript庫(kù)一樣在head標(biāo)簽中用script標(biāo)簽引入。在繪圖前需要為Echarts3準(zhǔn)備一個(gè)具備高寬的DOM容器，然后就可以通過(guò)echarts.init方法初始化一個(gè)Echarts3實(shí)例并通過(guò)setOption方法生成各種各樣的圖表，其流程如圖3所示。

圖3 Echartt3基本流程

代碼如下：

//聲明文檔使用html5規(guī)范

//網(wǎng)頁(yè)頭部分

//頭部分結(jié)束

上述程序運(yùn)行結(jié)果圖4所示。

2.3 利用AJAX讀取后臺(tái)數(shù)據(jù)實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)制圖

現(xiàn)階段Web開(kāi)發(fā)中，由于JQuery具有兼容性好、免費(fèi)、開(kāi)源、使用簡(jiǎn)單等優(yōu)點(diǎn)，已經(jīng)成為最流行的JavaScript庫(kù)，它能使用戶更方便地為網(wǎng)頁(yè)提供AJAX交互，因而本文使用JQuery中封裝的AJAX技術(shù)來(lái)實(shí)現(xiàn)具體操作。利用AJAX異步傳輸技術(shù)實(shí)時(shí)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器通過(guò)數(shù)據(jù)庫(kù)得到數(shù)據(jù)再由AJAX傳遞給Echart3進(jìn)行繪制，最終呈現(xiàn)在HTML網(wǎng)頁(yè)中[4]。具體流程如圖5所示。

首先創(chuàng)建一個(gè)Echart3的div容器，設(shè)計(jì)所需呈現(xiàn)的數(shù)據(jù)，之后定義變量app，使用app中的計(jì)時(shí)器(timeTicket)的方法來(lái)設(shè)置異步刷新間隔(setInterval)屬性，從中嵌套AJAX來(lái)實(shí)現(xiàn)動(dòng)態(tài)傳輸數(shù)據(jù)，代碼如下：

圖4 程序運(yùn)行結(jié)果

圖5 具體實(shí)現(xiàn)流程

var app={};

app.timeTicket=setInterval(function () {

$.ajax({

type:"post",async:false,

url:"...",//服務(wù)端PHP文件路徑

dataType:"json",//傳輸格式j(luò)son

success:function (result) {

myChart.setOption({

//需要圖表數(shù)據(jù)

});},

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

})

},2000)

AJAX中的服務(wù)端地址指向了PHP文件,PHP是一種通用的開(kāi)源腳本語(yǔ)言，吸收了C、Java、Perl的特點(diǎn)。它可以將程序嵌入到HTML文檔中去執(zhí)行，系統(tǒng)資源消耗少、代碼運(yùn)行快，是當(dāng)下最流行的服務(wù)端語(yǔ)言。本文AJAX指向PHP文件，通過(guò)編寫(xiě)PHP文件調(diào)用數(shù)據(jù)庫(kù)數(shù)據(jù)傳遞信息，最后通過(guò)Echarts3呈現(xiàn)在圖表中。

運(yùn)用ThinkPHP3.2框架的PHP文件，其代碼如下：

namespace HomeController;

Use ThinkController;

Class 控制器名 extend Controller{

Public function 方法名(){

$data=D(“數(shù)據(jù)庫(kù)名”);

$number[‘?dāng)?shù)值名’]=$data->getField(‘?dāng)?shù)值名’,true);//獲取所需數(shù)據(jù)

echo json_encode($number);//數(shù)據(jù)轉(zhuǎn)化成json格式輸出

}}

>

這樣，AJAX通過(guò)PHP文件中的方法動(dòng)態(tài)獲取來(lái)自數(shù)據(jù)庫(kù)的數(shù)據(jù)，再傳輸給Echarts3，只要將數(shù)據(jù)實(shí)時(shí)傳入數(shù)據(jù)庫(kù)，在Echarts3上就能實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)制圖的整個(gè)過(guò)程。

3 結(jié)語(yǔ)

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

[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應(yīng)用系統(tǒng)的測(cè)試與分析[D].北京：北京交通大學(xué),2010.

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

[4] 馬朝暉，溫繼文.PHP和MYSQL WEB應(yīng)用開(kāi)發(fā)核心技術(shù)[M].北京：機(jī)械工業(yè)出版社，2012.

[5] 謝川.軟件工程[M].北京：機(jī)械工業(yè)出版社，2008.

[6] 王宜貴.軟件工程[M].北京：機(jī)械工業(yè)出版社，2009.

(責(zé)任編輯：孫 娟)

鄭幸源(1992-)，男，福建福州人，福建師范大學(xué)光電與信息工程學(xué)院碩士研究生，研究方向?yàn)閿?shù)據(jù)庫(kù)應(yīng)用；洪親(1964-)，女，福建福州人，福建師范大學(xué)光電與信息工程學(xué)院副教授，研究方向?yàn)榭茖W(xué)教育、數(shù)據(jù)庫(kù)研究與應(yīng)用。本文通訊作者為洪親。

10.11907/rjdk.162530

TP391

A

1672-7800(2017)003-0143-03