网站首页  词典首页

请输入您要查询的论文：

　

标题 基于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.
（责任编辑：何 丽）
随便看

　

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。

　

Copyright © 2004-2023 puapp.net All Rights Reserved
更新时间：2025/2/6 6:43:38