множественный прогресс на той же странице

Question

Вдохновляю себя от this answer, я хочу сделать несколько кругов прогресса на своей странице (около 30). Он отлично работает для одного, но я не получаю круг для значений. Тем не менее, я получаю процент, отображаемый правильно.

Я пробовал различную вещь, добавляя к большинству вариантов [count], но все же круг не нарисован для каждой ячейки.

Я добавил свой код в this Fiddle.

Вы видите, что не так?

Answer 1

Ваша drawCircle функция должна немного больше информации (СТХ и радиус)

var drawCircle = function(ctx, radius, color, lineWidth, percent) { 
    percent = Math.min(Math.max(0, percent || 1), 1); 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); 
    ctx.strokeStyle = color; 
    ctx.lineCap = 'round'; // butt, round or square 
    ctx.lineWidth = lineWidth; 
    ctx.stroke(); 
}; 

и вам нужно передать ему эту информацию при ее использовании:

drawCircle(ctx[count], radius[count], '#efefef', options[count].lineWidth, 100/100); 
drawCircle(ctx[count], radius[count], color[count], options[count].lineWidth, options[count].percent/100); 

как здесь: https://fiddle.jshell.net/6ooL53pp/3/