大數據可視化數據加載模式比較分析

宋文文 孫力群

摘要：大數據可視化是使用形象直觀的圖表組件顯示數據分析的統計結果，一般是以web技術構建可視化應用系統，實現可視化數據提取、整理、加載到顯示渲染的整體過程。該文總結分析了三種大數據可視化數據的供給模式。比較了在原生處理、框架技術和aj ax優化框架下的組件結構和處理流程。表現了三種模式之間了繼承且持續優化的關系特征。

關鍵詞：大數據可視化.flask.echarts;node.js;網頁渲染;ORM

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2019）36-0011-02

1大數據可視化實現模式

大數據可視化本文指使用echarts圖表組件以曲線圖，柱狀圖等形式顯示大數據分析結果。echarts以json格式定義結構，其中的數據屬性一般是javaScipt數組方式提供。例如，data：[周一，周二，′周三′，′周四′，′周五′，′周六′，′周日′]，而echarts組件的完整顯示效果是由json定義的屬性樹實現的，顯示過程處理模式通常為，根據客戶端查詢需求，服務端生成可視化網頁;網頁推送到客戶端;客戶端加載網頁時，自動啟動echarts控件的生成顯示代碼，完成echarts圖表的創建。這一過程可以利用b/s架構下http訪問協議的內在特點，采用不同的設計策略，最終都是保證客戶端生成顯示echarts前，所需數據已經加載到初始化環境中。本文將分析三種設計策略，比較不同數據加載方式的特點。第一種采用原生模式，即在服務端完整生成客戶端頁面。重點是網頁模板文件的替換操作。第二種是采用flask框架，網頁模板文件使用渲染方式完成數據填充。第三種是更加輕便的基于ajax的二次數據加載模式。

2基于原生模式的數據加載分析

這里以node.js技術為例，程序執行流程如圖l所示。按功能角色可分為服務器控制器、數據庫訪問、數據變換和網頁模板加載。當客戶端通過http協議發起訪問，服務端流程控制器根據訪問路徑，定向到不同處理流程。正常情況下，會繼續發起數據庫訪問，加載可視化的源數據集。

加載后的數據集根據可視化數據結構要求，進行必要的形式變換，數據變換是根據需要典型分兩種，一種是將數據記錄集進行轉置，將記錄集中的列轉為行，例如，繪制散點圖時，一行作為x，另一行作為v軸上的數據集。另一種是將兩列進行合并操作，每行形成一個2個元素的元組，如用于餅圖的數據格式[ {value：335， name：'直接訪問′），{value：3 10，name：′郵件營銷′）]。

3框架模式下的數據加載分析

圖2為框架模式的可視化數據加載。

框架模式以node.js express和falsk為典型，將上述原生模式下的處理流程進一步封裝成開源框架的模式。以falsk框架為例，和原生模式相比，以程序控制結構實現的服務端控制器優化成以訪問路徑聲明實現直接路由的模式。網頁模板手動加載、數據替換占位符和客戶端輸出進化成網頁模板一次性渲染方式。數據訪問也以數據映射對象的形式實現。

數據映射對象flask_sqlalchemy是Flask Web框架的擴展，使Web服務器以ORM（ Object Relational Mapping）對象關系映射的方式與數據庫交互，如一個user數據庫表可以通過字段與屬性的綁定實現到模型的映射。

class User（db.Model）：

___tablename____=”user”

id= db.Column（db.lnteger， primary_key=True）

userName= db.Column（db.String（32》

利用數據模型對象獲取數據庫數據，sqlalchemy支持以對象模型集合的方式進行查詢，不用編寫sql語句，如User.query.filter（User. score l>60，User. score2>60，User. score3 >60）. all（）。也支持分組、排序等查詢，如User.query.group_by（User.age）。all0。獲取的實際數據更新模板文件的占位符，推送到客戶端，例如：

@main.route（′/index/′）

def display（）：

userS =Lrser.query.order_by（desc（′userName′》.all（）

return render_template（′/main/index.html′，users=users）

開源框架下的網頁模板渲染比原生模式更新下輕松很多，細節處理都被隱藏起來，不用再考慮js庫二次加載的問題。模板其實是一個包含響應文本的文件，其中用占位符（變量）表示動態部分，告訴模板引擎其具體的值需要從使用的數據中獲取。使用真實值替換變量，再返回最終得到的字符串，這個過程稱為“渲染”，Flask是使用Jinja2這個模板引擎來渲染模板。在模板文件中，嵌入以循環結構生成Js數據源變量的代碼。形如：

Var xData=[（%for user in users%）（{user.name}}（%end-for%）]。這樣render_template（′/main/index. html′， users=users）就可以用實際數據替換。

4使于ajax技術改進框架

前面兩種模式需要服務端讀取掃描模板文件，用實際數據替換占位符標簽，傳送到客戶端是最終目標網頁，直接在瀏覽器中以純靜態的方式渲染生成echarts，當服務端訪問頻繁或訪問并發數大時，服務端計算資源消耗比較大，用戶響應可能延時較長。而利用ajax（ Asynchronous JavaScript and XML）異步傳輸技術只需在服務端和客戶端之間傳送必需的分析業務數據，節約了服務端模板更替的耗時操作。aj ax是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，ajax可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用ajax）如果需要更新內容，必需重載整個網頁面。通過圖3可以看出，由于異步分兩階段訪問，服務端路由器的生命線是不連貫的，即兩次獨立的服務端計算。

第一次是從客戶端發起訪問，服務端直接將包含aj ax代碼的頁面文件回送，無須任何掃描。第二次是客戶端加載這個頁面文件時，發起ajax異步訪問，這個訪問過程中，實現從數據加載到echarts渲染的完整過程。aj ax訪問時，首先服務端獲取的數據以json格式回傳，這樣客戶端以字典讀取的方法提取需要的數據，如$.ajax（ ′findAll′，function（res）（ data= res[′value′]; for（var k in data）（ xAxios.push（data[k]['week']）;yAxios.

push（data[k][，value′l）;）），xAxios和yAxios就作為下一步echarts控件option選項的數據源屬性值，最后執行myChart.setOption（option）完成渲染過程。如果給用戶提供交互按鈕，允許用戶以手動方式發起從客戶端到服務端的訪問，則使用按鈕點擊事件綁定get或post的處理方式，寫法與aj ax處理接收到的數據流程類似。如：$（7#btn 7）.click（func：tion（）{$.get（ ′findAll′，function（res）{}》。

5結束語

大數據可視化數據加載三種模式的共同優點是實現了可視化渲染和可視化數據源獲取的代碼分離。通過數據占位符標簽的應用，基于文件物理內容的硬替換，卻達到了極佳的服務端和客戶端兩個計算環境的軟解耦設計質量。進一步使用flask等開源框架又封裝隱藏了上述物理操作，并融入ORM和路由聲明等設計思想，使層次邊界更加清晰輕便。aj ax技術改進了模板文件掃描替換等重度的服務端操作，甚至可以將數據集轉換變形等計算移至客戶端，實現更好的任務負載設計。

參考文獻：

[1]李輝.Flask Web開發實戰：入門、進階與原理解析[M].北京：機械工業出版社，2018.

[2]姜楓，許桂秋.大數據可視化技術[M].北京：人民郵電出版社.2019.

[3]樸靈，深入淺出 Node.js[M].北京：人民郵電出版社，2019.

[4]董西成.深入淺出Node.js[M].北京：機械工業出版社，2018.

[5]劉長龍.Python高效開發實戰：Django、'rornado、Flask、Twist-ed[M].北京：電子工業出版社，2016.

[6]孫力群.Android即時拍照與上傳應用的設計與實現[J].電腦知識與技術，2015（21）：64-65.

[7]孫敏，王琳.大數據時代下的數據可視化方法分析[J].軟件，2019（9）：182-184，191.

【通聯編輯：謝媛媛】

收稿日期：2019-10-29

作者簡介：宋文文（199 8-），女，江蘇鎮江人，學生，研究方向為大數據技術與應用;孫力群（1972-），男，江蘇蘇州人，講師，碩士研究

生，研究方向為軟件工程、大數據分析與開發。