这里并没引用jquery等第三方库，只是用dom操作和canvas的特性编写的。
canvas画圆大体分为实心圆和空心圆。
根据需求分析知道该圆为实心圆。
1.先用canvas画实心圆
//伪代码
varcanvas=document.createElement("canvas");
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,开始角,结束角);
ctx.fillStyle='green';
ctx.closePath();
ctx.fill();
2.根据不同颜色绘制饼状图
//伪代码
varcanvas=document.createElement("canvas");
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,绿色开始角,绿色结束角);
ctx.fillStyle='green';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,红色开始角,红色结束角);
ctx.fillStyle='red';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,黄色开始角,黄色结束角);
ctx.fillStyle='yellow';
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,紫色开始角,紫色结束角);
ctx.fillStyle='purple';
ctx.closePath();
ctx.fill();
3.动态绘制饼状图
动态绘制圆网上普遍推荐三种方法：requestAnimationFrame、setInterval（定时）、还有动态算角度的。
这里我用的是第一种requestAnimationFrame方式。
在编写的过程中发现一个问题，就是动态画圆时并不是以圆心的坐标画的。为了解决这一问题，需要在每次画圆时重新将canvas的画笔的坐标定义为最初圆心的坐标。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<style>
#graph{
/*border:1pxsolidblack;
height:100%;
width:100%;
box-sizing:border-box;*/
}
</style>
</head>
<body>
<pid="circle"style="width:500px;float:left;"></p>
</body>
</html>
<scripttype="text/javascript">
(function(window,undefined){
vardata=[
{"product":"产品1","sales":[192.44,210.54,220.84,230.11,220.85,210.59,205.49,200.55,195.71,187.46,180.66,170.90]},
{"product":"产品2","sales":[122.41,133.16,145.65,158.00,164.84,178.62,185.70,190.13,195.53,198.88,204.32,210.91]},
{"product":"产品3","sales":[170.30,175.00,170.79,165.10,165.62,160.92,155.92,145.77,145.17,140.27,135.99,130.33]},
{"product":"产品4","sales":[165.64,170.15,175.10,185.32,190.90,190.01,187.05,183.74,177.24,181.90,179.54,175.98]}
]
vardom_circle=document.getElementById('circle');
if(dom_circle!=undefined&&dom_circle!=null)
{
varcanvas=document.createElement("canvas");
dom_circle.appendChild(canvas);
varctx=canvas.getContext('2d');
vardefaultStyle=function(Dom,canvas){
if(Dom.clientWidth<=300)
{
canvas.width=300;
Dom.style.overflowX="auto";
}
else{
canvas.width=Dom.clientWidth;
}
if(Dom.clientHeight<=300)
{
canvas.height=300;
Dom.style.overflowY="auto";
}
else
{
canvas.height=Dom.clientHeight;
}
//坐标轴区域
//注意，实际画折线图区域还要比这个略小一点
return{
p1:'green',
p2:'red',
p3:'yellow',
p4:'purple',
x:0,//坐标轴在canvas上的left坐标
y:0,//坐标轴在canvas上的top坐标
maxX:canvas.width,//坐标轴在canvas上的right坐标
maxY:canvas.height,//坐标轴在canvas上的bottom坐标
r:(canvas.width)/2,//起点
ry:(canvas.height)/2,//起点
cr:(canvas.width)/4,//半径
startAngle:-(1/2*Math.PI),//开始角度
endAngle:(-(1/2*Math.PI)+2*Math.PI),//结束角度
xAngle:1*(Math.PI/180)//偏移量
};
}
//画圆
vartmpAngle=-(1/2*Math.PI);
vards=null;
varsum=data[0]['sales'][0]+data[0]['sales'][1]+data[0]['sales'][2]+data[0]['sales'][3]
varpercent1=data[0]['sales'][0]/sum*Math.PI*2;
varpercent2=data[0]['sales'][1]/sum*Math.PI*2+percent1;
varpercent3=data[0]['sales'][2]/sum*Math.PI*2+percent2;
varpercent4=data[0]['sales'][3]/sum*Math.PI*2+percent3;
console.log(percent1);
console.log(percent2);
console.log(percent3);
console.log(percent4);
vartmpSum=0;
vardrawCircle=function(){
if(tmpAngle>=ds.endAngle)
{
returnfalse;
}
elseif(tmpAngle+ds.xAngle>ds.endAngle)
{
tmpAngle=ds.endAngle;
}
else{
tmpAngle+=ds.xAngle;
tmpSum+=ds.xAngle
}
//console.log(ds.startAngle+'***'+tmpAngle);
//console.log(tmpSum);
//ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
if(tmpSum>percent1&&tmpSum<percent2)
{
ctx.beginPath();
ctx.moveTo(ds.r,ds.ry);
ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle);
ctx.fillStyle=ds.p2;
}
elseif(tmpSum>percent2&&tmpSum<percent3)
{
ctx.beginPath();
ctx.moveTo(ds.r,ds.ry);
ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle);
ctx.fillStyle=ds.p3;
}
elseif(tmpSum>percent3)
{
ctx.beginPath();
ctx.moveTo(ds.r,ds.ry);
ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle);
ctx.fillStyle=ds.p4;
}
else{
ctx.beginPath();
ctx.moveTo(ds.r,ds.ry);
ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle);
ctx.fillStyle=ds.p1;
}
ctx.closePath();
ctx.fill();
requestAnimationFrame(drawCircle);
}
this.toDraw=function(){
ds=defaultStyle(dom_circle,canvas);
//console.log(tmpAngle);
//console.log(ds.xAngle)
ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
drawCircle();
}
this.toDraw();
varself=this;
window.onresize=function(){
self.toDraw()
}
}
})(window);
</script>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55046.shtml
