基于Web的多維數(shù)據(jù)可視化系統(tǒng)設(shè)計(jì)

郝希亮 張海鵬

摘要：針對(duì)當(dāng)前部分大型企業(yè)存在數(shù)據(jù)量大、人工處理數(shù)據(jù)效率低、不便利用已有數(shù)據(jù)挖掘相關(guān)數(shù)據(jù)信息等問題，設(shè)計(jì)了基于Web的數(shù)據(jù)可視化系統(tǒng)。系統(tǒng)采用B/S模式，前端頁面采用Bootstrap+Jquery+AngularJs+echart框架，服務(wù)器端采用SpringBoot+Spring-data-jpa+Thymeleaf+ Ehcache框架。通過企業(yè)自建數(shù)據(jù)庫獲取相關(guān)業(yè)務(wù)數(shù)據(jù)并進(jìn)行處理，以圖形化界面進(jìn)行展示，同時(shí)提供不同維度的數(shù)據(jù)查詢展示功能。采用該設(shè)計(jì)不僅能夠快速建站提高開發(fā)效率，而且還使得整個(gè)系統(tǒng)具有易于維護(hù)、移動(dòng)端適配以及響應(yīng)速度快等優(yōu)點(diǎn)。系統(tǒng)成功通過某大型公司測試，并上線使用。

關(guān)鍵詞：Web；數(shù)據(jù)可視化；Jquery；SpringBoot；圖形化界面

DOIDOI：10.11907/rjdk.173325

中圖分類號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2018）008-0133-04

英文摘要Abstract：Aiming at the problems of massive amounts of data， low efficiency of manual process of data and inconvience in utilization of existing data in mining relevant data information， we design a Web-based data visualization system. B/S mode is adopted in the system， and the Bootstrap+Jquery+AngularJs+echart framework is used for the front page. Relevant business data is acquired from the enterprise's self-built databases and processed to be presented in the form of a graphical interface with data query function of different dimensions. The system can facilitates quick Web design and the system with advantages of easy maintenance， mobile terminal adaptation and fast response speed. The system was successfully tested in an incorporation and is operated on line.

英文關(guān)鍵詞Key Words：Web； data visualization； Jquery； Springboot； graphical interface

0 引言

數(shù)據(jù)可視化是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換為圖形或圖像在屏幕上顯示出來，并進(jìn)行交互處理的理論、方法和技術(shù)[1]。當(dāng)前數(shù)據(jù)可視化應(yīng)用多以數(shù)據(jù)可視化軟件應(yīng)用產(chǎn)品的形式推出[2]。這些數(shù)據(jù)可視化應(yīng)用系統(tǒng)可能存在開發(fā)效率低、不利于維護(hù)、不能與移動(dòng)端良好適配以及響應(yīng)速度較慢等問題[3-6]。

隨著大數(shù)據(jù)時(shí)代的到來，數(shù)據(jù)可視化技術(shù)對(duì)企業(yè)尤為重要。企業(yè)可以通過多種途徑獲得包含大量信息的數(shù)據(jù)，如何從這些數(shù)據(jù)中準(zhǔn)確獲得大量信息，對(duì)于企業(yè)是一個(gè)挑戰(zhàn)[7-9]。面對(duì)這一挑戰(zhàn)，企業(yè)對(duì)數(shù)據(jù)可視化系統(tǒng)的需求越來越大，且對(duì)系統(tǒng)的功能要求也越來越高[10-12]。文中基于Web的多維數(shù)據(jù)可視化系統(tǒng)正是在此背景下提出的。系統(tǒng)框架的整體設(shè)計(jì)，不僅便于快速建站，而且具有易于維護(hù)、與移動(dòng)適配以及響應(yīng)速度快等優(yōu)點(diǎn)。

1 系統(tǒng)需求分析

系統(tǒng)需要滿足三大需求：

