用 canvas制作一个饼状图

这里的的代码可以直接拿走看哟，仅供参考

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas {border: 1px solid gray;margin: 50px auto;display: block;}</style>
</head><body><canvas id="cvs" width="800" height="500"></canvas><script>var ctx = document.getElementById('cvs').getContext('2d');var data=[{name:'java',color:'red',num:0.3},{name:'c#',color:'yellow',num:0.5},{name:'js',color:'blue',num:0.1},{name:'vue',color:'pink',num:0.1}];var startAngle=0;//开始角度var endAngle;//结束角//绘制图形for(var i in data){var item=data[i];//数据对象endAngle=item.num*2*Math.PI+startAngle;ctx.beginPath();//开启新路径ctx.fillStyle=item.color;//画笔颜色// console.log(item.color);ctx.moveTo(250,250);//指定圆心console.log(startAngle,endAngle);ctx.arc(250,250,200,startAngle,endAngle);//修改开始角度startAngle=endAngle;ctx.fill();}</script>
</body></html>

用 canvas制作一个饼状图相关推荐

php生成饼状图柱形图,求一个饼状图或柱状图php生成类或例子
求一个饼状图或柱状图php生成类或例子时间:2006/7/19 6:10:04 作者:佚名人气:268 PHP代码:---------------------------------------- ...
Python数据可视化 Pyecharts 制作 Pie 饼状图
大家好,我是Mr数据杨!想象一下,我们身处三国演义的时代,虎踞龙盘,英勇战将,智勇之士,都在这个乱世中扮演着重要的角色.假设吾辈正是郭嘉,手中握有整个魏国兵力的详细信息,但这仅仅是一堆数字,怎么把它变 ...
PHP之将canvas生成的饼状图生成图片
参考 https://blog.csdn.net/wxw_nini/article/details/82463749 https://blog.csdn.net/Byte_Dance/article/ ...
D3.js 第13课饼状图
本文制作一个饼状图. 在布局的应用中,最简单的就是饼状图,通过本课您将对布局有一个初步了解. 数据 var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直 ...
canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
利用Excel制作问卷的饼状图
在调研过程中,调研方法有多种:问卷法,访谈法等,而当我们采用问卷法的时候,需要进行统计数据,当然如果选择例如问卷星等网上问卷的话,可以省去自己制作数据饼状图或条形图等麻烦,但因为一些原因,必须使用纸质 ...
若依项目制作饼状图和柱状图
这里的是根据年两分段做一个饼状图,根据性别人数制作柱状图 echarts+vue 饼状图先写一个实体类,将查到的数据放在实体类中,写一个mapper->mapper.xml->contr ...
python立体感的饼状图如何做_AI教程：如何制作3D立体饼状图表？
原标题:AI教程:如何制作3D立体饼状图表? 辛辛苦苦分析一堆大数据,竟然没人看!到底怎么办?俗话说,有图有真相,一图胜千言,取悦了眼球,剩下的都好说.如果你正着手于从数据中洞察出有用信息,那你所需要 ...
android 最简单的饼状图
录制的gif图有点渣,但是实际效果还是可以的. 因为项目需要绘制饼状图,就很简单的饼状图带一个选中的效果,本来也想使用MPAndroidChart这个库的,但是觉得就实现一个效果引用整个库,对于一个有 ...

用 canvas制作一个饼状图

用 canvas制作一个饼状图相关推荐

最新文章

热门文章