动态空心圆图

动心.

于 2018-12-14 15:31:01 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/weixin_43893437/article/details/85004595

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态空心饼图</title>
    <style>
    </style>
</head>
<body>
<div id="container"></div>
</body>
<script src="../day35/bar.js"></script>
<script>
    var obj = {
        id: "container",
        width: 500,
        height: 300,
        lineWidth:50,
        lineColor:"red",
        innerR:30,
        outerR:100,
        data: [
            {
                name: "不及格",
                num: 3,
                color: "#ceb241"
            },
            {
                name: "及格",
                num: 13,
                color: "#55a1a1"
            },
            {
                name: "良好",
                num: 30,
                color: "#882244"
            },
            {
                name: "优秀",
                num: 3,
                color: "#448822"
            },
            {
                name: "满分",
                num: 1,
                color: "#8a8a8a"
            }
        ]
    };
    drawRing(obj);
</script>
</html>

外部JS:

function drawRing(obj) {
    var id = obj.id;
    var width = obj.width || 500;
    var height = obj.height || 300;
    var data = obj.data;
    var length = data.length;
    var lineColor = obj.lineColor || "red";
    var innerR = obj.innerR || 30;
    var outerR = obj.outerR || 100;
    var cirqueR = (outerR - innerR) / 2 + innerR;//实际空心圆的半径
    var lineWidth = outerR - innerR;
    var ox = width / 2;//圆心x
    var oy = height / 2;//圆心y
    var sum = 0;
    for (var i = 0; i < length; i++) {
        sum += data[i].num;
    }
    var container = document.getElementById(id);
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    canvas.style.border = "1px solid red";
    container.appendChild(canvas);
    var cvs = canvas.getContext("2d");
    var rates = [];
    var m=0;
    var increments=[];
    var start=[0];
    var end=[];
    var internal=[];
    /*动态*/
    for (var j = 0; j < length; j++) {
        rates.push(data[j].num / sum);
        increments.push((rates[j]*2*Math.PI)/100);
        end.push(start[j]+rates[j]*2*Math.PI);
        start.push(end[j]);
        internal.push("internal"+j);
    }
    start.pop();
    console.log(end);
    cvs.lineWidth = lineWidth;
    /*动态空心圆*/
    for(var i=0;i<length;i++){
        (function (i) {
            internal[i]=setInterval(function () {
                m++;
                cvs.strokeStyle= data[i].color;
                console.log(data[i].color);
                cvs.beginPath();
                cvs.arc(ox,oy,cirqueR,start[i],start[i]+increments[i]*m);
                cvs.stroke();
                if((start[i]+increments[i]*m>=end[i])){
                    clearInterval(internal[i]);
                }
            },10);
        })(i);
    }
    /*图例*/
    var rectStartOx = 20;
    var rectStartOy = 20;
    var text = "";
    for (var k = 0; k < length; k++) {
        cvs.beginPath();
        cvs.fillStyle = data[k].color;
        cvs.rect(rectStartOx, rectStartOy, 20, 10);
        cvs.closePath();
        cvs.fill();
        cvs.font = "12px 宋体";
        text = data[k].name + ":" + Math.round(rates[k] * 10000 / 100) + "%";
        cvs.fillText(text, 50, rectStartOy + 9);
        rectStartOy += 20;
    }

}