【H5】 svg画扇形饼图

【H5】 svg画扇形饼图

效果图如下：

封装代码如下：

代码内有详细注解哦！

<!DOCTYPE html>
<html lang="en"><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>* {margin: 0;padding: 0;}#wrap {width: 300px;height: 300px;/* border:1px solid #000; */margin: 50px auto 0;}</style>
</head><body><div id="wrap"><svg id='svg' xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'></svg></div><script>let svg = document.getElementById('svg');//creatTagEle是定义的一个生成path标签的方法//6.传值：tag为path标签  tagAttr:标签的样式属性(fill填充颜色，d线路样式)function creatTagEle(tag, tagAttr) {let svgNS = "http://www.w3.org/2000/svg";   //svg的规则//createElementNS()方法创建带有指定命名空间的元素节点//                  svgNS是规定svg的规则    tag为path标签let oTag = document.createElementNS(svgNS, tag)//for...in...遍历到里面的标签属性for (let attr in tagAttr) {//在path标签里设定样式：attr键 与 tagAttr[attr]键的值oTag.setAttribute(attr, tagAttr[attr])}return oTag;}//oTag就是一个path标签 <path fill="#24acf2" d="M270 150A120 120 0 0 1 224 243 L193 204 70 0 0 0 220 150"></path>//2.主执行方法  (扇形百分百数组，伞形颜色数组，运动时间ms)function move(num, color, time) {let nowTime = new Date(); //获取初始时间//外边的半径let outR = 120;//内边的半径let inneR = 70;//中心点（ centerX,centerY ）let centerX = 150;let centerY = 150;let n = 0;  //定时器计入执行的次数//下面的3→4→5→6→7一直循环执行 直到prop=1才结束let timer = setInterval(function () {let prop = (new Date() - nowTime) / time;  //  (当前时间-初始时间)/1000msif (prop >= 1) {  //设置一秒钟后动画完成prop = 1clearInterval(timer)  //清除定时器 清除定时器后下面任然会执行一遍}//一共运动的角度let angleNum = 0;//动画的起始坐标，需要用数组来进行取值；let outXY = [{ x: 270, y: 150 }];let inneXY = [{ x: 220, y: 150 }];//3.计算外圆与内圆运动到的坐标；存储到 outXY 与 inneXY数组内for (let i = 0; i < num.length; i++) {//需要得出每一部分所占的比例值；let aNum = num[i] / 100 * 360;  //计算多少度angleNum += aNum; // 每一份加起来的最后总的结果 等于360if (i == num.length - 1) {angleNum = 360;}  //最后保证圆为360度//外圆的坐标   当prop等于1，每个扇形区块才能达到100%的显示 从而形成一个饼图let outX = Math.cos(angleNum * prop * Math.PI / 180) * outR + centerX;let outY = Math.sin(angleNum * prop * Math.PI / 180) * outR + centerY;outXY.push({ x: outX, y: outY })  //把每一个点都放到数组里边去；//内圆的坐标let inneX = Math.cos(angleNum * prop * Math.PI / 180) * inneR + centerX;let inneY = Math.sin(angleNum * prop * Math.PI / 180) * inneR + centerY;inneXY.push({ x: inneX, y: inneY })  //把每一个点都放到数组里边去；}// console.log(outXY);  由这里打印可以看出移动点(x,y)都是慢慢变"大", 所以每个扇形区面积都是慢慢变大的//4.画上去 通过每个扇形区运动的(x,y)点 填充对应区域的颜色for (let i = 0; i < outXY.length - 1; i++) {  //每一次for循环填充一个扇形区//5.生成path标签let oPath = creatTagEle('path', {fill: color[i],//渲染颜色值；//填充一个扇形区的外弧与内弧d: `M${outXY[i].x} ${outXY[i].y}A${outR} ${outR} 0 0 1 ${outXY[i + 1].x} ${outXY[i + 1].y}L${inneXY[i + 1].x} ${inneXY[i + 1].y}A${inneR} ${inneR} 0 0 0 ${inneXY[i].x} ${inneXY[i].y}`});//7.将创建的oPath标签添加到画布上svg.appendChild(oPath)  //一轮for完毕后填充了所有的扇形区 但每个扇形区面积并未达到100% 最后一次填充才为100%}//将前面绘画的path删除if(n++){for(let i=0; i<num.length; i++){console.log(1)svg.removeChild(svg.childNodes[1]) //删除}}}, 1000 / 60);  //一秒钟60帧为流畅}//1.程序入口 参数一为饼图每一部分的百分百  参数二为颜色 （两个数组长度必须对应相等） 参数3为动画执行的时间move([15.5, 32.11, 22.22, 10, 13.14, 7.03],["#24acf2", "#dd5044",  "yellow", "orange", "#a83d34","purple"],2000)</script>
</body>
</html>

【H5】 svg画扇形饼图相关推荐

Echarts通过svg画扇形例子，含矩形、三角形等
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrato ...
SVG画扇形，可以改变数量、扇形角度、扇形方向
效果图有点low,忍一忍吧最近做项目,需求是在地图上实现一个基站,虽然基站是由扇形组成的2D图标(就像一个风扇) 来个图吧: 但是有个要求用户可以配置任意多个扇形,任意角度大小,任意方向的扇形,后 ...
hdc mfc 画扇形图_canvas画扇形、饼图
画扇形的方法方法一:起始角度是0,那么第一条线就是line(r,0),通过旋转扇形的角度,第二条线就是line(r,0) //圆弧 ctx.save(); ctx.translate(100, 10 ...
R语言使用pie函数可视化饼图（pie chart）、为饼图添加百分比信息、使用plotrix包可视化3D饼图、使用plotrix包可视化扇形饼图
R语言使用pie函数可视化饼图(pie chart).为饼图添加百分比信息.使用plotrix包可视化3D饼图.使用plotrix包可视化扇形饼图目录
python怎么画多重饼状图_Python通过matplotlib画双层饼图及环形图简单示例
(1) 饼图(pie),即在一个圆圈内分成几块,显示不同数据系列的占比大小,这也是我们在日常数据的图形展示中最常用的图形之一. 在python中常用matplotlib的pie来绘制,基本命令如下所示 ...
hdc mfc 画扇形图_科学网—画扇形图（idl程序） - 张国印的博文
IDL画扇形图还是有些麻烦的,今天中午没午休,以红移和RA为例写了程序,希望以后能用上 pro sector set_plot,'ps' device,file='F:Aprilmap.ps' REA ...
[html] 使用svg画一个三角形
[html] 使用svg画一个三角形效果 Screen Shot 2020-11-13 at 14 39 20 说明 svg 定义svg元素 viewBox 定义svg的画布大小,0 0 100 1 ...
[html] 使用svg画一个爱心
[html] 使用svg画一个爱心 <head><style>*,*:before,*:after {box-sizing: border-box;margin: 0;padd ...
[html] 使用svg画出一个矩形
[html] 使用svg画出一个矩形 <svg width="400" height="200" viewbox="0 0 2000 1000& ...

【H5】 svg画扇形饼图

效果图如下：

封装代码如下：

【H5】 svg画扇形饼图相关推荐

最新文章

热门文章