如何将画布圆形进度条放置在网格中？

如何解决如何将画布圆形进度条放置在网格中？

我正在尝试使用此Codepen在个人资料页面上网格容器的每个部分内创建单独的进度圈，但是我只有一个可见的圆圈，其他的只是没有进度圈的空方块。 / p>

有人可以告诉我哪里出了问题吗？我试图重命名类并调整了代码，但这没有用。

HTML的一部分：

<div class="grid-container">
    <div class="counter" data-cp-percentage="75" data-cp-color="#00bfeb"></div>
    <div class="counter" data-cp-percentage="65" data-cp-color="#EA4C89"></div>
    <div class="counter" data-cp-percentage="35" data-cp-color="#FF675B"></div>
    <div class="counter" data-cp-percentage="44" data-cp-color="#FF9900"></div>
</div>

CSS

.profile_intro {
    background: linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    margin-top: 0px;
    width: 100%;
    height: 20%;
}

.profilepic-img {
    vertical-align: center;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.userinfo {
    margin: auto;
    width: 50%;
    padding: 5px;
    text-align: center;
}

.useremail {
    margin-top: 5%;
}

table {
    border: 2px solid #cccccc;
    width: 80%;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: grey;
}

th,td {
    padding: 5px;
    text-align: center;
}

th {
    font-size: 18px;
}

.grid-container {
    display: grid;
    /*important!
         justify-content: space-evenly;

          grid-template-columns: auto auto; /*important!!
         /* grid-template-columns: 50px 50px; /*Make the grid smaller than the container*/
    */ grid-gap: 10px;
    background-color: #f1eee3;
    padding: 10px;
    align-content: center;
    left: 0px;
}

.grid-container>div {
    background-color: rgba(255,255,0.8);
    text-align: center;
    /* padding: 10px 0; */
    font-size: 3vw;
    border-radius: 25px;
    background: #faf8f4;
    width: 35vw;
    height: 35vw;
    box-shadow: 0 4px 8px 0 rgba(0,0.2),0 6px 20px 0 rgba(0,0.19);
    color: #383e3f;
    text-decoration-style: solid;
}


/*progress Bar */

h1 {
    background: rgba(255,0.8);
    box-shadow: 0px 1px 10px 2px rgba(0,0.2);
    border-bottom: 3px solid #00bfeb;
    font-size: calc(1em + 1vmax);
}

.counter {
    display: -webkit-inline-box;
    display: inline-flex;
    cursor: pointer;
    width: 300px;
    height: 300px;
    max-width: 100%;
    position: relative;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-size: calc(1em + 1vmin);
    -webkit-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 1px 10px 2px rgba(0,0.2);
    margin: 1em 0;
}

.percentage {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    right: 0;
    vertical-align: middle;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,0);
    }

JavaScript

    document.addEventListener("DOMContentLoaded",function() {

    var circleProgress = (function(selector) {
    var wrapper = document.querySelectorAll(selector);
    Array.prototype.forEach.call(wrapper,function(wrapper,i) {
    var wrapperWidth,wrapperHeight,percent,innerHTML,context,lineWidth,centerX,centerY,radius,newPercent,speed,from,to,duration,start,strokeStyle,text;

    var getValues = function() {
    wrapperWidth = parseInt(window.getComputedStyle(wrapper).width);
    wrapperHeight = wrapperWidth;
    percent = wrapper.getAttribute('data-cp-percentage');
    innerHTML = '<span class="percentage"><strong>' + percent + 
     '</strong> %</span><canvas class="circleProgressCanvas" 
     width="' + (wrapperWidth * 2) + '" height="' + wrapperHeight * 
    2 + '"></canvas>';
    wrapper.innerHTML = innerHTML;
    text = wrapper.querySelector(".percentage");
    canvas = wrapper.querySelector(".circleProgressCanvas");
    wrapper.style.height = canvas.style.width = canvas.style.height 
    = wrapperWidth + "px";
    context = canvas.getContext('2d');
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;
    newPercent = 0;
    speed = 1;
    from = 0;
    to = percent;
    duration = 1000;
    lineWidth = 25;
    radius = canvas.width / 2 - lineWidth;
    strokeStyle = wrapper.getAttribute('data-cp-color');
    start = new Date().getTime();
     };

     function animate() {
    requestAnimationFrame(animate);
    var time = new Date().getTime() - start;
    if (time <= duration) {
      var x = easeInOutQuart(time,to - from,duration);
      newPercent = x;
      text.innerHTML = Math.round(newPercent) + " %";
      drawArc();
       }
    }

    function drawArc() {
    var circleStart = 1.5 * Math.PI;
    var circleEnd = circleStart + (newPercent / 50) * Math.PI;
    context.clearRect(0,canvas.width,canvas.height);
    context.beginPath();
    context.arc(centerX,circleStart,4 * Math.PI,false);
    context.lineWidth = lineWidth;
    context.strokeStyle = "#ddd";
    context.stroke();
    context.beginPath();
    context.arc(centerX,circleEnd,false);
    context.lineWidth = lineWidth;
    context.strokeStyle = strokeStyle;
    context.stroke();

    }
     var update = function() {
    getValues();
    animate();
     }
     update();

    var btnUpdate = document.querySelectorAll(".btn-update")[0];
    btnUpdate.addEventListener("click",function() {
    wrapper.setAttribute("data-cp-percentage",Math.round(getRandom(5,95)));
    update();
     });
    wrapper.addEventListener("click",function() {
       update();
     });

     var resizeTimer;
      window.addEventListener("resize",function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      clearTimeout(resizeTimer);
      start = new Date().getTime();
      update();
       },250);
      });
    });


    function easeInOutQuart(t,b,c,d) {
     if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
     return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
     }

     });

     circleProgress('.counter');


     function getRandom(min,max) {
     return Math.random() * (max - min) + min;
     }
     });

解决方法

发现了这个错误：我的HTML中没有JavaScript中提到的某些元素。更改了类的名称，目前可以正常使用。谢谢大家！