基于eCharts的動態(tài)統(tǒng)計圖表繪制技術(shù)研究

宋佳慧　劉遠(yuǎn)剛　林琳　李紳弘　許帆

摘要：eCharts是一個開源數(shù)據(jù)可視化工具，功能強(qiáng)大，具有易學(xué)易用、交互性強(qiáng)、定制靈活等優(yōu)點(diǎn)。該文對ASP.NET開發(fā)環(huán)境下eCharts控件的動態(tài)統(tǒng)計圖表繪制技術(shù)展開研究，結(jié)合AJAX技術(shù)針對其中的數(shù)據(jù)獲取、圖表參數(shù)設(shè)置、圖表動態(tài)繪制等問題給出一套完整的編程模式，從而為各種Web應(yīng)用中統(tǒng)計數(shù)據(jù)的可視化提供技術(shù)手段。

關(guān)鍵詞：eCharts；ASP.NET；統(tǒng)計圖表；可視化；AJAX

在大數(shù)據(jù)時代下，以互聯(lián)網(wǎng)為傳播載體的海量的數(shù)據(jù)變化周期短，動態(tài)獲取數(shù)據(jù)并以統(tǒng)計圖表方式實現(xiàn)數(shù)據(jù)的可視化，可以方便人們快速地掌握數(shù)據(jù)的變動趨勢及規(guī)律，從而及時準(zhǔn)確地制定決策。在這種需求的推動下，基于Web的統(tǒng)計圖表控件得到了迅猛的發(fā)展和廣泛的應(yīng)用。按照技術(shù)實現(xiàn)方式可將現(xiàn)有的圖表控件大致分為三類：組件嵌入式控件、服務(wù)端控件和基于HTML 5的客戶端控件。早期使用較多的是組件嵌入式圖表控件，如MicrosoftOffice中所提供的0WC圖表組件，可通過ASP.NET等服務(wù)端腳本嵌入網(wǎng)頁，不足的是需要提前在瀏覽器客戶端安裝相關(guān)組件或插件，導(dǎo)致所實現(xiàn)應(yīng)用的可移植性差。服務(wù)端控件基于Web服務(wù)端動態(tài)腳本語言實現(xiàn)，如微軟基于的.NET 3.5平臺開發(fā)的Web Chart控件、Java平臺上的開源圖表控件JFreeChart等等，這類控件的圖表在服務(wù)端生成，然后以靜態(tài)圖片的形式發(fā)送到客戶端瀏覽器顯示，因此服務(wù)器端負(fù)載較重，客戶端交互性較差。隨著新一代互聯(lián)網(wǎng)核心語言HTML 5的推廣，通過Canvas API實現(xiàn)Web客戶端的動態(tài)圖形繪制成為一種主流技術(shù)，于是出現(xiàn)了多種基于HTML 5的客戶端圖表繪制控件庫開源項目，其中國內(nèi)外知名的代表性產(chǎn)品包括D3.is、Highcharts、GChart和EChart等等。eCharts是由百度公司商業(yè)前端數(shù)據(jù)可視化團(tuán)隊開發(fā)的數(shù)據(jù)可視化工具，具有易學(xué)易用、交互性強(qiáng)、定制靈活等優(yōu)點(diǎn)，使其在多如牛毛的數(shù)據(jù)可視化工具中首屈一指。本文對ASP.NET開發(fā)環(huán)境下基于eCharts控件的動態(tài)圖表繪制技術(shù)展開研究，結(jié)合其中數(shù)據(jù)的獲取、圖表參數(shù)的設(shè)置、圖表的動態(tài)繪制等問題給出一套完整的編程模式，從而為各種Web應(yīng)用程序中統(tǒng)計數(shù)據(jù)的可視化提供技術(shù)手段。

1eCharts圖表控件簡介

eCharts（enterprise charts，商業(yè)級數(shù)據(jù)圖表）是一個JavaS-cript的圖表控件庫，主要用于在PC瀏覽器和移動設(shè)備上繪制各種動態(tài)圖表，能夠與各種數(shù)據(jù)源高度集成，所制作的圖表形式多樣、生動美觀、交互性強(qiáng)，向使用者提供了一個良好的數(shù)據(jù)可視化、數(shù)據(jù)挖掘和整合的平臺。eCharts的底層依賴于輕量級的HTML5 Canvas類庫ZRender，可支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時對各種圖表提供標(biāo)題、詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時間軸、工具箱等7個可交互組件，可靈活地實現(xiàn)各種圖表元素的聯(lián)動和混搭。eCharts的體系架構(gòu)如圖1所示。

2基于eCharts圖表控件庫的編程模式

使用eCharts控件在Web應(yīng)用程序繪制統(tǒng)計圖表的編程模式如圖2所示。整個過程分為6步：1）引入eCharts控件庫；2）添加用于圖表顯示的DIV容器標(biāo)簽；3）在JavaScript程序中初始化eCharts實例；4）通過AJAX技術(shù)獲取繪圖數(shù)據(jù)；5）調(diào)用eCharts實例的setOption方法配置圖表數(shù)據(jù)和其他屬性參數(shù)；6）最后，將圖表繪制結(jié)果導(dǎo)入DIv容器中。其中的核心工作是首先引入eCharts控件庫，然后基于AJAX技術(shù)實現(xiàn)客戶端與服務(wù)器端的動態(tài)交互完成繪圖。