龙源期刊网 http://www.qikan.com.cn
基于HTML5的3D数据可视化
作者：周志豪 董亚则 沈晓伟
来源：《中国新技术新产品》2016年第14期
摘 要：经过几乎8年的艰辛努力，HTML5标准规范终于制定完成了，伴随着大量基于浏览器的应用也日趋庞大，HTML5的出现为数据可视化提供了新的实现方法。本文对HTML5的数据可视化在浏览器的应用进行研究实践，并利用HTML5中新生API实现动态数据3D可视化展示。
关键词：HTML5；数据可视化；SVG；Canvas 中图分类号：TP39 文献标识码：A 0. 引言
数据可视化（Data visualization）是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入地观察和分析。
随着互联网技术的不断发展，大数据时代的到来，人们越来越重视数据信息和数据分析，海量的数据过于庞大不宜直观分析和统计相关结论，在这种环境下催生了数据可视化的发展，人们把大量的数据绘制成图表甚至模型来直观地反应数据带来的影响和结果，让决策者更好地调整产品和运作方法来改善某些问题和完善产品，数据可视化越来越受到大家的重视。基于浏览器端的web应用，由于现代浏览器例如IE10、Chrome、FireFox、Safari等都能很好地兼容相应属性而得到迅速推广。 1. 相关技术
HTML通用的网页标记语言也是万维网的核心语言，2014年10月29日万维网联盟宣布HTML5的规范制定完成，来完善迅速发展的互联网应用，日常我们所说的HTML5实际上包括了HTML标记、CSS和JavaScript在内的一系列技术，其中HTML5新增了CanvasAPI和内联SVG的方法，此文就是基于新增的这两种功能来为数据提供可视化方法。 1.1 SVG
SVG是一种基于XML的可缩放矢量图形，在操作SVG图形放大或者改变尺寸时，它的图形质量没有损失的都会保留下来。SVG文件相对较小并易于压缩，这对移动互联网浏览非常重要。
1.2 CanvasAPI
龙源期刊网 http://www.qikan.com.cn
HTML5标签用于绘制图像（通过脚本，通常是JavaScript）。不过canvas元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务。getContext（）方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 1.3 SVG和CanvasAPI对比
SVG和Canvas都允许您在浏览器中创建图形，但是它们在根本上是不同的。
SVG是矢量图，使用XML格式定义图形可以通过任何文本编辑器创建，这意味着每个元素都可以进行操作。在SVG中，每个被绘制的图形均被视为对象，如果对象发生变化，那么浏览器需要重新绘制。Canvas是基于像素的即时模式图形系统，它是通过调用CanvasAPI来进行图形的绘制，利用javascript进行操作相对简单，Canvas更新图片需要重新绘制整张图。综合以上SVG和Canvas主要区别总结见表1。 2. 数据可视化实现
基于HTML5数据可视化是借助现代浏览器强大的API实现，并依靠后端服务器提供数据，在客户端实现绘制的可视化技术。数据源可采用数据库保存，如现在流行的Mysql、oracle等数据库服务器，数据格式应前后端约定好，依靠web服务器技术向浏览器端传输数据，本文采用JSON格式作为数据格式。这是一种轻量级的数据格式，它是基于ECMAScript的一个子集，目前大部分浏览器端和服务器交互都是基于JSON。浏览器接收来自服务器的数据，将数据通过可视化技术进行渲染。由于是现代浏览器，这就利于跨平台的使用，对于平板电脑和智能手机只要安装现代浏览器，一般都会很好地支持HTML5的这两个功能，就实现了多平台展示的效果。数据驱动可视化结构如图1所示。 2.1 基于SVG的数据可视化工具amCharts.js
实现数据可视化需要掌握XML和其他标记语言比如HTML，SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的。SVG里的属性值必须用引号引起来，就算是数值也必须这样做。这里是一个基本的示例。
示例中首先定义SVG标签和版本，同时定义了区域大小，在里面又定义了一个矩形、一个圆形和一段文本，效果如图2所示。
简单介绍了SVG的基本用法，不过要实现庞大的图形绘制需要借助一些工具，本文利用amCharts.js实现数据可视化。amCharts.js是一个基于SVG的JS实现库，通过搭配HTML5、CSS3和操作DOM实现绘制，同时实现各种操作数据的接口并使用json格式进行数据交互，他还支持所有现代浏览器如火狐、谷歌、Safari、Opera等，它还可在IOS（ipad，iphone）和安卓4.0以上系统的移动设备上运行。amCharts.js的很多元素都是基于CSS选择器，类名可被添加到图表的每个可视元素，这样就可以使用CSS或采用CSS动画来设置图表样式。amCharts.js具有强大的序列图表可以显示柱状图、条形图、折线图、面积图、步线图、平滑
龙源期刊网 http://www.qikan.com.cn
线、烛台图和OHLC图，还可以创建区域范围、样条范围或列范围图表。图表支持多数值轴、对数和扭转。用户可以放大、平移图表，在值和类别轴添加指南，并且序列图表和XY图表都支持趋势线。可以通过JavaScriptAPI创建和管理图表，或者通过创建JSON对象的所有配置并将它作为参数传递给相应方法后创建图表。 2.2 数据可视化模型定义
本文采用面向对象方式，编程语言多使用面向对象方法来对数据进行封装和处理，定义好数据集合和可视化对象后在浏览器端渲染。
数据集合由后端服务器提供，从web服务器返回一段json数据，通过提供的特定API完成对数据源的转化使之能让可视化对象可以接收数据集结果。
以上列出的只是部分代码，可视化对象需要不同的模块，常规图形如3D柱状图、3D折线图、3D饼状图，可以根据不同的图形创建不同的容器。首先在html页面中创建一个div并给id值赋值为container，也就是容器，用来渲染图形。接着定义一个chart对象，用来描述容器同时创建数据格式，以上面为例，然后定义图形，这里我们以3D饼状图为例，
newAmCharts.AmPieChart（）对象，然后就可以通过chart来访问amchart.js中的API来完成图形的绘制。
3. 数据可视化应用在成绩分析上的实践
下面本文将采用可视化技术对学生成绩分布情况做实践。本应用将学生成绩分为优、良、中、及格、不及格5个等级。通过某次考试成绩将这些数据可视化，利用图形可以更直观地进行分析。将一个班的60人的成绩数据生成一个饼状图，结果示例如图3所示。 结论
通过以上介绍简单地阐述了HTML5中的CanvasAPI和SVG技术，提供了一种数据可视化方法，利用现代浏览器调用相应的API实现图形的渲染，但必须是基于支持绘图API的浏览器。目前仍然存在部分浏览器对HTML5技术不支持，例如IE6、IE7。不过随着微软放弃IE以及HTML5标准的制定完成，各大现行主流浏览器厂商逐渐完善对Canvas和SVG的支持，HTML5将不再受限。 参考文献
[1] Peter Lubber.HTML5程序设计[M].北京：人民邮电出版社，2012：22-74. [2]徐曼.基于HTML5的统计图表系统的研究与设计[D].武汉科技大学，2012.
基于HTML5的3D数据可视化
