canvas绘制饼图
2019-12-15 本文已影响0人
写前端的大叔
使用javaScript的canvas绘制简单的饼图还是比较容易的，实现的效果图如下所示：
饼图.png
其实现原理就是根据扇形的值来计算扇形的角度，然后再绘制成一个个的扇形。具体实现代码如下所示：
function Pie(option) {
this._init(option)
}
Pie.prototype = {
_init:function (option) {
var container = option.container;
if(!container){
console.log('需要指定一个画布选择器');
return;
}
this.data = option.data || [];
this.canvas = document.getElementById(container);
this.ctx = this.canvas.getContext('2d');
},
/*
* 绘制
* */
draw:function () {
var self = this;
var x = 300,y = 300,radius = 150;
var tempAngle = 0;
this.data.forEach(function (item) {
//绘制扇形
self.ctx.beginPath();
self.ctx.moveTo(x,y);
self.ctx.fillStyle = item.color;
var angle = 360 * item.value;
var endAngle = tempAngle + angle;
self.ctx.arc(x, y, radius, tempAngle* Math.PI / 180, endAngle* Math.PI / 180,false);
self.ctx.closePath();
self.ctx.fill();
//绘制扇形上边的文字
var textAngle = tempAngle + angle/2;
var textY = radius * Math.sin(textAngle * Math.PI / 180 ) + y;
var textX = radius * Math.cos(textAngle * Math.PI / 180 ) + x;
self.ctx.font = '20px 宋体';
self.ctx.textAlign = 'left';
if(textAngle > 90 && textAngle < 270){
self.ctx.textAlign = 'right';
self.ctx.fillText(item.name, textX - 20, textY);
}else{
self.ctx.fillText(item.name, textX + 30, textY);
}
tempAngle += angle;
});
}
}
1.首先合建一个Pie的函数，然后调用_init方法。
2.然后根据value的大小来计算出角度，再使用arc方法来绘制扇形。
3.在扇形上绘制文字，首先需要计算出文字点的坐标，使用Math.sin可以计算Y坐标，使用Math.cos可以计算出X坐标。
以下为HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="chart" width="1000" height="500"></canvas>
</body>
<script src="./chart/Pie.js"></script>
<script>
var data = [
{name:'名称1',value:0.1,color:'red'},
{name:'名称2',value:0.2,color:'blue'},
{name:'名称3',value:0.4,color:'green'},
{name:'名称4',value:0.3,color:'orange'},
]
var pie = new Pie({
container:'chart',
data:data
});
pie.draw();
</script>
</html>
