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

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

by 旺達(dá)噠噠噠

摘要：

關(guān)鍵詞：Tableau、數(shù)據(jù)可視化、web、Frame

0 前言

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

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

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

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

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

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

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

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

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

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

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

用戶在具有Tableau Server賬戶的基礎(chǔ)上時，當(dāng)用戶需要將自己發(fā)布的交互式Tableau視圖和儀表板嵌入到網(wǎng)頁中時。嵌入式視圖會隨著基礎(chǔ)數(shù)據(jù)的變化或工作簿在Tableau Server或Tableau Online上的更新而更新?？梢酝ㄟ^執(zhí)行以下操作來嵌入視圖并調(diào)整其默認(rèn)外觀：

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

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

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

關(guān)鍵代碼如下：

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. 加載頁面時調(diào)用該函數(shù)：

initViz();

結(jié)果展示如圖所示。


image.png

2 web前端框架概述

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

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

1)Angular.js

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

特性：Angular.js有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。但Angular.js框架比較臃腫，常用作開發(fā)單頁應(yīng)用(SPA)，而不適合用作開發(fā)微服務(wù)。

  1. React

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

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

  1. Vue.js

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

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

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

  1. Bootstrap

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


image.png
  1. EasyUI

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


image.png

  1. QucikUI
    QucikUI 4.0是一套完整的企業(yè)級web前端開發(fā)解決方案，由基礎(chǔ)框架、UI組件庫、皮膚包、示例工程和文檔等組成。底層基于jQuery構(gòu)建。使用QucikUI 開發(fā)者可以極大地減少工作量，提高開發(fā)效率，快速構(gòu)建功能強(qiáng)大、美觀、兼容的web應(yīng)用系統(tǒng)。
    特性：a) 功能強(qiáng)大，目前最新版本框架中包含了一百多種組件，一千多個應(yīng)用場景示例。b) 界面精美，QucikUI擁有豐富的外觀界面解決方案，包括登錄、響應(yīng)式web、工作桌面、地圖類、門戶風(fēng)格、大屏展示風(fēng)格等等。c) 上手容易，QucikUI 采用組件化思想來構(gòu)建組件，使用簡單。只需要了解html語法和一些簡單的JS即可。


    image.png

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

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


image.png

image.png

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

綜合以上的闡述，可選的主流web前端框架庫有Angular.js、React、Vue.js。目前主要的工作任務(wù)是將交互式的Tableau視圖嵌入web頁面進(jìn)行數(shù)據(jù)可視化的展示、管理與分析等。工作的要求就是簡單實用，擴(kuò)展方便(在原有的架構(gòu)基礎(chǔ)上擴(kuò)展方便)。以此作為標(biāo)準(zhǔn)來衡量上述的三種框架庫的話，其中Angular.js由于框架較為臃腫，切錯誤提示不夠清晰明顯，程序報錯時，不易準(zhǔn)確快速的定位bug。相較于Angular.js而言，React、Vue.js則具有快速開發(fā)、輕量級、響應(yīng)式組件、集成路由工具和狀態(tài)管理工具的難度低等特點。因此，在本工作中可優(yōu)先考慮使用React、Vue.js框架庫。

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

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

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

4 總結(jié)與展望

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

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容