用canvas画环形图

 var ratios = [['35%','30%','20%','10%','5%'],['20%','10%','35%','5%','30%'],['25%','15%','15%','25%','20%']];
//画出多个环形图$('.canvas').each(function(){for(var i =0; i<ratios.length;i++){draw( $(this), ratios[i]);}});function draw(canvas, ratio){var colorArray = ['#4197e7','#e40077','#8ec31f','#e7aa41','#e77c41'];var context = canvas.getContext('2d');var endDeg, beginDeg = 2;//起始弧度for (var i = 0;i<ratio.length;i++){context.beginPath();endDeg = beginDeg+parseFloat(ratio[i])/100*2*Math.PI;context.arc(70,70,55,beginDeg,endDeg);beginDeg = endDeg;context.lineWidth=20;context.strokeStyle = colorArray[i];context.stroke();}}

用canvas画环形图相关推荐

用python画渐变的圆_python画环形图的方法
本文实例为大家分享了python画环形图的具体代码,供大家参考,具体内容如下 import os import pandas as pd import matplotlib.pyplot as plt ...
用python画环形图
import osimport pandas as pd import matplotlib.pyplot as plt import random import numpy as np# 获取渐变色 ...
使用canvas画折线图和曲线图
使用canvas画折线图和曲线图贝塞尔曲线如果想要在p0=>p2的过程中经过p1,那么需要计算出pc的值,在canvas之中作为控制点二次贝塞尔曲线转换为三次上面只是简单介绍,具体的参考文 ...
微信小程序canvas画价格走势图（三）
今天继续更新在微信小程序上用canvas画价格走势图.上一篇讲了图上主要的部分,也就是折线图的绘制.假如我在我的绘图主函数中只调用了绘制折线图的函数,效果是这样的: 可以说除了作为坐标背景的<i ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
微信小程序canvas绘制环形图（含动画）
页面版效果图思路 1.使用一个canvas绘制(带动画): 2.通过画弧线,设置线宽,来实现圆环效果: 3.计算每段圆弧的起始角度和终止角度,用递归做动画: 绘制完第一段圆弧块–>再绘制下一 ...
python画环形图_用Python把图做的好看点：用Matplotlib画个环形图
P老板:小Lo啊,你觉得这几个图好看吗我:好看,好看 P老板:我也觉得,这个月的月报,就用这个把,你给我几个,我看看我:..... 于是乎,我们今天的目标是什么!!! 画个环形图!!! 今天,我们 ...
python画环形图_Python通过matplotlib画双层饼图及环形图简单示例
摘要:这篇Python开发技术栏目下的"Python通过matplotlib画双层饼图及环形图简单示例",介绍的技术点是"matplotlib.Python.简单示例.饼 ...
微信小程序canvas画价格走势图（五）
最近比较忙,所以趁着今年的最后一个周末,来把最后两篇完结掉.这是倒数第二篇了,这一篇的内容很简单,讲的是细节的绘制,也就是底部的刻度线和日期的绘制,以及一个小小的总结. 目前我们完成了canvas的准 ...

用canvas画环形图

用canvas画环形图相关推荐

最新文章

热门文章