canvas实现饼状图
效果图如下:
html:
<canvas id="myCanvas" width="500" height="500"></canvas>
js:
toCanvas(arr) {
let canvas = document.getElementById('myCanvas');//获取canvas
let ctx = canvas.getContext('2d');//通过getContext获取画图的环境
let cont = 0; //总数
let start = 0; //起始弧度
let x = 250,
y = 250; //圆点坐标
let startCoordinate = {
start: 200,
end: 100
}; //绘制起点坐标
arr.forEach((item) => {
cont += item.number;
}); //获取number之和
arr.forEach((item) => {
ctx.beginPath(); //初始化路径
let prop = item.number / cont; //计算比例
let radian = prop * (Math.PI * 2); //计算弧度
ctx.arc(x, y, 100, start, start + radian, false);//根据比例和弧度画圆
ctx.lineTo(x, y); //连接圆心画线
ctx.fillStyle = item.color; //设置圆弧颜色
ctx.fill(); //填充样式
let x1 = x + Math.cos(radian / 2 + start) * 100;//获取圆弧中间点X坐标
let y1 = y + Math.sin(radian / 2 + start) * 100;//获取圆弧中间点y坐标
ctx.moveTo(x1, y1);//画笔移动到圆弧中点
ctx.lineTo(x1 + 30 * Math.cos(radian / 2 + start), y1 + 30 * Math.sin(radian / 2 + start));//在圆弧中点和圆心的连线上画30单位长度的线
let proNumber = null;
if (Math.cos(radian / 2 + start) > 0) {
proNumber = 1
} else {
proNumber = -1
}//判断起点半径与当前圆弧线所成角的余弦值是为负数/正数
ctx.lineTo(x1 + 30 * Math.cos(radian / 2 + start) + proNumber * 30, y1 + 30 * Math.sin(radian / 2 + start));//在之前线的基础上画一条30单位长度的水平线
ctx.fillText(item.name, x1 + 30 * Math.cos(radian / 2 + start) + proNumber * 20, y1 + 30 * Math.sin(radian / 2 + start) - 5, 30);//在线上填充字体,设置字体的坐标,最大长度
ctx.strokeStyle = item.color;//设置线条和字体的颜色
ctx.font = "bold 10px consolas";//设置字体的样式
start += radian;//每次圆弧渲染完成将弧度累加作为下个圆弧的初始弧度
ctx.stroke();//渲染线条
})
let small = new Path2D(ctx);//创建新的一个路径
small.arc(x, y, 60, 0, Math.PI * 2, false);//画圆
ctx.fillStyle = "#fff";//设置圆的颜色
ctx.fill(small);//填充small
},
let arrs = [{
name: '1号',
color: '#CD853F',
number: 500
},
{
name: '2号',
color: '#FFA500',
number: 500
},
{
name: '3号',
color: '#FF4500',
number: 200
},
{
name: '4号',
color: '#8B0000',
number: 300
},
{
name: '5号',
color: '#DAA520',
number: 50
},
]
this.toCanvas(arrs);
有些不满意的是文字没有和底下的线条保持一致的margin,也找了很多方法依然没有成功。有大神看到了麻烦指点一下。万分感谢。
canvas实现饼状图的更多相关文章
- 封装构造函数,用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- canvas学习之饼状图
接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...
- canvas+js画饼状图
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- canvas制作柱形图/折线图/饼状图,Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- HTML5之Canvas绘图实例——饼状图
实现饼状分布画图(如下):调试环境:Firefox
- [BOT]自己动手实现android 饼状图,PieGraphView,附源码解析
本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 基于HTML5 Canvas的饼状图表实现教程
昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表 ...
随机推荐
- 【Python笔记】1、格式化输出(%用法和format用法)
转自:https://www.cnblogs.com/fat39/p/7159881.html 一.格式化输出1.整数的输出%o —— oct 八进制%d —— dec 十进制%x —— hex 十六 ...
- C函数之index、strtoul
index函数 函数定义: #include<strings.h> char *index(const char *s, int c); 函数说明: 找出参数s字符串中第一个出现参数c的地 ...
- 07-图5 Saving James Bond - Hard Version (30 分)
This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...
- 【Spring Boot】内嵌容器
Spring Boot内嵌容器支持Tomcat.Jetty.Undertow. tomcat容器 spring boot 的web应用开发必须使用spring-boot-starter-web,其默认 ...
- 东芝300D粉盒清零
东芝300D粉盒清零 1:打开前盖 2:按"OK"键3秒,等 显示 "更换硒鼓"(注:不用选 是/否,直接进入第3步) 3:按"启用"键 4 ...
- ubuntu笔记2-误删dpkg的/var/lib/dpkg/info文件夹
由于误删了dpkg的/var/lib/dpkg/info文件夹,导致安装文件的时候报错 错误提示:E: Sub-process /usr/bin/dpkg returned an error code ...
- chrome如何禁用js代码
chrome如何禁用js代码 一.总结 一句话总结: 设置-->高级-->隐私设置和安全性-->网站设置-->javascript 中禁止javascript即可 二.chro ...
- [Web] mobx 异步操作
转载自:https://www.jianshu.com/p/66dd328726d7 异步action action只能影响正在运行的函数,而无法影响当前函数调用的异步操作 .action 包装/装饰 ...
- idea中如何
idea工具maven projects里面有9种生命周期,生命周期是包含在一个项目构建中的一系列有序的阶段. 一.最常用的两种打包方法: 1.clean,package(如果报错,很可能就是jar依 ...
- windows server core 2016 IIS远程管理的那些坑
打算从win10访问数据中心版2016 core,结果IIS远程管理不了. 需要修改core上防火墙和注册表,开启一些相关服务. 具体需要如下操作. 1.win10 启用IIS管理特性 2.参考htt ...