svg 占比图利用定时器动态生成
因为定时器是异步回调函数,当主线程for循环完成后才会调用,次数变量为
最后一次的值,利用闭包解决变量作用域
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:780px;
height:400px;
margin:0 auto;
}
</style>
</head>
<body>
<div style="border:solid 1px orange;" class='box'>
<svg id='svg' width='100%' height='100%'
xmlns="http://www.w3.org/2000/svg">
<path d=''fill='none' stroke='blue'></path>
</svg>
</div>
<script>
window.onload=function(){
//命名空间
let svgNS="http://www.w3.org/2000/svg";
//获取父级元素
var div=document.querySelector('.box');
//获取svg
let svg=document.querySelector('#svg');
//获取path
var opath=svg.getElementsByTagName('path');
//占比例
var arrNum=[23.61,17.10,16.05,15.40,11.72,14.95];
var angle=360;
//累加的角度
var sumNum=0;
//内外圈半径
var outerR=120;
var innerR=70;
//中心坐标
var cx=200;
var cy=200;
//外圆起始坐标
var outerXY=[{x:320,y:200}];
//内圆起始坐标
var innerXY=[{x:270,y:200}];
var color=['red','orange','yellow','green','blue','purple'];
//循环比例获得内外圈坐标
for(var i=0;i<arrNum.length;i++)
{
//通过比例获取角度值
var angNum=arrNum[i]*360/100;
sumNum+=angNum;
//当最后一个比例时,将角度变成360,避免中途小数累加的误差
if(i==arrNum.length-1){
sumNum=360;
}
//三角函数获取角度偏离后圆弧上的坐标
//外圆
var outerX=120*Math.cos(sumNum*Math.PI/180)+cx;
var outerY=120*Math.sin(sumNum*Math.PI/180)+cy;
//内圆
var innerX=70*Math.cos(sumNum*Math.PI/180)+cx;
var innerY=70*Math.sin(sumNum*Math.PI/180)+cy;
outerXY.push({x:outerX,y:outerY});
innerXY.push({x:innerX,y:innerY});
}
//
//画扇形
for(var i=0;i<outerXY.length;i++){
if(i==outerXY.length-1)
{
break;
}
//闭包定时器
(function(i){
setTimeout(function(){
var opath=createTag('path',{'fill':color[i],'d':'M'+outerXY[i].x+" "+outerXY[i].y+"A"+outerR+" "+outerR+' 0 0 1 '+outerXY[i+1].x+" "+outerXY[i+1].y+"L"+innerXY[i+1].x+" "+innerXY[i+1].y+"A"+innerR+" "+innerR+" 0 0 0 "+innerXY[i].x+" "+innerXY[i].y+"Z"});
svg.appendChild(opath);
},i*100)
})(i)
//,'d':'M'+outerXY[i].x+" "+outerXY[i].y+"A"+outerR+" "+outerR+' 0 0 1 '+outerXY[i+1].x+" "+outerXY[i+1].y+"L"+innerXY[i+1].x+" "+innerXY[i+1].y+"A"+innerR+" "+innerR+" 0 0 0 "+innerXY[i].x+" "+innerXY[i].y+"Z"}
}
//创建标签
function createTag(tag,obj){
var oTag=document.createElementNS(svgNS,tag);
for(var attr in obj){
oTag.setAttribute(attr,obj[attr]);
}
return oTag;
}
}
</script>
</body>
</html>