HTML5绘制饼图实例（-）

======================================================
注：本文源代码点此下载
======================================================

html5引入canvas元素,用于图形的绘制,我们可以仅仅基于html和javascript就能绘制出原本可能需要第三方组件的图形。因为做数据 统计比较多,那么就用画饼图做为示例来说明。之前绘制饼图可以使用jfreechart组件,或者flash组件fusioncharts free和open flash chart,这些组件的使用之前也介绍过,可以参阅以前的文章。本部分仅来介绍html5的canvas绘制饼图。

饼图的基础是原型,那么我们先来看看如何使用canvas绘制原型。当然这很简单了,首先编写html代码,如下:

html代码

您的浏览器暂不支持canvas

html仅仅定义显示的内容,如何画图还要借助javascript了,这也很简单,我们来看一下:

js代码

我们就在html文件中使用

解释一下:定义了两个全局变量,color和data用于放置数据和对应的扇形区域的颜色。drawcircle()方法中加入循环,就是根据数据和颜色 来进行自动填充,此时就必须使用moveto()方法来每次回到圆心了,否则就不是扇形了,可以自行去测试。然后对arc方法进行调整,可以发现,第四, 第五参数调整,就是扇形其实位置和结束位置了,这里我们定义的startpoint是0,就是从左水平点开始画图,为顺时针方向。画图的弧长是按百分数计 算,也就是data数组中的每一项除以100得出的结果,当然data数组本身的和也是100。

之后进行扇形区域的填充,使用fill()方法即可,我们看到如下结果:

到此为止,我们就画好扇形了,细心的人会发现,我们每个扇形连接处都有一道白线,产生的这个问题我们之前说过,就是strokestyle和stroke 方法这里没有用,那么没有对画线的路径进行填充,而画扇形必须要回圆心,那么就需要对画线的路径进行相应填充,在相应位置加上这两个方法,白线就没有了。

最后,我们要求,从正上方逆时针开始绘图,该如何做?将起始位置定义为1.5pi,arc方法最后一个参数为true,每次的增量不能加,要减,就可以了,代码修改为:

js代码

我们再来看看效果:

canvas绘制饼图掌握这么多基本就够了,可以处理常见的数据统计了,只要注意这里我们扇形划分是按照百分比进行的,那么你可以根据自己的需求灵活处理。对于其实位置和方向的调整也很简单,调整几个参数即可。

第二部分将结合css3来制作一个完整的示例。欢迎交流,本示例系作者的实践探究,希望对使用者有用。

大小: 14.5 kb

大小: 31.9 kb

大小: 34.5 kb

大小: 34.7 kb

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/