饼图，转摘备忘

HTML5引入Canvas元素&＃xff0c;用于图形的绘制&＃xff0c;我们可以仅仅基于HTML和Javascript就能绘制出原本可能需要第三方组件的图形。因为做数据统计比较多&＃xff0c;那么就用画饼图做为示例来说明。之前绘制饼图可以使用JfreeChart组件&＃xff0c;或者Flash组件FusionCharts Free和Open Flash Chart&＃xff0c;这些组件的使用之前也介绍过&＃xff0c;可以参阅以前的文章。本部分仅来介绍HTML5的Canvas绘制饼图。
    饼图的基础是原型&＃xff0c;那么我们先来看看如何使用Canvas绘制原型。当然这很简单了&＃xff0c;首先编写HTML代码&＃xff0c;如下&＃xff1a;
Html代码 
 
 
 
     
     
 
 
    您的浏览器暂不支持Canvas 
 
 

    HTML仅仅定义显示的内容&＃xff0c;如何画图还要借助Javascript了&＃xff0c;这也很简单&＃xff0c;我们来看一下&＃xff1a;
Js代码 
 

    我们就在html文件中使用 

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

 
    到此为止&＃xff0c;我们就画好扇形了&＃xff0c;细心的人会发现&＃xff0c;我们每个扇形连接处都有一道白线&＃xff0c;产生的这个问题我们之前说过&＃xff0c;就是strokeStyle和stroke方法这里没有用&＃xff0c;那么没有对画线的路径进行填充&＃xff0c;而画扇形必须要回圆心&＃xff0c;那么就需要对画线的路径进行相应填充&＃xff0c;在相应位置加上这两个方法&＃xff0c;白线就没有了。
    最后&＃xff0c;我们要求&＃xff0c;从正上方逆时针开始绘图&＃xff0c;该如何做&＃xff1f;将起始位置定义为1.5PI&＃xff0c;arc方法最后一个参数为true&＃xff0c;每次的增量不能加&＃xff0c;要减&＃xff0c;就可以了&＃xff0c;代码修改为&＃xff1a;
Js代码 
 

    我们再来看看效果&＃xff1a;

 
    Canvas绘制饼图掌握这么多基本就够了&＃xff0c;可以处理常见的数据统计了&＃xff0c;只要注意这里我们扇形划分是按照百分比进行的&＃xff0c;那么你可以根据自己的需求灵活处理。对于其实位置和方向的调整也很简单&＃xff0c;调整几个参数即可。
    第二部分将结合CSS3来制作一个完整的示例。欢迎交流&＃xff0c;本示例系作者的实践探究&＃xff0c;希望对使用者有用。