canvas 环形饼状图_使用canvas绘制饼状图

Document

你的浏览器不支持canvas，请升级浏览器

(function(){

var canvas=document.querySelector('#cavsElem');

var ctx=canvas.getContext('2d');

canvas.width=600;

canvas.height=600;

canvas.strokeStyle='1px solid #000';

var data = [{

"value": .2,

"color": "red",

"title": "应届生"

},{

"value": .3,

"color": "blue",

"title": "社会招生"

},{

"value": .4,

"color": "green",

"title": "老学员推荐"

},{

"value": .1,

"color": "#ccc",

"title": "公开课"

}];

var tempAngle=-90;

for(var i=0;i

x0=400;

y0=400;

// 设置饼图的半径

radius=200;

// 每次循环开始一个新路径

ctx.beginPath();

// 将画笔移动到起始位置

ctx.moveTo(x0,y0);

// 每个扇形的角度

var angle=data[i].value*360;

ctx.fillStyle=data[i].color;

// 将角度转化为弧度不，弧度rad=angle*Math.PI/180;

var startAngle=tempAngle*Math.PI/180;

var endAngle=(tempAngle+angle)*Math.PI/180;

// 绘制

ctx.arc(x0,y0,radius,startAngle,endAngle);

var x,y;

// 绘制文字的内容

var txt=data[i].value*100+'%';

// 文字的位置在每个扇形的中间

var txtAngle=tempAngle+1/2*angle;

x=x0+Math.cos(txtAngle*Math.PI/180)*(radius+20);

y=y0+Math.sin(txtAngle*Math.PI/180)*(radius+20);

// 设置文字的对齐方式ctx.textAlign:end是文字的尾部与线对齐

if(txtAngle>90&&txtAngle<270){

ctx.textAlign='end';

}

ctx.fillText(txt,x,y);

ctx.fill();

tempAngle+=angle;

}

}())