企業(yè)數(shù)據(jù)可視化網(wǎng)站的web前端框架技術研究綜述

by 旺達噠噠噠

摘要：

關鍵詞：Tableau装蓬、數(shù)據(jù)可視化、web纱扭、Frame

0 前言

隨著制造執(zhí)行系統(tǒng)(MES)在無錫廠的全面應用牍帚，產(chǎn)品從原材料到成品的轉換過程中產(chǎn)生了大量的數(shù)據(jù)，僅1線從2012年批產(chǎn)開始乳蛾，到2017年為止暗赶，MES數(shù)據(jù)庫中就已經(jīng)記錄了22億條加工結果數(shù)據(jù)和4700萬條子零件信息數(shù)據(jù)，其數(shù)據(jù)中蘊含的巨大價值成為了企業(yè)大數(shù)據(jù)分析的強大動力肃叶。為了充分利用制造進程中產(chǎn)生的產(chǎn)品歷史數(shù)據(jù)忆首，為企業(yè)創(chuàng)造更多價值，有必要建立一個基于大數(shù)據(jù)的企業(yè)數(shù)據(jù)可視化網(wǎng)站被环，在對數(shù)據(jù)進行甄別和處理之后糙及，對數(shù)據(jù)進行全方位、可視化筛欢、立體化的展示浸锨。

Tableau作為一款功能強大的可視化軟件唇聘，可以有效的幫助我們洞察數(shù)據(jù)。為了方便快捷的查詢用戶所需要的數(shù)據(jù)柱搜，并將數(shù)據(jù)以圖表等形式直觀的展示出來迟郎，需要將交互式的Tableau視圖嵌入web頁面當中。完成這項工作聪蘸，首先要選擇合適的前端框架以及UI組件來進行項目的開發(fā)宪肖。本文首先簡要介紹了可視化組件Tableau的概念及其作為交互式視圖嵌入web頁面的方法。隨后健爬，介紹了目前主流的幾種前端框架庫和前端UI框架控乾，并對比了不同web前端框架的優(yōu)缺點。最后娜遵，綜合以上的研究蜕衡，對企業(yè)數(shù)據(jù)可視化網(wǎng)站的web前端框架技術的選擇進行了總結與展望。

1 數(shù)據(jù)可視化工具Tableau

1.1 數(shù)據(jù)可視化工具Tableau概述

數(shù)據(jù)可視化是指借助于圖形化的手段设拟，清晰慨仿、有效地傳達與溝通信息。隨著信息技術的不斷發(fā)展纳胧，當今社會已步入大數(shù)據(jù)時代镰吆，如何幫助企業(yè)在海量數(shù)據(jù)中快速獲取重要信息應對市場變化已成為企業(yè)亟需解決的難題。

Tableau是一款定位于數(shù)據(jù)可視化敏捷開發(fā)和實現(xiàn)的商務智能展現(xiàn)工具跑慕，可以用來實現(xiàn)交互的万皿、可視化的分析和儀表板應用，從而幫助企業(yè)快速地認識和理解數(shù)據(jù)相赁，以應對不斷變化的市場環(huán)境與挑戰(zhàn)相寇。Tableau主要有以下幾個方面的特性：

• 極速高效。Tableau通過內存數(shù)據(jù)引擎钮科，不但可以直接查詢外部數(shù)據(jù)庫唤衫，還可以動態(tài)地從數(shù)據(jù)倉庫抽取數(shù)據(jù)，實時更新連接數(shù)據(jù)绵脯，大大提 高了數(shù)據(jù)訪問和查詢的效率佳励。

• 簡單易用。簡單易用是Tableau非常重要的一個特性蛆挫。 Tableau提供了非常友好的可視化界面赃承，用戶通過輕點鼠標和簡單拖放，就可以迅速創(chuàng)建出智能悴侵、精美瞧剖、直觀和具有強交互性的報表和儀表盤。

