利用canvas绘制饼状图

朱雀 2021-07-24 21:18 682阅读 0赞

代码中有注释，就不多说了很容易看明白

var canvas = document.getElementById('canvas');
    		canvas.width='600';
    		canvas.height='400';
    		var ctx = canvas.getContext('2d');
    		var sum=0;// 总和
    		var arr = [];//存储每一个扇形的值
    		var colors = [];//存储每一个扇形的颜色
    		var start = 0;//每一个扇形的开始π值
    		var end = 0;//每一个扇形的结束数π值
    		var r = 150;//半径
    		var lineX=lineY=0;
    		ctx.translate(300,200);
    
    
    		init();
    		function init(){
    			for(var i=0;i<6;i++){
    				var color = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色
    				colors.push(color);
    				
    				var value = Math.round(Math.random()*100+20);//在一定范围内随机数值
    				arr.push(value);
    				
    				sum+=value;//累加总和
    			}
    		}	
    		
    		draw();
    			
    		function draw(){
    			for(var i=0;i<arr.length;i++){
    				ctx.beginPath();
    				ctx.moveTo(0,0);
    				//计算画圆的结束位置
    				end = start + arr[i]/sum * 2 * Math.PI;
    				//画圆
    				ctx.arc(0,0,r,start,end);
    				ctx.fillStyle=colors[i];//设置填充颜色
    				ctx.fill();
    				//画边 白色，用来隔开
    				ctx.strokeStyle='white';
    				ctx.stroke();
    				ctx.closePath();
    				
    				//画指示线和显示比例
    				var dis=0;
    				ctx.beginPath();
    				ctx.strokeStyle='black';
    				//计算每个圆弧的中间位置的坐标
    				lineX = Math.cos(start + (end-start)/2)*r;
    				lineY = Math.sin(start + (end-start)/2)*r;
    	
    				ctx.moveTo(lineX,lineY);
    				//坐标的正负来确定线绘制的方向
    				if(lineX>0 && lineY>0){
    					dis=70
    				}else if(lineX<0 && lineY<0){
    					dis=-70
    				}else if(lineX<0){
    					dis=-70
    				}else if(lineY<0){
    					dis=70
    				}
    				
    				ctx.lineTo(lineX+dis,lineY);
    				ctx.stroke();
    				//绘制百分比
    				var text = Math.round(arr[i]/sum*100)+'%';
    				ctx.fillText(text,lineX+dis,lineY);
    				ctx.closePath();
    				start = end;
    			}
    			
    		}

最后的样子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/9a5af05320794e4d8855fca71c2a45df.png

发表评论取消回复

表情：

评论列表（有 0 条评论，682人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas饼状图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 09:51/ 0 赞/ 7 阅读

相关 echarts饼状图

使用echarts实现个人月消费统计，下面是我写的一个案例：效果图： ![70][] html代码： <html> <head> <me

川长思鸟来/ 2022年05月14日 01:41/ 0 赞/ 395 阅读

相关 Matplotlib饼状图

fig = plt.figure() count0 = data_train[data_train['Survived'] == 0].shape[0]

小灰灰/ 2022年04月02日 08:00/ 0 赞/ 375 阅读

相关 Jqplot图形报表-绘制饼图、柱状图、折线图....

贴图 ![这里写图片描述][SouthEast] 知乎：显著提升程序员身心健康和工作效率的装备有哪些？ > 1. 笔记本： >

旧城等待，/ 2022年03月14日 16:48/ 0 赞/ 375 阅读

相关 HTML5画布canvas实战(2)--饼状图

画布 > HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成 canvas 标签只是图形容器，您必须使用脚本来绘制图形。你可以通

淡淡的烟草味﹌/ 2022年02月23日 10:38/ 0 赞/ 521 阅读

相关饼状图

app.title = '环形图'; option = \{ tooltip: \{ trigger: 'item', f

偏执的太偏执、/ 2022年02月22日 14:50/ 0 赞/ 357 阅读

相关 matplotlib：绘制简单折线图、柱状图与饼图

折线图：使用plt.plot(),其中第一个参数和第二个参数分别对应图标的X轴和Y轴，第三个字段表示折线图颜色，例如下方的’r’(red简称), lw代表线条的宽度

超、凢脫俗/ 2022年01月23日 10:43/ 0 赞/ 495 阅读

相关 matplotlib绘制饼状图

1、普通的饼状图 from matplotlib import pyplot as plt 显示饼状图 label = ["test

谁践踏了优雅/ 2021年12月23日 08:59/ 0 赞/ 419 阅读

相关利用canvas绘制饼状图

代码中有注释，就不多说了很容易看明白 var canvas = document.getElementById('canvas'); canvas.w

朱雀/ 2021年07月24日 21:18/ 0 赞/ 683 阅读

相关 canvas绘制饼图的方法介绍(代码)

canvas绘制饼图的方法介绍(代码) 一. 任务说明使用原生`canvasAPI`绘制饼图（南丁格尔玫瑰）。（截图以及数据来自于百度Echarts官方示例库【查看示例...

小灰灰/ 2020年06月09日 11:45/ 0 赞/ 881 阅读