百度T7 课程 根据数据画饼图
程序员文章站
2022-05-21 13:49:23
...
// 画个6 等分的饼图
window.onload = function(){
var c1 = document.getElementById('c1')
var ctx = c1.getContext('2d')
var canvasWidth = ctx.canvas.width;
var canvasHeigh = ctx.canvas.height;
var num = 50;
var everyRadian = 2* Math.PI /num;
// 很简单啊, 一,根据数据,进行计算出百分比,然后
var total = 0;
var len = datas.length;
datas.forEach(function(item,i){
total +=item;
})
// 计算出每块所需要的大小:
var radians = [];
datas.forEach(function(item,i){
// 百分比:
var percent = item/total;
radians.push(percent * 2 * Math.PI)
})
// console.log(radians)
// 然后就可以开画了,就这么简单
var lastRadians = 0;
ctx.moveTo(canvasWidth/2,canvasHeigh/2)
for(let i = 0; i<len;i++){
ctx.beginPath()
ctx.moveTo(canvasWidth/2,canvasHeigh/2)
ctx.fillStyle=getRandomColor()
ctx.arc(canvasWidth/2,canvasHeigh/2,200,lastRadians,radians[i],true)
ctx.fill()
lastRadians +=radians[i];
}
}
画是画出来,可是有错啊,
有些时候我们出错了,这个时候,就考验调BUg 的能力了!
最终就是一个参数写错了
ctx.arc(canvasWidth/2,canvasHeigh/2,200,lastRadians,lastRadians + radians[i],false)
大家可以调试看下,就是倒数第二个参数,到此饼状图初步就搞定了
推荐阅读