canvas实现统计饼图

<!DOCTYPE html>

<head>

</head>

<body>

//数据

var data={

title:”饼图分布情况”,

dataList:

[

{name:”第一工厂(30%)”,rate:0.3,color:”#f60″},

{name:”第二工厂(30%)”,rate:0.3,color:”#64f”},

{name:”第三工厂(40%)”,rate:0.4,color:”#0f6″},

]

}

//画布

var cvs=document.createElement(“canvas”);

var div1=document.getElementById(“div1”);

div1.appendChild(cvs);

cvs.width=760;

cvs.height=500;

cvs.style=”display:block;margin:0 auto;background:#eee;”;

var ctx=cvs.getContext(“2d”);

//绘制标题

ctx.font=”16px 黑体”;

ctx.textAlign=”center”;

ctx.textBaseline=”midddle”;

ctx.fillText(data.title,cvs.width/2,25);

//绘制左边实例图标

ctx.textAlign=”left”;

ctx.font=”14px 微软雅黑”;

ctx.textBaseline=”bottom”;

for(var i=0;i<data.dataList.length;i++)

{

ctx.beginPath();

ctx.arc(30,50+20*i,10,1.5*Math.PI-0.2*Math.PI,1.5*Math.PI+0.2*Math.PI,false);

ctx.lineWidth=5;

ctx.strokeStyle=data.dataList[i].color;

ctx.stroke();

ctx.fillText(data.dataList[i].name,45,50+20*i);

}

//绘制饼图

var startAngle=1.5*Math.PI;

var endAngle,lineAngle;

for(var j=0;j<data.dataList.length;j++)

{

ctx.beginPath();

ctx.moveTo(500,250);

endAngle=startAngle+data.dataList[j].rate*2*Math.PI;

ctx.arc(500,250,100,startAngle,endAngle,false);

ctx.closePath();

ctx.fillStyle=data.dataList[j].color;

ctx.fill();

startAngle=endAngle;

lineAngle=endAngle-data.dataList[j].rate*Math.PI-1.5*Math.PI;

ctx.beginPath();

ctx.moveTo(500+100*Math.sin(lineAngle),250-100*Math.cos(lineAngle));

ctx.lineTo(500+120*Math.sin(lineAngle),250-120*Math.cos(lineAngle));

ctx.textBaseline=”midddle”;

if(lineAngle<=Math.PI)

{

ctx.lineTo(500+120*Math.sin(lineAngle)+15,250-120*Math.cos(lineAngle));

ctx.textAlign=”left”;

ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)+20,250-120*Math.cos(lineAngle));

}

else

{

ctx.lineTo(500+120*Math.sin(lineAngle)-15,250-120*Math.cos(lineAngle));

ctx.textAlign=”right”;

ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)-20,250-120*Math.cos(lineAngle));

}

ctx.lineWidth=1;

ctx.strokeStyle=data.dataList[j].color;

ctx.stroke();

}

//生长动画

var overOver=document.createElement(‘canvas’);

div1.appendChild(cvsOver);

cvsOver.width=cvs.width;

cvsOver.height=cvs.height;

div1.style.position=”relative”;

cvsOver.style.position=”absolute”;

cvsOver.style.top=0;

cvsOver.style.left=0;

</script>

</body>

</html>

本文来自投稿，不代表PmTemple立场，如若转载，请注明出处：

。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com

canvas实现统计饼图

相关推荐

发表评论