canvas-饼图

最新推荐文章于 2025-09-23 08:52:23 发布

转载最新推荐文章于 2025-09-23 08:52:23 发布 · 319 阅读

文章标签：

#canvas #饼图

HTML5 专栏收录该内容

17 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #A4E2F9;
}
</style>
</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>