基于HTML5的图形化网页数据展示

杨帆

摘 要：在HTML4的時代，如果要将各种数据图表在互联网上展示出来，办法并不多。HTML、CSS+Javascript的展示能力，不管是从性能还是功能方面来说，都十分有限。这个时候Flash出现了，顿时千树万树梨花开，互联网时代迎来了多媒体时代，数据展示组件基于Flash也是大放异彩。但是Flash由于效率问题，功耗较高，还有文件尺寸偏大，语言独立不易学的问题。今天，HTML5来了，让我来用HTML5的新增功能Canvas技术实现一个漂亮的饼图控件，来为大家介绍HTML5在图形化网页数据展示方面的优势。

关键词：HTML5；数据展示；组件；Canvas；Javascript

1 Canvas介绍

HTML5中，对图形化网页数据展示影响最大的就要数Canvas了。本文接下来会对Canvas 2D模式进行介绍，并使用Canvas 2D实现一个饼状图的数据展示组件。在实现中，为节省篇幅，本文假设读者对Javascript和HTML都有一定的了解，将仅对Canvas相关部份进行重点讲解。

在介绍Canvas 2D之前，让我们先找一个饼状图的组件，并以它作为我们实现的目标：

百度搜到这个饼状图，看起来效果不错，我们来尝试实现它。

2 实现思路与具体实现

观察这个饼状图，最直观可以看到的就是它的黑色背景。我们要画饼状图，要先把它的背景画出来，那么如何在Canvas中画一个大大的黑色方框呢？首先我们必须在页面中有Canvas元素。即，之后，我们用js调用这个元素的getContext（“2d”）来获得2d的绘图上下文（注意2d的d必须是小写），之后我们就可以使用这个上下文来进行绘图了。在Canvas中，绘制矩形的方法是使用fillRect（x，y，w，h）方法，矩形的填充颜色使用fillStyle属性来设置。其中x，y是要绘制矩形的坐标，而w，h是要绘制矩形的宽度与高度。在Canvas的坐标系中，以Canvas元素的左上角为0，0，X轴向右延伸，Y轴向下延伸。所以要画一个400x400的矩形，代码如上。

效果：

成功！终于把背景完成了。下面我们来画饼，整个的饼图其实是由多个扇形组成的。在canvas的2d上下文中，画扇形的方式是使用“路径”功能，一个路径其实就是一个形状，想像一下有一个笔尖在画布上落下，这儿便是形状的起点，随着你的移动笔尖，线条就会出现在画布上，当你决定想完成这个形状的时候，从笔尖的当前位置，到形状的起点画一条直线，关闭形状区域，这个形状就画好了。在Canvas的绘图API中，并没有画圆的方法，只能画一定弧度的弧线，但我们可以画2π弧度的弧来画圆。Canvas画弧线的API如下：

arc（x，y，r，a1，a2，b）

其中：x，y为圆弧的圆心，r为圆弧半径，a1为起始弧度，a2为终止弧图，b为布尔值，代表画弧方向，b为true时代表逆时针画弧，b为false时代表顺时针画弧。Canvas画弧时以X轴正向（右方）为0度。

在Canvas API中，开始一个新的形状路径的API是openPath（），闭合一个形状的API是closePath（）；移动画笔，不进行绘画的API是moveTo（x，y），x，y为要移动画笔的目的坐标。从画笔当前坐标画一条线到x，y的API为lineTo（x，y）。Canvas中填充画好的形状的API是fill（），使用的颜色仍然是fillStyle属性。了解了这些，跟据图3中我们的设计。很容易可以画出我们的第一个弧。按我们这个思路，如果我们要画一个圆心坐标在200，200，半径为100，角度为30度（π/6）的黄色扇形，代码如下：

再看下效果：

现在，我们即会画矩形，也会画扇形了，我们当然也可以用这些扇形拼成一个圆。那么为了实现饼状图控件，我们现在唯一缺少的Canvas技术就是文字的显示了。

Canvas 2d上下文API中，和文字相关的内如有以下几个：

fillStyle属性：代表要绘制的文字颜色

font属性：要绘制的字体与字号。例值：”9px Arial”。字体为Arial，字号为9px

textBaseline属性：要绘制的字体与指定坐标的位置关系，值与效果如下图：

shadowColor属性：填充阴影颜色。

shadowOffsetX属性：填充阴影X偏移。

shadowOffsetY属性：填充阴影Y偏移。

fillText方法：fillText（text，x，y）。text为要绘制的文字内容，x，y为要绘制的坐标。

新增代码如下：

效果：

致此，完成一个饼图所需要的Canvas知识我们已经完全掌握了。控件封装的设计部份略过，直接帖一下这个饼图完成的最终效果：

在完成稿里面，我们为了美观，对边缘做了虚化处理。这是怎么做的呢？其实，fillStyle并不是仅仅可以填写具体的颜色，fillStyle还可以赋值为一个暂变。我们通过设置渐变，让颜色填充在边缘时迅速由本色向背景色（黑色）渐变，即实现了这种效果。相关代码如下：

最后把所有相关代码附上：

⑴HTML文件：

⑵JS文件（yfchart.js）

按我们的灵活设计，其实要换肤的话也十分容易。yfchart.js完全不需要修改，只需要修改html中对饼图控件引用的部份代码即可。修改后代码如下（即去掉黑底皮肤定义部份）：

效果如下：

3 总结与展望

从以上介绍和实例可以看出，使用HTML5做数据展示非常简单。只要短短的百行代码即可实现一个支持皮肤换肤和任意数据内容的饼图控件。并且效果也是比较好的。实际上，HTML5可以做的远远不止于此。在数据展示方面，HTML5对现代设备支持的非常好，比如触摸屏，蛇螺仪等等，使用这些功能，我们可以做出用手指和图表交互的功能，也可以做出一个3维的数据世界，你拿着支持HTML5的移动设备，就像拿着一扇窗户一样，随着设备的移动，通过屏幕看到的数据也是不同的。这些都是HTML5可以做到的神奇功能。除此之外，HTML5的本地存储，Web worker等功能甚至允许我们在前端做一些数据的统计和计算工作，而不是简单的什么都交给后台。

按HTML5的现状来看，使用HTML5做数据展示已经完全可以做的比Flash更好，且功能会比Flash更加强大。希望可以通过这篇文章让更多的人关注HTML5，使用HTML5，让我们的开发变的更简单，效果更好。

[参考文献]

[1]David Flanagan，著，淘宝前端团队，译.Javascript权威指南David Flanagan，Javascript：The Definitive Guide.

[2]Nicholas C.Zakas著，曹力，张欣，等，译.Javascript高级程序设计. Nicholas C.Zakas，Professional Javascript for Web Developers.

[3]秀野堂主，蒋宇捷，罗睿，编著.论道HTML5.Xiu Yetangzhu，Jiang Yujie，Luo Rui，The way to HTML5.

[4]w3c.http：//www.w3.org/TR/REC-html32.

[5]w3c.http：//www.w3.org/TR/REC-html40/.