（1）公司總部人員需求。公司總部人員不僅需要了解各個(gè)分公司的相關(guān)業(yè)務(wù)數(shù)據(jù)，還需要了解總的各項(xiàng)業(yè)務(wù)數(shù)據(jù)。對(duì)所需大量數(shù)據(jù)進(jìn)行相應(yīng)業(yè)務(wù)處理，最終能夠通過圖形界面化的方式展現(xiàn)。此外，對(duì)需要展示的數(shù)據(jù)，根據(jù)業(yè)務(wù)需求，還可以進(jìn)行不同維度的查詢、展示。

（2）各分公司人員需求。分公司人員僅僅只能了解到各自分公司的相關(guān)業(yè)務(wù)數(shù)據(jù)。對(duì)各分公司數(shù)據(jù)，需要進(jìn)行相應(yīng)的業(yè)務(wù)處理，并以圖形化界面的形式展示。此外，對(duì)于展示的數(shù)據(jù)，也需要提供根據(jù)不同維度查詢并展示的功能。

（3） 用戶體驗(yàn)與數(shù)據(jù)的準(zhǔn)確性。整個(gè)系統(tǒng)的響應(yīng)速度，以及數(shù)據(jù)的準(zhǔn)確性與時(shí)效性，對(duì)用戶來說都十分重要。系統(tǒng)響應(yīng)速度直接影響用戶體驗(yàn)，數(shù)據(jù)的準(zhǔn)確性以及時(shí)效性更是整個(gè)系統(tǒng)的基本要求。

2 系統(tǒng)設(shè)計(jì)

2.1 總體架構(gòu)

系統(tǒng)采用B/S（瀏覽器/服務(wù)器）結(jié)構(gòu)。大型公司多維數(shù)據(jù)可視化系統(tǒng)一般都是作為辦公OA系統(tǒng)中的一個(gè)子系統(tǒng)，采用B/S結(jié)構(gòu)，便于通過瀏覽器直接訪問與操作，所有業(yè)務(wù)邏輯在服務(wù)器端實(shí)現(xiàn)，減輕客戶端負(fù)荷，便于維護(hù)。

系統(tǒng)采用MVC架構(gòu)模式設(shè)計(jì)思想，服務(wù)器端采用SpringBoot、Spring-data-jpa、Thymeleaf集成框架，前端采用Bootstrap、Jquery、AngularJS、Echart集成框架。

整個(gè)系統(tǒng)架構(gòu)一共分為5層：表現(xiàn)層、控制層、服務(wù)層、Dao層、Entity層（見圖1）。

（1）表現(xiàn)層是系統(tǒng)的最頂層，采用Bootstrap前端框架，便于快速開發(fā)響應(yīng)式布局的Web項(xiàng)目。Jquery作為一款輕量級(jí)JS框架，具有眾多優(yōu)點(diǎn)，其中完善的ajax對(duì)于系統(tǒng)前后臺(tái)數(shù)據(jù)交互尤為重要。此外，Jquery為Bootstrap框架的JS插件提供支撐，使得Jquery成為表現(xiàn)層框架中不可缺少的一部分。AngularJS主要為前端頁面實(shí)現(xiàn)SPA（單頁Web應(yīng)用）。Echart作為一個(gè)優(yōu)秀的JS圖表框架，成為大數(shù)據(jù)時(shí)代可視化圖表的利器，同時(shí)也是系統(tǒng)中圖形化界面展示不可或缺的部分。

（2）控制層用于處理用戶的請(qǐng)求和業(yè)務(wù)邏輯，將結(jié)果轉(zhuǎn)為視圖呈現(xiàn)。相對(duì)于Spring，SpringBoot能夠簡化大量配置，便于快速建站以及跨平臺(tái)部署。在控制層中，通過使用注解配置實(shí)現(xiàn)地址映射，注解實(shí)現(xiàn)依賴注入，有效組織中間層對(duì)象。

（3）服務(wù)層作為控制層與DAO層的中間層，提供接口給控制層調(diào)用完成相關(guān)功能模塊，同時(shí)還需要調(diào)用DAO層接口，實(shí)現(xiàn)業(yè)務(wù)類操作。

（4）DAO層主要用于實(shí)現(xiàn)數(shù)據(jù)持久化。使用Spring-data-jpa，讓持久層的每個(gè)接口都繼承JpaRepository接口，DAO層的接口不需要實(shí)現(xiàn)類，框架就能夠?qū)崿F(xiàn)業(yè)務(wù)邏輯。這使得建站能夠更加快速便捷。此外，DAO層使得系統(tǒng)代碼與操作數(shù)據(jù)庫SQL邏輯分離。

（5）Entity層創(chuàng)建數(shù)據(jù)庫中對(duì)應(yīng)表或視圖的實(shí)體。將POJO類對(duì)象的操作轉(zhuǎn)化為對(duì)數(shù)據(jù)庫操作。

在整個(gè)架構(gòu)中，thymeleaf框架作為SpringBoot官方推薦方案，不僅能夠?qū)崿F(xiàn)前后臺(tái)分離，而且能夠與SpringMVC很好地結(jié)合[7]。

對(duì)大型企業(yè)而言，其相關(guān)業(yè)務(wù)的數(shù)據(jù)量相當(dāng)龐大，如果每個(gè)用戶每一次請(qǐng)求都需要系統(tǒng)執(zhí)行數(shù)據(jù)的相關(guān)操作及業(yè)務(wù)邏輯運(yùn)算，在并發(fā)請(qǐng)求情況下會(huì)增加系統(tǒng)的負(fù)載，甚至可能使得系統(tǒng)崩潰，同時(shí)也使得系統(tǒng)響應(yīng)時(shí)間較長[13-15]。該問題需要使用緩存解決。系統(tǒng)采用Ehcache緩存框架，它是一個(gè)純Java的進(jìn)程內(nèi)緩存框架，具有快速、精干等特點(diǎn)，是一種廣泛使用的開源Java分布式緩存[16]。圖2是添加Ehcache緩存后數(shù)據(jù)查詢示意圖。

2.2 功能模塊

系統(tǒng)功能模塊設(shè)計(jì)如圖3所示，總體分為三大模塊，分別為用戶、用戶界面和可視化模塊。

（1）用戶模塊。分為用戶注冊(cè)和登錄模塊以及用戶權(quán)限管理模塊。用戶登錄和注冊(cè)模塊實(shí)現(xiàn)用戶的登錄與注冊(cè)功能。用戶的權(quán)限管理對(duì)企業(yè)尤為重要，每個(gè)人只能看到該部門和分公司的數(shù)據(jù)，該權(quán)限可以根據(jù)企業(yè)的要求進(jìn)行設(shè)定。

（2）用戶界面模塊。主要功能是用戶登錄后，以圖形化展示相關(guān)業(yè)務(wù)模塊數(shù)據(jù)的Web頁面。

（3）可視化模塊。根據(jù)相關(guān)業(yè)務(wù)需求，可以拓展為多個(gè)業(yè)務(wù)模塊，每一業(yè)務(wù)模塊都會(huì)以圖形化界面的形式展示多種指標(biāo)數(shù)據(jù)，同時(shí)對(duì)展示的每一項(xiàng)指標(biāo)數(shù)據(jù)提供多維度查詢展示功能。可視化模塊設(shè)計(jì)需考慮展示業(yè)務(wù)模塊的可拓展性，對(duì)企業(yè)尤為重要，同時(shí)也便于網(wǎng)站維護(hù)。

3 系統(tǒng)關(guān)鍵技術(shù)實(shí)現(xiàn)

利用maven工具快速建站，整個(gè)系統(tǒng)需要提供幾個(gè)關(guān)鍵性的配置文件，文件命名為pom.xml，主要配置系統(tǒng)所需要依賴的jar包；application.properties文件主要提供數(shù)據(jù)源配置和thymeleaf框架配置；ehcache.xml文件主要提供Ehcache緩存框架相關(guān)的緩存配置。

Spring-data-jpa框架能夠減少大量訪問數(shù)據(jù)庫的代碼編寫，大大提高開發(fā)效率。對(duì)于數(shù)據(jù)可視化系統(tǒng)，以多種維度呈現(xiàn)數(shù)據(jù)，要從數(shù)據(jù)庫中查詢并取出數(shù)據(jù)，進(jìn)行相應(yīng)的業(yè)務(wù)邏輯處理，并以圖形化界面形式展示，在此需求下，選用Spring- data-jpa作為DAO層框架，是一個(gè)不錯(cuò)的選擇。

