<canvas width="600px" height="400px"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
var data=[6,30,10,8];
var total=0;
var num=data.length;
var canvasHeight=ctx.canvas.height;
var canvasWidth=ctx.canvas.width;
data.forEach(function(item,i){
total+=item;
});
var dataList=[];
for(var i=0;i<data.length;i++){
var angle=Math.PI*2*data[i]/total;
dataList.push(angle);
}
var start=0;
var item2=0;
var randomColor=function(){
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return 'rgba('+r+','+g+','+b+')';
};
dataList.forEach(function(item,i){
item2+=item;
ctx.beginPath();
ctx.moveTo(canvasWidth/2,canvasHeight/2);
ctx.arc(canvasWidth/2,canvasHeight/2,150,start,item2);
start=item2;
ctx.fillStyle=randomColor();
ctx.fill();
ctx.stroke();
});
</script>
canvas 根据数据画饼图
最新推荐文章于 2022-08-14 20:01:30 发布