企业数据可视化网站的web前端框架技术研究综述

企业数据可视化网站的web前端框架技术研究综述

by 旺达哒哒哒

摘要：

关键词：Tableau、数据可视化、web、Frame

0 前言

随着制造执行系统(MES)在无锡厂的全面应用，产品从原材料到成品的转换过程中产生了大量的数据，仅1线从2012年批产开始，到2017年为止，MES数据库中就已经记录了22亿条加工结果数据和4700万条子零件信息数据，其数据中蕴含的巨大价值成为了企业大数据分析的强大动力。为了充分利用制造进程中产生的产品历史数据，为企业创造更多价值，有必要建立一个基于大数据的企业数据可视化网站，在对数据进行甄别和处理之后，对数据进行全方位、可视化、立体化的展示。

Tableau作为一款功能强大的可视化软件，可以有效的帮助我们洞察数据。为了方便快捷的查询用户所需要的数据，并将数据以图表等形式直观的展示出来，需要将交互式的Tableau视图嵌入web页面当中。完成这项工作，首先要选择合适的前端框架以及UI组件来进行项目的开发。本文首先简要介绍了可视化组件Tableau的概念及其作为交互式视图嵌入web页面的方法。随后，介绍了目前主流的几种前端框架库和前端UI框架，并对比了不同web前端框架的优缺点。最后，综合以上的研究，对企业数据可视化网站的web前端框架技术的选择进行了总结与展望。

1 数据可视化工具Tableau

1.1 数据可视化工具Tableau概述

数据可视化是指借助于图形化的手段，清晰、有效地传达与沟通信息。随着信息技术的不断发展，当今社会已步入大数据时代，如何帮助企业在海量数据中快速获取重要信息应对市场变化已成为企业亟需解决的难题。

Tableau是一款定位于数据可视化敏捷开发和实现的商务智能展现工具，可以用来实现交互的、可视化的分析和仪表板应用，从而帮助企业快速地认识和理解数据，以应对不断变化的市场环境与挑战。Tableau主要有以下几个方面的特性：

• 极速高效。Tableau通过内存数据引擎，不但可以直接查询外部数据库，还可以动态地从数据仓库抽取数据，实时更新连接数据，大大提 高了数据访问和查询的效率。

• 简单易用。简单易用是Tableau非常重要的一个特性。 Tableau提供了非常友好的可视化界面，用户通过轻点鼠标和简单拖放，就可以迅速创建出智能、精美、直观和具有强交互性的报表和仪表盘。

• 可连接多种数据源，轻松实现数据融合。Tableau允许从多个数据源访问数据，包括带分隔符的文本文件、Excel文件、SQL数据库、Oracle数据库和多维数据库等。

• 高效接口集成，具有良好可扩展性，提升数据分析能力。Tableau提供多种应用编程接口，包括数据提取接口、页面集成接口和高级数据分析接口。比如：JavaScript API。通过JavaScript API，可以把通过Tableau制作的报表和仪表盘嵌入到已有的企业信息化系统或企业商务智能平台中，实现与页面和交互的集成。

1.2 交互式Tableau视图嵌入web页面的方法介绍

用户在具有Tableau Server账户的基础上时，当用户需要将自己发布的交互式Tableau视图和仪表板嵌入到网页中时。嵌入式视图会随着基础数据的变化或工作簿在Tableau Server或Tableau Online上的更新而更新。可以通过执行以下操作来嵌入视图并调整其默认外观：

1. 获取随视图提供的嵌入代码：每个视图顶部的“共享”按钮包括可以复制和粘贴到网页中的嵌入代码。

2. 自定义嵌入代码：使用那些用于控制工具栏、选项卡等的参数来自定义嵌入代码。

3. 使用Tableau JavaScript API：使用 Tableau 生成的嵌入代码作为自己代码的起点，然后添加或编辑用于控制工具栏、选项卡等的对象参数。依赖于 Tableau JavaScript 文件的默认嵌入代码也是控制多个嵌入视图的加载顺序的唯一方法。

关键代码如下：

1. 创建一个网页，并包含承载可视化的Tableau Server中的JavaScript API文件：

2. 在页面正文中创建要插入Tableau可视化的div元素：

3. 在JavaScript文件中编写函数以显示可视化：

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

4. 加载页面时调用该函数：

initViz();

结果展示如图所示。

image.png

2 web前端框架概述

一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合，web技术发展至今，延伸出了大量的框架、模板以及插件。本文将从前端框架库和前端UI框架两方面进行web前端框架的概述。

2.1 常见前端框架库及其特性

1)Angular.js

概述：Angular.js 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。并且Angular.js是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

特性：Angular.js有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。但Angular.js框架比较臃肿，常用作开发单页应用(SPA)，而不适合用作开发微服务。

2. React

概述：React 是一个 Facebook和Instagram用来创建用户界面的JavaScript库。很多人认为 React 是 MVC 中的 V（视图）。我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

