canvas实现圆饼图,柱状图,折线图(满满的干货)

科技2022-07-11 123

canvas画图

圆饼图柱状图折线图

圆饼图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #a1{ border: 1px solid red; } </style> </head> <body> <canvas id="a1" width="500" height="500"></canvas> <script type="text/javascript"> var a1=document.getElementById('a1'); var canvas=a1.getContext('2d'); var data = [{ "value": .2, "color": "red", "title": "数学" },{ "value": .4, "color": "blue", "title": "英语" },{ "value": .3, "color": "green", "title": "语文" },{ "value": .1, "color": "pink", "title": "物理" }]; //圆形坐标 var x0=200; var y0=200; //半径r var r0=100; //开始的角度 var angle=-90; for(var i=0;i<data.length;i++){ canvas.beginPath(); canvas.moveTo(x0,y0); var angle1=data[i].value*360; //开始角度结束角度 var start=angle*Math.PI/180; var end=(angle+angle1)*Math.PI/180; canvas.arc(x0,y0,r0,start,end,false); canvas.fillStyle=data[i].color; canvas.fill(); //绘制文字 var text=data[i].title; //绘制文字放置的角度 var textAngle=angle+1/2*angle1; //文字要放置的坐标 var x,y; x=x0+Math.cos(textAngle*Math.PI/180)*(r0+20); y=y0+Math.sin(textAngle*Math.PI/180)*(r0+20); //如果文字在圆形的左侧 if(textAngle>90 && textAngle<270) { canvas.textAlign='end'; } canvas.fillText(text,x,y); //不停的改变初始角度 angle+=angle1; } </script> </body> </html>

柱状图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #a1{ border: 1px solid red; } </style> </head> <body> <canvas id="a1" width="600" height="600"></canvas> <script type="text/javascript"> var a1=document.getElementById('a1'); var canvas=a1.getContext('2d'); //原点坐标 x，y var x=100;y=400; canvas.fillText(0,x,y+20); //x轴 canvas.beginPath(); canvas.moveTo(x,y); canvas.lineTo(400,400); canvas.lineTo(400-20,400-20); //起点 canvas.moveTo(400,400); canvas.lineTo(400-20,400+20); canvas.strokeStyle='blue'; canvas.stroke(); canvas.fillText('x',400,420); canvas.textAlign='left'; //y轴 canvas.beginPath(); canvas.moveTo(x,y); canvas.lineTo(100,100); canvas.lineTo(100-20,100+20); canvas.moveTo(100,100); canvas.lineTo(100+20,100+20); canvas.strokeStyle='red'; canvas.stroke(); canvas.fillText('y',100,80); canvas.textAlign='right'; canvas.beginPath(); canvas.moveTo(x+50,y); canvas.lineTo(x+50,200); canvas.lineTo(x+80,200); canvas.lineTo(x+80,y); canvas.fillStyle='red'; canvas.fill(); canvas.fillText('数学',x+75,180); canvas.textAlign='center'; canvas.beginPath(); canvas.moveTo(x+100,y); canvas.lineTo(x+100,300); canvas.lineTo(x+130,300); canvas.lineTo(x+130,y); canvas.fillStyle='orange'; canvas.fill(); canvas.fillText('语文',x+100+15,290); canvas.textAlign='center'; canvas.beginPath(); canvas.moveTo(x+150,y); canvas.lineTo(x+150,200); canvas.lineTo(x+180,200); canvas.lineTo(x+180,y); canvas.fillStyle='green'; canvas.fill(); canvas.fillText('化学',x+150+15,180); canvas.textAlign='center'; </script> </body> </html>

折线图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #a1{ border: 1px solid red; } </style> </head> <body> <canvas id="a1" width="600" height="600"></canvas> <script type="text/javascript"> var a1=document.getElementById('a1'); var canvas=a1.getContext('2d'); //原点坐标 x，y var x=100;y=400; canvas.fillText(0,x,y+20); //x轴 canvas.beginPath(); canvas.moveTo(x,y); canvas.lineTo(400,400); canvas.lineTo(400-20,400-20); //起点 canvas.moveTo(400,400); canvas.lineTo(400-20,400+20); canvas.strokeStyle='blue'; canvas.stroke(); canvas.fillText('x',400,420); canvas.textAlign='left'; //y轴 canvas.beginPath(); canvas.moveTo(x,y); canvas.lineTo(100,100); canvas.lineTo(100-20,100+20); canvas.moveTo(100,100); canvas.lineTo(100+20,100+20); canvas.strokeStyle='red'; canvas.stroke(); canvas.fillText('y',100,80); canvas.textAlign='right'; //折线图 canvas.beginPath(); canvas.moveTo(x+20,y-20); canvas.lineTo(x+60,y-40); canvas.lineTo(x+80,y-10); canvas.lineTo(x+100,y-60); canvas.lineTo(x+120,y-80); canvas.lineTo(x+150,y-100); canvas.lineTo(x+180,y-120); canvas.strokeStyle='#000'; canvas.stroke(); </script> </body> </html>

Processed: 0.010, SQL: 8