Html5饼图绘制实现统计图的方法

webraider

Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图（统计图）的方法。先看一下饼图效果：
5 u0 \! ]1 m" f  L; L  B

6 B$ R, z0 V) i! j+ R& ~- C这个图是动态生成的，根据传入的比例参数（数组），来动态绘制饼图。饼图的大小也是根据高度来动态调整的。
+ Y, Y5 D3 \: }4 B全部代码如下：

1.             Canvas测试                                [size=4]HTML5绘制饼图演示[/size]
3.                                     浏览器不支持canvas                    
4.    

复制代码

这个函数可以直接使用，如果想做的更漂亮，可以增加一些额外的美观绘制。
本代码最大的灵活性是将绘制参数与绘制代码分离，饼图大小根据Canvas容器高度自动调整。传递参数方式如下：

1. var data_arr = [0.05, 0.25, 0.6, 0.1]; //比例数据var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"]; //颜色var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"]; //文字//绘制饼图drawCircle("canvas_circle", data_arr, color_arr, text_arr);

复制代码

到此这篇关于Html5饼图绘制实现统计图的方法的文章就介绍到这了,更多相关Html5饼图统计图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

, e9 ~% u+ l1 W7 t( ]( z来源：http://www.jb51.net/html5/739056.html
) w( v% r6 n% ~免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！