基于Web的多維數據可視化系統設計

郝希亮 張海鵬

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

關鍵詞：Web；數據可視化；Jquery；SpringBoot；圖形化界面

DOIDOI：10.11907/rjdk.173325

中圖分類號：TP319

文獻標識碼：A 文章編號：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.

英文關鍵詞Key Words：Web； data visualization； Jquery； Springboot； graphical interface

0 引言

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

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

1 系統需求分析

系統需要滿足三大需求：

（1）公司總部人員需求。公司總部人員不僅需要了解各個分公司的相關業務數據，還需要了解總的各項業務數據。對所需大量數據進行相應業務處理，最終能夠通過圖形界面化的方式展現。此外，對需要展示的數據，根據業務需求，還可以進行不同維度的查詢、展示。

（2）各分公司人員需求。分公司人員僅僅只能了解到各自分公司的相關業務數據。對各分公司數據，需要進行相應的業務處理，并以圖形化界面的形式展示。此外，對于展示的數據，也需要提供根據不同維度查詢并展示的功能。

（3） 用戶體驗與數據的準確性。整個系統的響應速度，以及數據的準確性與時效性，對用戶來說都十分重要。系統響應速度直接影響用戶體驗，數據的準確性以及時效性更是整個系統的基本要求。

2 系統設計

2.1 總體架構

系統采用B/S（瀏覽器/服務器）結構。大型公司多維數據可視化系統一般都是作為辦公OA系統中的一個子系統，采用B/S結構，便于通過瀏覽器直接訪問與操作，所有業務邏輯在服務器端實現，減輕客戶端負荷，便于維護。

系統采用MVC架構模式設計思想，服務器端采用SpringBoot、Spring-data-jpa、Thymeleaf集成框架，前端采用Bootstrap、Jquery、AngularJS、Echart集成框架。

整個系統架構一共分為5層：表現層、控制層、服務層、Dao層、Entity層（見圖1）。

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

（2）控制層用于處理用戶的請求和業務邏輯，將結果轉為視圖呈現。相對于Spring，SpringBoot能夠簡化大量配置，便于快速建站以及跨平臺部署。在控制層中，通過使用注解配置實現地址映射，注解實現依賴注入，有效組織中間層對象。

（3）服務層作為控制層與DAO層的中間層，提供接口給控制層調用完成相關功能模塊，同時還需要調用DAO層接口，實現業務類操作。

（4）DAO層主要用于實現數據持久化。使用Spring-data-jpa，讓持久層的每個接口都繼承JpaRepository接口，DAO層的接口不需要實現類，框架就能夠實現業務邏輯。這使得建站能夠更加快速便捷。此外，DAO層使得系統代碼與操作數據庫SQL邏輯分離。

（5）Entity層創建數據庫中對應表或視圖的實體。將POJO類對象的操作轉化為對數據庫操作。

在整個架構中，thymeleaf框架作為SpringBoot官方推薦方案，不僅能夠實現前后臺分離，而且能夠與SpringMVC很好地結合[7]。

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

2.2 功能模塊

系統功能模塊設計如圖3所示，總體分為三大模塊，分別為用戶、用戶界面和可視化模塊。

（1）用戶模塊。分為用戶注冊和登錄模塊以及用戶權限管理模塊。用戶登錄和注冊模塊實現用戶的登錄與注冊功能。用戶的權限管理對企業尤為重要，每個人只能看到該部門和分公司的數據，該權限可以根據企業的要求進行設定。

（2）用戶界面模塊。主要功能是用戶登錄后，以圖形化展示相關業務模塊數據的Web頁面。

（3）可視化模塊。根據相關業務需求，可以拓展為多個業務模塊，每一業務模塊都會以圖形化界面的形式展示多種指標數據，同時對展示的每一項指標數據提供多維度查詢展示功能。可視化模塊設計需考慮展示業務模塊的可拓展性，對企業尤為重要，同時也便于網站維護。

3 系統關鍵技術實現

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

Spring-data-jpa框架能夠減少大量訪問數據庫的代碼編寫，大大提高開發效率。對于數據可視化系統，以多種維度呈現數據，要從數據庫中查詢并取出數據，進行相應的業務邏輯處理，并以圖形化界面形式展示，在此需求下，選用Spring- data-jpa作為DAO層框架，是一個不錯的選擇。

4 結語

本文基于Web的多維數據可視化系統，已通過某大型公司的測試，并成功上線使用。文中從系統需求、系統設計以及系統關鍵技術代碼實現3個方面，完整闡述了基于Web的多維數據可視化系統設計。結果表明，該設計能夠有效提高開發效率、改善移動端適配度、提高響應速度，且易于維護，對搭建基于Web的數據可視化系統具有十分重要的參考價值。

參考文獻：

[1] 權鑫.基于D3.js的數據可視化系統框架設計與實現[D].北京：北京交通大學，2016.

[2] 黃克桂.基于Web的分層聚類與可視化系統的設計與實現[D].武漢：華中科技大學，2015.

[3] 張浩，郭燦.數據可視化技術應用趨勢與分類研究[J].軟件導刊，2012，11（5）：169-172.

[4] 黃雄偉，陳定方，祖巧紅.Web數據挖掘可視化研究與應用[J].湖北工業大學學報，2009，24（4）：54-56.

[5] 張馳，羅鐵堅，王相根.基于Web的信息可視化系統的設計與實現[J].計算機系統應用，2009，18（12）：5-9.

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

[7] 張峰.應用SpringBoot改變web應用開發模式[J].科技創新與應用，2017（23）：193-194.

[8] 溫曉麗，蘇浩偉，陳歡，等.基于Spring-Boot微服務架構的城市一卡通手機充值支撐系統研究[J].電子產品世界，2017，24（10）：59-62.

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

[10] 任磊，杜一，馬帥，等.大數據可視分析綜述[J].軟件學報，2014，25（9）：1909-1936.

[11] 馬曉亭.圖書館大數據可視化分析系統的設計與實現[J].圖書館學研究，2015（10）：37-41+36.

[12] 張金磊，張寶輝，劉永貴.數據可視化技術在教學中的應用探究[J].現代遠程教育研究，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.

（責任編輯：何 麗）