基于HTML5的数据可视化实现方法研究

基于HTML5的数据可视化实现方法研究摘要html5的出现，为数据可视化提供了新的实现方法。本文对html5在健康数据可视化在pc及部分移动终端上的应用进行研究。使用html5中的canvas和svg实现的数据可视化方法基于浏览器的支持，具有很好的平台兼容性

关键词html5；数据可视化；跨平台

中图分类号tp39 文献标识码a 文章编号1674-6708（2013）82-0186-02

0 引言

可视化（visualization）是采用计算机图形学和图形处理技术将数据转换成图形或者图像显示出来的技术。可视化汇集了数据表示、数据处理和决策分析等一系列问题。

随着科学技术的不断发展，海量数据的出现加快了数据可视化技术的发展。很多平台提供了实现数据可视化的技术，如flash和silverlight都提供了相应的绘图技术，对于基于web的应用，包含了svg和canvas的html5提供了新的数据可视化技术。现在主流浏览器大部分完成了对html5标准的支持，包含ie9、chrome、firefox、safari等，而且现在智能手机以及平板电脑的浏览器对html5都有很好的支持，同时这些移动终端的日益普及也使基于html5的数据可视化跨平台成为了可能。

1 相关技术

html5标准是html下一个主要的修订版本，现在仍处于发展阶

段。其目标是取代1999年所制定的html 4.01和xhtml 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义的html5标准实际指的是包括html、css和javascript在内的一套技术组合。html5包含了svg（scalable vector graphics），同时提供了实时二维绘图技术canvas。本文就基于svg和canvas对数据可视化的实现提出一种可行的方法。

1.1 svg

svg英文全称为scalable vector graphics，由w3c制定，其基于可扩展标记语言xml。svg是用于描述二维矢量图形的一种图形格式，由于它是基于xml的一种语言，所以它继承了xml的跨平台性和可扩展性。如svg文档中可以嵌入其他的xml或者html 内容，xml或者html中可以内嵌svg，而各个不同的svg图形可以方便地组合，构成新的svg图形。svg还具有很多优点，比如很好的可扩充性和交互性。svg支持无限放大，svg图片任意比例的放大不会损害图片的显示效果，其他诸如png，gif，bmp，jpeg格式的图片放大则会影响视觉效果。同时svg还提供了很好的动画交互效果，通过定义鼠标事件和键盘事件，以及相关的脚本编程就可以实现svg图形的动画效果及交互操作。

1.2 canvas

2 数据可视化的实现

2.2 数据可视化模型定义

3 数据可视化在健康分析上的应用

4 结论

本文介绍了html5标准中的canvas和svg绘图技术，比较了两者在数据可视化方面的优缺点，阐述了采用hmtl5绘图技术实现数据可视化的一种方法，这种方法基于浏览器的支持，通过调用hmtl5提供的绘图api，通过javascript实现具体的数据可视化图形的绘制。这种方法可以很好的跨平台，但同时这种方法由于依赖浏览器的支持，在使用上有浏览器的限制，例如现在浏览器ie8对canvas 和svg都没有支持。不过由于html5的逐渐成熟，各大主流浏览器厂商会逐渐完善对canvas和svg的支持。

参考文献

[1]刘堪，周晓峥，周洞汝.数据可视化的研究与进展[j].计算机工程.2002，28（8）：1-2，63.

[2]heer，j，bostock，m.declarative language design for interactive visualization[j].visualization and

computer graphics，ieee transactions on.nov.-dec，2010：16，issue：6：1149-1156.

[3]赵越，陈志伟，蔡淑惠，等.大数据量科学计算数据的动态web可视化[j].现代计算机，2012（5）.

[4]吴磊，张福庆.基于html canvas的webgis客户端技术研究[j].地理信息世界，2009，7（3）：78-82.