• 可連接多種數(shù)據(jù)源，輕松實現(xiàn)數(shù)據(jù)融合抓于。Tableau允許從多個數(shù)據(jù)源訪問數(shù)據(jù)做粤，包括帶分隔符的文本文件、Excel文件捉撮、SQL數(shù)據(jù)庫怕品、Oracle數(shù)據(jù)庫和多維數(shù)據(jù)庫等。

• 高效接口集成巾遭，具有良好可擴展性肉康，提升數(shù)據(jù)分析能力。Tableau提供多種應用編程接口灼舍，包括數(shù)據(jù)提取接口吼和、頁面集成接口和高級數(shù)據(jù)分析接口。比如：JavaScript API片仿。通過JavaScript API纹安，可以把通過Tableau制作的報表和儀表盤嵌入到已有的企業(yè)信息化系統(tǒng)或企業(yè)商務智能平臺中尤辱，實現(xiàn)與頁面和交互的集成砂豌。

1.2 交互式Tableau視圖嵌入web頁面的方法介紹

用戶在具有Tableau Server賬戶的基礎上時，當用戶需要將自己發(fā)布的交互式Tableau視圖和儀表板嵌入到網(wǎng)頁中時光督。嵌入式視圖會隨著基礎數(shù)據(jù)的變化或工作簿在Tableau Server或Tableau Online上的更新而更新阳距。可以通過執(zhí)行以下操作來嵌入視圖并調整其默認外觀：

1. 獲取隨視圖提供的嵌入代碼：每個視圖頂部的“共享”按鈕包括可以復制和粘貼到網(wǎng)頁中的嵌入代碼结借。

2. 自定義嵌入代碼：使用那些用于控制工具欄筐摘、選項卡等的參數(shù)來自定義嵌入代碼。

3. 使用Tableau JavaScript API：使用 Tableau 生成的嵌入代碼作為自己代碼的起點船老，然后添加或編輯用于控制工具欄咖熟、選項卡等的對象參數(shù)。依賴于 Tableau JavaScript 文件的默認嵌入代碼也是控制多個嵌入視圖的加載順序的唯一方法柳畔。

關鍵代碼如下：

1. 創(chuàng)建一個網(wǎng)頁馍管，并包含承載可視化的Tableau Server中的JavaScript API文件：

<scriptsrc="https://YOUR-SERVER/javascripts/api/tableau-2.min.js"></script>

2. 在頁面正文中創(chuàng)建要插入Tableau可視化的div元素：

<div id="vizContainer"></div>

3. 在JavaScript文件中編寫函數(shù)以顯示可視化：

function initViz() {
 var containerDiv = document.getElementById("vizContainer"),
 url = "https://YOUR-SERVER/views/YOUR-VISUALIZATION";
 var viz = new tableau.Viz(containerDiv, url);
}

4. 加載頁面時調用該函數(shù)：

initViz();

結果展示如圖所示。

image.png

2 web前端框架概述

一個前端開發(fā)框架其實就是一系列產(chǎn)品化的HTML/CSS/JavaScript組件的集合薪韩，web技術發(fā)展至今确沸，延伸出了大量的框架、模板以及插件俘陷。本文將從前端框架庫和前端UI框架兩方面進行web前端框架的概述罗捎。

2.1 常見前端框架庫及其特性

1)Angular.js

概述：Angular.js 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫拉盾。并且Angular.js是以一個 JavaScript 文件形式發(fā)布的桨菜，可通過 script 標簽添加到網(wǎng)頁中。

特性：Angular.js有著諸多特性，最為核心的是：MVVM倒得、模塊化替蔬、自動化雙向數(shù)據(jù)綁定、語義化標簽屎暇、依賴注入等等承桥。但Angular.js框架比較臃腫，常用作開發(fā)單頁應用(SPA)根悼，而不適合用作開發(fā)微服務凶异。

2. React

概述：React 是一個 Facebook和Instagram用來創(chuàng)建用戶界面的JavaScript庫。很多人認為 React 是 MVC 中的 V（視圖）挤巡。我們創(chuàng)造 React 是為了解決一個問題：構建隨著時間數(shù)據(jù)不斷變化的大規(guī)模應用程序剩彬。為了達到這個目標，React 采用下面兩個主要的思想矿卑。

