Question

从this answer鼓舞自己，我想在我的页面中进行几个进步（约30个）。它适用于一个人，但我没有得到价值观的圆圈。然而，我得到了正确显示的百分比。

我尝试了各种各样的事情，在大多数选项中添加了[count]但是仍然没有为每个单元格绘制圆圈。

我在this Fiddle添加了我的代码。

你能看出错误吗？

Answer 1

您的drawCircle函数需要更多信息（ctx和radius）

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/

多个进度圈同一页面

1 个答案: