效果：
源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>餅狀圖</title> </head> <body> <canvas id="canvas"></canvas> <script> (function () { var data = [{ "value":"0.4", "color":"red", "name":"JAVA" },{ "value":"0.3", "color":"green", "name":"PYTHON" },{ "value":"0.2", "color":"blue", "name":"C++" },{ "value":"0.1", "color":"grey", "name":"PHP" }]; var canvas = document.getElementById("canvas"); //設置寬高不從css中設置 canvas.width = 600;//設置canvas寬 canvas.height = 600;//設置canvas高 canvas.style.border = "1px solid red"; //獲取上下文 var ctx = canvas.getContext("2d"); //畫圖 var x0 = 300,y0 = 300;//圓心 var x,y;//文字放置位置 var radius = 100; var tempAngle = -90;//畫圓的起始角度 for(var i = 0;i<data.length;i++){ var startAngle = tempAngle*Math.PI/180;//起始弧度 var angle = data[i].value*360; var endAngle = (tempAngle+angle)*Math.PI/180;//結束弧度 var textAngle = tempAngle + 0.5*angle;//文字放的角度 x = x0 + Math.cos(textAngle*Math.PI/180)*(radius+20);//文字放的X軸 y = y0 + Math.sin(textAngle*Math.PI/180)*(radius+20);//文字放的Y軸 //如果文字在圓形的左側，那么讓文字 對齊方式為 文字結尾對齊當前坐標。 if( textAngle > 90 && textAngle < 270 ) { ctx.textAlign = 'end'; } var text = data[i].name + " "+ data[i].value*100+"%"; ctx.fillText(text,x,y); ctx.beginPath(); ctx.moveTo(x0,y0); ctx.fillStyle = data[i].color; ctx.arc(x0,y0,radius,startAngle,endAngle); ctx.fill(); tempAngle += angle; } }()); </script> </body> </html>