论文总字数：22265字

摘 要

随着互联网的发展，信息技术融入人类生活的方方面面，由此产生的信息数据正在以惊人的速度增长。面对海量的数据，要让数据信息达到一个清晰有效地传达与沟通的效果，数据可视化提供了应对与解决之道，数据可视化已经成为当今数据分析领域中发展快速并且最引人注目的领域之一。

本文基于javascript语言、结合本人在SAP实习部门开发的可视化工具实现了一个在线的数据可视化编辑和托管平台。本系统适用于普通无需专业背景的广大用户，用户在本系统可以完成导入数据集，自定义配置可视化图表属性，下载原始数据集和可视化图表，分享编辑好的可视化图信息等操作。

本论文首先总结了该系统的研究背景及目的，并概要介绍了基于javascript数据可视化系统。接下来，本论文详细分析了该系统的设计和实现过程，并提出测试方案，给出测试结果。最后，对本系统级进行总结，指出系统的不足之处和对本系统的展望。

本系统目前已完成了主要功能模块的设计与实现，还存在一些需要改进和完善的地方，在后续工作中本人将负责该系统的完善工作。

关键词： SAP BI CVOM可视化库，大数据，数据可视化，javascript

Design and implementation of data visualization system based on Javascript

Abstract

With the development of the internet, information technology has been integrated into all aspect of human life, the resulting information data is growing at an alarming rate. In the face of so much data information, data visualization provides a good solution to make data information to be more clear and intuitive. Data visualization has become one of the rapid development and the most striking area in the data analysis area.

This thesis based on javascript language, combined with visualization tool developed by my internship department, implemented an online data visualization editing and hosting platform. The system is suitable for non-professional backgrounds customers, users can complete importing data, editing properties, downloading original dataset and visualization charts, sharing data information operation.

First of all, this thesis introduces the project backgrounds and purpose, and gives a brief introduction of the system. Then analysis the design and implement of system, and presents the testing methods, provides the testing result. Finally, summarizes the project and gives optimized solution for further improvement.

Currently, main feature of the system is completed. However, there is still something need to be improved. So I will continue to be responsible for the project in the follow-up work.

KEY WORDS: SAP BI CVOM data visualization library, big data, data visualization ，javascript

目 录

第一章 绪 论 1

1.1. 项目概述 1

1.1.1. 研究背景和目的 1

1.1.2. 基于javascript的数据可视化系统的简介 2

1.2. 论文的研究内容与组织架构 2

1.3. 本章小结 3

第二章 数据可视化系统的开发技术 4

2.1. 数据可视化技术简介 4

2.2. 开发环境 4

2.2.1. 服务器 4

2.2.2. 开发环境要求 4

2.3. 开发技术介绍 4

2.3.1. Javascript 语言 4

2.3.2. MEAN stack框架 5

2.3.3. Bootstrap框架 5

2.3.4. D3.js技术介绍 5

2.3.5. SVG技术介绍 5

2.4. 本章小结 6

第三章 数据可视化系统的需求分析与架构设计 7

3.1. 需求分析 7

3.2. 功能需求分析 7

3.2.1. 可视化系统前端交互功能需求 7

3.2.2. 响应式系统设计 9

3.3. 性能需求分析 9

3.4. 概要设计 10

3.4.1. 数据可视化系统架构设计原则 10

3.4.2. 系统总体架构设计 11

3.5. 技术架构设计 15

3.6. 本章小结 16

第四章 详细设计与实现 17

4.1. 数据导入模块 17

4.2. 可视化交互模块 18

4.3. 分享模块 20

4.4. 用户信息管理模块 21

4.5. 数据可视化模块 21

4.6. 数据库模块 22

4.7. 响应式系统设计模块 24

4.8. 本章小结 24

第五章 项目测试 25

5.1. 功能测试 25

5.1.1. 前端功能交互测试 26

5.1.2. 响应式测试 31

5.2. 性能测试 31

5.3. 本章小结 32

第六章 总结与展望 33

6.1. 项目总结 33

6.2. 展望 33

致谢 34

参考文献 35

绪 论

项目概述

研究背景和目的

随着互联网的迅猛发展和文明的不断进步，信息技术与人类的政治、军事、科研、经济、生活等方方面面不断交融，人类已经进入了一个信息过剩和数据泛滥的大数据时代。IDC（Internet Data Center）数据显示，在2006年全世界的电子数据存储量为18万PB，而2011年这个数字已达到180万PB，短短5年间就已经增加了一个数量级。就在此时此刻，海量数据依然源源不断地产生。面对这些“大数据”，要让大量数据变得亲切可观，易于理解，并且达到一个清晰有效地传达与沟通的效果，数据可视化提供了应对与解决之道。

数据可视化是数据的一个图片或图形格式的演示文稿，提供更为清晰直观的数据感官，将错综复杂的数据和数据之间的关系，通过图形的方式表达出来。它使决策者看到视觉上呈现的分析，使他们能够掌握艰深的概念或寻找新的模式。随着交互式可视化，可以通过使用技术深入到图表的更多详细信息，交互地改变你所看到的数据以及它如何处理需要的概念更进了一步。

剩余内容已隐藏，请支付后下载全文，论文总字数：22265字