使用html绘制饼图,excel统计饼图制作

　　Html5提供了一个强大的绘图API，使我们能够用javascript轻松绘制各种图形。本文将主要讲解用HTML5绘制饼图(统计图)的方法。先来看看饼状图效果：

　　这个图是动态生成的，饼图是根据传入的刻度参数(数组)动态绘制的。饼图的大小也是根据画布的高度动态调整的。

　　所有代码如下：

　　！DOCTYPE html html head Title Canvas Test/Title meta charset= UTF-8 Script//Draw饼图函数Draw Circle (Canvas ID，data _ arr，color _ arr，text _ arr){ var c=document . getelementbyid(Canvas ID)；var CTX=c . get context( 2d )；var半径=c .高度/2-20；//半径var ox=半径20，oy=半径20；//center var width=30，height=10//图例宽度和高度var posX=ox * 2 20，posY=30//var textX=posX width 5，textY=posY 10var start angle=0；//起始弧度var endAngle=0；//结束弧度为(var I=0；I数据_数组.长度；I) {//绘制饼图ENGLEND=engle data _ ARR[I]* math . pi * 2；//End radian CTX . fill style=color _ arr[I]；CTX . begin path()；ctx.moveTo(ox，oy)；//移动到圆心ctx.arc (ox，oy，radius，startangle，endpoint，false)；CTX . close path()；CTX . fill()；startAngle=endAngle//设置起始弧度//绘制比例图和文本CTX . fill style=color _ arr[I]；ctx.fillRect(posX，posY 20 * i，width，height)；ctx.moveTo(posX，posY 20 * I)；Ctx.font=bold 12px微软雅黑；//斜体30像素微软优雅黑色字体CTX . fill style=color _ arr[I]；//#000000;var percent=text _ arr[I]: 100 * data _ arr[I] % ；ctx.fillText(percent，textX，textY 20 * I)；}}函数init() {//绘制饼图//刻度数据和颜色vardata _ arr=[0.05，0.25，0.6，0.1]；var color_arr=[#00FF21 ， #FFAA00 ， #00AABB ， # ff 4400 ]；Var _ arr=[第一季度，第二季度，第三季度，第四季度]；drawCircle(canvas_circle ，data_arr，color_arr，text _ arr)；}//页面加载时执行init()函数window.onload=init/script /head body h3HTML5绘制饼图演示/h3pcanvas ID= canvas _ circle width= 500 height= 300 style= border:2 px solid # 0026 ff；浏览器不支持canvas /canvas /p /body/html。这个功能可以直接使用。如果你想让它更漂亮，你可以添加一些额外的漂亮的图纸。

　　这段代码最大的灵活性就是将绘图参数从绘图代码中分离出来，饼状图大小根据画布容器的高度自动调整。参数传递如下：

　　var data_arr=[0.05，0.25，0.6，0.1]；//比例数据varcolor _ arr=[# 00ff21 ， # FFAA00 ， # 00aaabb ， # ff 4400 ]；//color var text_arr=[第一季度，第二季度，第三季度，第四季度]；//Text//画饼图画圆( canvas _ circle ，data _ arr，color _ arr，Text _ arr)；以上就是本文关于Html5饼状图的绘制方法，实现统计图。更多相关Html5饼状图，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。