特性：a) 更適用于大型應用和更好的可測試性喉恋。b) 同時適用于Web端和原生App。c) 更大的生態(tài)圈帶來的更多支持和工具母廷。d) 單向綁定轻黑，先更新model,然后渲染UI元素，數(shù)據(jù)在一個方向流動琴昆，使得調試更加容易氓鄙。但代碼冗余，各種生命周期太麻煩业舍。

3. Vue.js

概述：Vue.js 是用于構建交互式的Web 界面的庫抖拦。它提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單舷暮、靈活的API态罪。從技術上講，Vue.js 集中在 MVVM 模式上的視圖模型層下面，并通過雙向數(shù)據(jù)綁定連接視圖和模型复颈。實際的 DOM 操作和輸出格式被抽象出來成指令和過濾器。相比其它的MVVM框架诸狭，Vue.js更容易上手券膀。

特性：a) 模板和渲染函數(shù)的彈性選擇。b) 簡單的語法和項目配置驯遇。c) 更快的渲染速度和更小的體積芹彬。

2.2 常見前端UI框架及其特性

1. Bootstrap

Boostrap是目前最受歡迎的 HTML、CSS 和 JS 框架叉庐，用于開發(fā)響應式布局舒帮、移動設備優(yōu)先的 WEB 項目。并且Bootstrap 是完全開源的。它的代碼托管玩郊、開發(fā)肢执、維護都依賴 GitHub 平臺。
特性：a) 預處理腳本：可以直接使用Bootstrap提供的CSS樣式表译红，也可以采用預編譯的CSS文件快速開發(fā)预茄，或者從源碼定制自己需要的樣式。b) 網(wǎng)站和應用能在 Bootstrap 的幫助下通過同一份代碼快速侦厚、有效適配手機耻陕、平板、PC設備刨沦。c) Bootstrap 提供了全面诗宣、美觀的文檔。你能在這里找到關于HTML元素想诅、HTML和CSS組件召庞、jQuery插件方面的所有詳細文檔。

image.png

2. EasyUI

EasyUI是一種基于jQuery的用戶界面插件集合来破。為創(chuàng)建現(xiàn)代化篮灼，互動，JavaScript應用程序讳癌，提供必要的功能穿稳。使用EasyUI時不需要寫很多代碼存皂，只需要通過編寫一些簡單HTML標記晌坤，就可以定義用戶界面。
特性：a) 完美支持HTML5網(wǎng)頁的完整框架旦袋。b) 有效縮減網(wǎng)頁開發(fā)的時間和規(guī)模骤菠。

image.png

3. QucikUI
   QucikUI 4.0是一套完整的企業(yè)級web前端開發(fā)解決方案，由基礎框架疤孕、UI組件庫商乎、皮膚包、示例工程和文檔等組成祭阀。底層基于jQuery構建鹉戚。使用QucikUI 開發(fā)者可以極大地減少工作量，提高開發(fā)效率专控，快速構建功能強大抹凳、美觀、兼容的web應用系統(tǒng)伦腐。
   特性：a) 功能強大赢底，目前最新版本框架中包含了一百多種組件，一千多個應用場景示例。b) 界面精美幸冻，QucikUI擁有豐富的外觀界面解決方案粹庞，包括登錄、響應式web洽损、工作桌面庞溜、地圖類、門戶風格碑定、大屏展示風格等等强缘。c) 上手容易，QucikUI 采用組件化思想來構建組件不傅，使用簡單旅掂。只需要了解html語法和一些簡單的JS即可。

   
   
   image.png

4. 其他國產(chǎn)基于jQuery的開源框架

目前還有眾多中國人自己開發(fā)的web開源框架访娶，如：Dwz(J-UI)商虐、B-JUI(Best jQuery UI)等等，此類框架大多基于jQuery實現(xiàn)崖疤，體積小秘车，簡單實用擴展方便，可用于快速開發(fā)劫哼。但由于開發(fā)者較少萝映，導致共享資源不多哼勇，幫助文檔不易閱讀。

