论文总字数：24612字

摘 要

随着经济和计算机技术的快速发展，国内数据可视化工具越来越多，如iChats,Pizza Pie Chats等，这些报表控件虽然图表和交互做的较好，但因为是二维的，所以不如三维立体的报表看起来更生动直观，富有体验感。加上企业需要各种报表来完成数据的展示，所以3D的可视化软件有着大量的市场需求和较好的发展前景。
本系统使用HTML5，CSS3，JavaScript作为开发语言，Notepad 作为开发环境，开发一个基于HTML5的浏览器端3D图形控件系统。该系统可以通过柱状图、饼图、面积图、累积柱状图、累积面积图、BAR图、累积BAR图，线形图、散点图，以上图均为3D效果。

本文结合HTML5技术的发展现状和系统开发过程中所用到的一些技术进行探讨，详细介绍如何在浏览器中构建一个3D的场景，将3D，JavaScript技术应用于企业的数据报表、汇总等，完成一套相对完善的3D展示软件系统。

关键词：3D报表 3D图形控件 JavaScript   HTML5   CSS3

Dynamic data 3D display software based on HTML5

Abstract

Along with the rapid development of economy and computer technology, domestic data visualization tools are becoming more and more, such as iChats, pizza pie "chats" etc., these statements controls although charts and interaction is better, but because it is two-dimensional, so three-dimensional statements look more vivid and intuitive, rich experience. Together with the enterprise needs a variety of statements to complete the data display, so the 3D visualization software has a large number of market demand and better prospects for development.

The system uses HTML5, CSS3, JavaScript as the development language, Notepad as the development environment, the development of a HTML5 based browser 3D graphics control system. The system can be achieved by bar charts, pie charts, area charts, the cumulative histogram, cumulative area diagram, bar graph, cumulative bar graph, line graph, scattered point diagram to realize the 3D effect of data display.

Based on HTML5 technology development status and system development process used some technology are discussed and introduced in detail how to in the browser to construct a 3D scene, the 3D, javascript technology application in enterprise data report, summary, a set of relatively complete 3D display system software.

Keywords: 3D Report;3D Graphical Control; JavaScript; HTML5; CSS3;

目 录

摘 要 II

Abstract III

第一章 绪论 1

1.1 课题研究背景及意义 1

1.2 国内外相关现状及发展趋势 1

1.3 课题研究内容 2

1.4 本文整体布局 2

第二章 系统开发工具及技术介绍 3

2.1 系统开发工具 3

2.1.1 Notepad 文本编辑器 3

2.1.2 Highcharts图表库 4

2.2 系统开发技术 5

2.2.1 HTML5 5

2.2.2 JavaScript 6

2.2.3 WebGL简介 6

2.2.4 Three.js简介 7

2.2.5 CSS界面美化技术 9

2.3 本章小结 10

第三章 系统需求与总体分析 11

3.1 需求调研 11

3.2 界面需求 11

3.3 系统目标分析 12

3.4 功能模块需求分析 14

3.5 设计的基本思想 16

3.6 系统流程设计 16

3.7 3D图形控件设计 17

第四章 系统详细设计及实现 19

4.1 饼状图模块的实现 19

4.2 柱状图模块的实现 21

4.3 线状图模块的实现 22

4.4 散点图模块的实现 24

4.5 累积柱状图模块的实现 27

4.6 一值多图模块的实现 29

4.7 屏幕自适应功能的实现 29

第五章 系统测试 30

5.1 系统测试目的与意义 30

5.2 测试过程 30

5.3 其他错误 30

总结和展望 32

参考文献 33

致 谢 34

第一章 绪论

1.1 课题研究背景及意义

随着经济的快速发展和计算机技术的快速发展，很多大的企业已经远远不满足于以前的2D图形报表了，2D图形报表不能够形象的反映出数据的具体信息和变化波动。在很多大的企业中，他们都要求自己业务用3D的技术形象的展示出来，这样不仅在视觉上获得很多的体验，也能给人以更深刻的印象。比如销售业绩、原料消耗、股票、环境指标等，这些如果光光用2D图表控件来展示，不能给人以一种身临其境的感觉，不能给人以一种深刻的印象，往往这样展示出来的图表，没有动态效果，并不能发现深层次的内容，而只能从表面观察它的数据。但基于HTML5的动态数据3D展示软件恰恰相反。这就正好迎合了很多企业的需求，给图形报表控件带来更好的展示。

本次课题使用HTML5和Javascript技术制作3D数据展示软件，如散点图、BAR图、饼图、累积柱状图、累积面积图、面积图、累积BAR图，线形图，图形均为3D效果。

请支付后下载全文，论文总字数：24612字