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

信息科技 Information Technology

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

高科同济大学电子与信息学院，上海 201804摘要 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的数据可视化跨平台成为了可能。

何外观的，但是它在 HTML文档中创建了一个画板，通过绘图 API可以在画板中绘制位图模式的图形。 1.3 SVG和 Canvas对比 SVG和 Canvas是两种图像模式，他们的绘制过程也不相同，所以他们有各自的优缺点。SVG是矢量图，它通过一颗 XML元素树来实现，使用 SVG来绘制图形，可以很简单地通过移除增加相应的元素来编辑图形元素。SVG的矢量特性有时对性能会造成很大的影响，所以 SVG的整体性能比 Canvas要差。Canvas是位图，它通过调用 API实现绘图，其 API基于 Javascript,相对简洁。但对于 Canvas生成的图片，要更新图片中的元素就不得不把当前的擦出再重新绘制一遍。综合上述 Canvas和 SVG的主要区别如表 1。 Canvas SVG基于像素绘图 (canvas调用基于 XML树 API绘制图形元素)行为上是单一的 HTML多个 SVG图形元素构成 HTML标签元素类似于 DOM的一部分图形的表现形式由图形的表现形式由 SVG标记元素创 Javascript创建和修改建，可以用 CSS和 Javascript修改事件模型基于 SVG图形元素上，事件模型基于 Canvas元素如 Lines、Rectangles、Paths。表1

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 Canvas最初由苹果内部使用自己 Mac OS X WebKit推出，苹果大力推广使用 HTML5,促进了 Canvas的发展和应用。 HTML5提供了画布元素,同时 HTML5定义了很多 API支持脚本化客户端绘图操作。元素本身是没有任

2数据可视化的实现

图 1基于 HTML5的跨平台数据可视化基于 HTML5的数据可视化的方法是基于数据驱动，采用 HTML5提供的 API借助浏览器的支持，在客户端实现的绘图的可视化技术。数据驱动依靠服务器端提供数据，数据源可以采用数据库，OLAP等，数据预处理为事先定义好的格式，依靠服务器提供的 WEB Service,向客户端传输数据。本文采

作者简介：高科，在读研究生，所在院校：同济大学电信学院，研究方向：无线安全与移动商务研究

《科技传播》 2013 1(上) 186