html js 扇形统计图_canvas绘制扇形统计图

今天偷懒了，把上次的作业代码记录在这里好了。

绘制简单的扇形统计图需要用到JS插件，绘制完以后的代码是这样的：

今天有点晚了把代码记录一下：

*{ margin:0px; padding:0px;}

body{ text-align:center}

#can1{ width:400px; height:400px;}

$(function(){

var canv=document.getElementById("can1");

var ctx=canv.getContext("2d");

var num=[300,300,300];

var col=["#F00","#00f","#060"]

var j=0,j1=0,j2=0,jiao=0;

var sun=0;

for(var i=0;i

sun=sun+num[i];

}

for(var i=0;i

j=2*Math.PI*num[i]/sun;

j2=j1+j;

ctx.beginPath();

ctx.fillStyle=col[i];

ctx.arc(canv.width/2,canv.height/2,120,j1,j2,false);

ctx.lineTo(canv.width/2,canv.height/2);

ctx.closePath();

ctx.fill();

jiao=j1+j/2;

ctx.font="20px Arial";

ctx.fillStyle="#000";

j1=j1+j;

}

})

好了，这个就是上面图形的代码，但是要加JS哦！