特性：a) 更适用于大型应用和更好的可测试性。b) 同时适用于Web端和原生App。c) 更大的生态圈带来的更多支持和工具。d) 单向绑定，先更新model,然后渲染UI元素，数据在一个方向流动，使得调试更加容易。但代码冗余，各种生命周期太麻烦。

3. Vue.js

概述：Vue.js 是用于构建交互式的Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的API。从技术上讲，Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM框架，Vue.js更容易上手。

特性：a) 模板和渲染函数的弹性选择。b) 简单的语法和项目配置。c) 更快的渲染速度和更小的体积。

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

1. Bootstrap

Boostrap是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。并且Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。
特性：a) 预处理脚本：可以直接使用Bootstrap提供的CSS样式表，也可以采用预编译的CSS文件快速开发，或者从源码定制自己需要的样式。b) 网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC设备。c) Bootstrap 提供了全面、美观的文档。你能在这里找到关于HTML元素、HTML和CSS组件、jQuery插件方面的所有详细文档。

image.png

2. EasyUI

EasyUI是一种基于jQuery的用户界面插件集合。为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用EasyUI时不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。
特性：a) 完美支持HTML5网页的完整框架。b) 有效缩减网页开发的时间和规模。

image.png

3. QucikUI
   QucikUI 4.0是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。底层基于jQuery构建。使用QucikUI 开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。
   特性：a) 功能强大，目前最新版本框架中包含了一百多种组件，一千多个应用场景示例。b) 界面精美，QucikUI拥有丰富的外观界面解决方案，包括登录、响应式web、工作桌面、地图类、门户风格、大屏展示风格等等。c) 上手容易，QucikUI 采用组件化思想来构建组件，使用简单。只需要了解html语法和一些简单的JS即可。

   
   
   

   image.png

4. 其他国产基于jQuery的开源框架

目前还有众多中国人自己开发的web开源框架，如：Dwz(J-UI)、B-JUI(Best jQuery UI)等等，此类框架大多基于jQuery实现，体积小，简单实用扩展方便，可用于快速开发。但由于开发者较少，导致共享资源不多，帮助文档不易阅读。

image.png

image.png

3 企业数据可视化网站的web关键技术的确立

综合以上的阐述，可选的主流web前端框架库有Angular.js、React、Vue.js。目前主要的工作任务是将交互式的Tableau视图嵌入web页面进行数据可视化的展示、管理与分析等。工作的要求就是简单实用，扩展方便(在原有的架构基础上扩展方便)。以此作为标准来衡量上述的三种框架库的话，其中Angular.js由于框架较为臃肿，切错误提示不够清晰明显，程序报错时，不易准确快速的定位bug。相较于Angular.js而言，React、Vue.js则具有快速开发、轻量级、响应式组件、集成路由工具和状态管理工具的难度低等特点。因此，在本工作中可优先考虑使用React、Vue.js框架库。

选择React还是Vue.js选择哪一个web前端框架进行开发，则需进一步衡量工作的未来发展趋势。首先，React和Vue.js的使用范围是相似的：都是基于组件化的轻量级框架，都专注于构建用户界面的视图层；都既可以用于简单的项目，也适用于使用前沿技术的大规模复杂项目。使用Vue.js开发的项目倾向于简单和“能用就行”，开发出来的项目显得小而快，但当应用扩展至更大的规模时，模板容易出现运行错误，不易于测试和重构。而使用React更适合构建一个大型的应用程序，且同时适用于web端和原生APP。

综上，选择一个合适的web前端框架，还需对工作的未来发展趋势进行一个评估，若此项工作仅是为了快速实现web页面管理数据实现Tableau可视化功能，且以后不会做太多的功能拓展，建议选择Vue前端框架库。若是此项工作只作为项目的起步，将来要进行更多的功能拓展，建议选择React进行开发。

最后，对于前端UI框架，目前市场上的UI框架有几十种，多数成熟的UI前端框架都具有着轻量级、模块化、简单、兼容性好等优点。且有很多优秀的UI前端框架都是开源且免费的，可选的范围较大。

4 总结与展望

随着企业自动化程度的提高，产品所累积的数据量以及数据的产生速度都在膨胀，推动的大数据问题的研究。在庞大的数据背后，隐藏着深刻的规律，对这些规律进行挖掘和发现，可以为企业带来巨大的商业价值。在此背景下，可视化就是解决大数据的一种高效的手段，合理的数据可视化能够帮助受众更好的理解和抓取数据。其中，利用将Tableau可视化组件嵌入web页面进行可视化展示的方法，就是一种很好的大数据可视化手段。

本文通过阐述Tableau可视化组件嵌入web页面的方法，并通过介绍和分析了目前市面上主流的几种web前端框架库和web前端UI框架的特性及适用场合，总结得出了适合于本次工作的前端框架，为实现公司大数据可视化工作打下了基础。