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>

你可能感兴趣的:(svg,svg)