運行效果：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="drawing" width="600" height="400">A drawing of someing!</canvas>
<script type="text/javascript">
//繪制餅圖
var drawCircle = function(canvasId, data_arr, color_arr, text_arr){
var drawing = document.getElementById(canvasId);
if(drawing.getContext) {
var context = drawing.getContext('2d');
var radius = drawing.height/2 -20,//半徑
ox = radius +20, oy = radius +20;//圓心
var width = 30, height = 10, //圖例寬高
posX = ox * 2 +20, posY = 30;//圖例位置
var textX = posX + width + 5, textY = posY + 10;//文本位置
var startAngle = 0, endAngle = 0;//起始、結束弧度
context.strokeStyle = 'Purple';
context.lineWidth = 3;
context.strokeRect(0, 0, drawing.width, drawing.height);
for(var i=0, len=data_arr.length; i<len; i++) {
//繪制餅圖
endAngle += data_arr[i] * 2*Math.PI;
context.fillStyle = color_arr[i];
context.beginPath();
context.moveTo(ox, oy);
context.arc(ox, oy, radius, startAngle, endAngle, false);
context.closePath();
context.fill();
startAngle = endAngle;
//繪制圖例
context.fillRect(posX, posY + 20 * i, width, height);
context.moveTo(posX, posY + 20 * i);
context.font = 'bold 12px Arial';
var percent = text_arr[i] + ' : ' + data_arr[i]*100 + '%';
context.fillText(percent, textX, textY + 20 * i);
}
}
};
var init = function(){
var data_arr = [0.05, 0.25, 0.6, 0.1],
color_arr = ['#00FF21', '#FFAA00', '#00AABB', '#FF4400'],
text_arr =['第一季度', '第二季度', '第三季度', '第四季度'];
drawCircle('drawing', data_arr, color_arr, text_arr);
};
init();
</script>
</body>
</html>