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

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;//半径rvar 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，yvar 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，yvar 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>

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

QT绘制饼图+柱状图+折线图
项目需要使用到不同的统计图案的方法来显示统计数据包括:饼图.柱状图.折线图. 饼图的实现具体实现代码如下: 首先需要一个QChartView来存放饼图,实现如下: 拖拽一个QGraphicsVie ...
微信小程序Canvas绘制曲线图饼图柱状图雷达图蛛网图实现（附源码）
小程序绘制曲线图 <view class="container"><canvas canvas-id="lineCanvas" disable ...
Excel柱状图，饼图，折线图
1. 打开文件用Excel打开"Test1"文件 2. 选择数据按住鼠标左键,选中指定数据区域 3. 数据选中之后,点击EXCEL菜单的"INSERT"选项 ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
python的matplotlib库绘制条形图、散点图、饼图、折线图
python的matplotlib库绘制条形图.散点图.饼图.折线图当我们学会了爬虫,抓取到了一些数据,接下来就是做数据分析了.本文章介绍绘制图形的基本代码. 打开cmd用pip 安装,若输入pip ...
php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...
柱状图折线图混合使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>柱状图 ...
Origin: 双Y轴 | 柱状图 | 折线图 | 垂线散点图的结合绘制
origin | 双Y轴 | 添加图层 | 柱状图 | 折线图 | 散点图一.前言二.数据准备三.绘图 3.1 图层1-绘制柱状图 3.2 图层2-折线图的绘制 3.2.1 添加新图层-折线图 ...
echarts 其他样式折线重叠_echarts 同一div同时显示饼图和折线图且两图联动望大佬赐教...
需求是一个div同时显示饼图和折线图我在echarts官网找到了这样得模板但是问题是他的数据都是写死得而我的是异步获取不知道怎么弄请各位大佬赐教下为代码和需求图片 setTimeout( ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...

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

canvas画图

圆饼图

柱状图

折线图

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

最新文章

热门文章