4 結(jié)語

本文基于Web的多維數(shù)據(jù)可視化系統(tǒng)，已通過某大型公司的測試，并成功上線使用。文中從系統(tǒng)需求、系統(tǒng)設(shè)計(jì)以及系統(tǒng)關(guān)鍵技術(shù)代碼實(shí)現(xiàn)3個(gè)方面，完整闡述了基于Web的多維數(shù)據(jù)可視化系統(tǒng)設(shè)計(jì)。結(jié)果表明，該設(shè)計(jì)能夠有效提高開發(fā)效率、改善移動(dòng)端適配度、提高響應(yīng)速度，且易于維護(hù)，對(duì)搭建基于Web的數(shù)據(jù)可視化系統(tǒng)具有十分重要的參考價(jià)值。

參考文獻(xiàn)：

[1] 權(quán)鑫.基于D3.js的數(shù)據(jù)可視化系統(tǒng)框架設(shè)計(jì)與實(shí)現(xiàn)[D].北京：北京交通大學(xué)，2016.

[2] 黃克桂.基于Web的分層聚類與可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].武漢：華中科技大學(xué)，2015.

[3] 張浩，郭燦.數(shù)據(jù)可視化技術(shù)應(yīng)用趨勢(shì)與分類研究[J].軟件導(dǎo)刊，2012，11（5）：169-172.

[4] 黃雄偉，陳定方，祖巧紅.Web數(shù)據(jù)挖掘可視化研究與應(yīng)用[J].湖北工業(yè)大學(xué)學(xué)報(bào)，2009，24（4）：54-56.

[5] 張馳，羅鐵堅(jiān)，王相根.基于Web的信息可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2009，18（12）：5-9.

[6] 蔡潔銳.基于Web頁面的大規(guī)模數(shù)據(jù)可視化系統(tǒng)研究[J].機(jī)電工程技術(shù)，2017，46（6）：107-108.

[7] 張峰.應(yīng)用SpringBoot改變web應(yīng)用開發(fā)模式[J].科技創(chuàng)新與應(yīng)用，2017（23）：193-194.

[8] 溫曉麗，蘇浩偉，陳歡，等.基于Spring-Boot微服務(wù)架構(gòu)的城市一卡通手機(jī)充值支撐系統(tǒng)研究[J].電子產(chǎn)品世界，2017，24（10）：59-62.

[9] 梅德勝.基于WEB的數(shù)據(jù)挖掘及可視化[D].武漢：武漢工程大學(xué)，2014.

[10] 任磊，杜一，馬帥，等.大數(shù)據(jù)可視分析綜述[J].軟件學(xué)報(bào)，2014，25（9）：1909-1936.

[11] 馬曉亭.圖書館大數(shù)據(jù)可視化分析系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].圖書館學(xué)研究，2015（10）：37-41+36.

[12] 張金磊，張寶輝，劉永貴.數(shù)據(jù)可視化技術(shù)在教學(xué)中的應(yīng)用探究[J].現(xiàn)代遠(yuǎn)程教育研究，2013（6）：98-104+111.

[13] KARAVANIC K L，MYLLYMAKI J，LIVNY M，et al.Integrated visualization of parallel program performance data[J].Parallel Computing，1997，23（1-2）：181-198.

[14] YU H F，MA K L.A study of I/O methods for parallel visualization of large-scale data[J].Parallel Computing，2005，31（2）：167-183.

[15] SUNMOO YOON PHD RN，COHEN B，KENRICK RN， et al .Visualization of data regarding infections using eye tracking techniques[J].J Nurs Scholarsh，2016，48（3）：244-253.

[16] ANDREW V M，DAN H.Designing for the situated and public visualization of urban data[J].Journal of Urban Technology，2012，19（2）：25-46.

（責(zé)任編輯：何 麗）