image.png

image.png

3 企業(yè)數(shù)據(jù)可視化網(wǎng)站的web關鍵技術的確立

綜合以上的闡述，可選的主流web前端框架庫有Angular.js侮叮、React聘裁、Vue.js担锤。目前主要的工作任務是將交互式的Tableau視圖嵌入web頁面進行數(shù)據(jù)可視化的展示被丧、管理與分析等。工作的要求就是簡單實用板祝，擴展方便(在原有的架構基礎上擴展方便)宫静。以此作為標準來衡量上述的三種框架庫的話，其中Angular.js由于框架較為臃腫券时，切錯誤提示不夠清晰明顯孤里，程序報錯時，不易準確快速的定位bug橘洞。相較于Angular.js而言捌袜，React、Vue.js則具有快速開發(fā)震檩、輕量級琢蛤、響應式組件蜓堕、集成路由工具和狀態(tài)管理工具的難度低等特點。因此博其，在本工作中可優(yōu)先考慮使用React套才、Vue.js框架庫。

選擇React還是Vue.js選擇哪一個web前端框架進行開發(fā)慕淡，則需進一步衡量工作的未來發(fā)展趨勢背伴。首先，React和Vue.js的使用范圍是相似的：都是基于組件化的輕量級框架峰髓，都專注于構建用戶界面的視圖層傻寂；都既可以用于簡單的項目，也適用于使用前沿技術的大規(guī)模復雜項目携兵。使用Vue.js開發(fā)的項目傾向于簡單和“能用就行”疾掰，開發(fā)出來的項目顯得小而快，但當應用擴展至更大的規(guī)模時徐紧，模板容易出現(xiàn)運行錯誤静檬，不易于測試和重構。而使用React更適合構建一個大型的應用程序并级，且同時適用于web端和原生APP拂檩。

綜上，選擇一個合適的web前端框架嘲碧，還需對工作的未來發(fā)展趨勢進行一個評估稻励，若此項工作僅是為了快速實現(xiàn)web頁面管理數(shù)據(jù)實現(xiàn)Tableau可視化功能，且以后不會做太多的功能拓展愈涩，建議選擇Vue前端框架庫望抽。若是此項工作只作為項目的起步，將來要進行更多的功能拓展钠署，建議選擇React進行開發(fā)糠聪。

最后，對于前端UI框架谐鼎，目前市場上的UI框架有幾十種，多數(shù)成熟的UI前端框架都具有著輕量級趣惠、模塊化狸棍、簡單、兼容性好等優(yōu)點味悄。且有很多優(yōu)秀的UI前端框架都是開源且免費的草戈，可選的范圍較大。

4 總結與展望

隨著企業(yè)自動化程度的提高侍瑟，產(chǎn)品所累積的數(shù)據(jù)量以及數(shù)據(jù)的產(chǎn)生速度都在膨脹唐片，推動的大數(shù)據(jù)問題的研究丙猬。在龐大的數(shù)據(jù)背后，隱藏著深刻的規(guī)律费韭，對這些規(guī)律進行挖掘和發(fā)現(xiàn)茧球，可以為企業(yè)帶來巨大的商業(yè)價值。在此背景下星持，可視化就是解決大數(shù)據(jù)的一種高效的手段抢埋，合理的數(shù)據(jù)可視化能夠幫助受眾更好的理解和抓取數(shù)據(jù)。其中督暂，利用將Tableau可視化組件嵌入web頁面進行可視化展示的方法揪垄，就是一種很好的大數(shù)據(jù)可視化手段。

本文通過闡述Tableau可視化組件嵌入web頁面的方法逻翁，并通過介紹和分析了目前市面上主流的幾種web前端框架庫和web前端UI框架的特性及適用場合饥努，總結得出了適合于本次工作的前端框架，為實現(xiàn)公司大數(shù)據(jù)可視化工作打下了基礎八回。