欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

百度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];
					}



				}

百度T7 课程 根据数据画饼图

 

画是画出来,可是有错啊,

有些时候我们出错了,这个时候,就考验调BUg 的能力了!

最终就是一个参数写错了

ctx.arc(canvasWidth/2,canvasHeigh/2,200,lastRadians,lastRadians + radians[i],false)	

大家可以调试看下,就是倒数第二个参数,到此饼状图初步就搞定了