Circliful插件

Question

我在我的应用中使用this plugin。几乎一切都很好，除了一件事 - 在做出更大的半径之后，进度条没有正确显示。这段代码的半径更大：

$('#circle').find('circle').attr('r', 90);
$('#circle').find('.border').attr('stroke-dasharray', 0);

现在进度条被打破，值为100％，但条形图仅填充近66％。可能是什么问题？这是一个截图：

Answer 1

导致问题的原因是＆＃34; stroke-dasharray＆＃34;。

因为中风-dasharray的长度并没有因为＆＃34; r＆＃34;而变得更大。 ，当圆圈较大时，其行程长度不变。

你设置的第一个圆圈的stroke-dasharray非常好。

问题出在第二圈。

由于＆＃34; r＆＃34;（半径）增加，它的周长更长。但是第二个圆圈stroke-dasharray仍然是（162,20000），其中162是行程长度。

有两种方法可以解决这个问题。

第一个是简单的。以您的情况为例：

$('#circle').width('number') #number is  how big you want for circle

圆圈与包装纸的宽度成比例变化，因此您不必担心行程长度。

第二个有点复杂。

big_circle = 90(new raidus)*3.14( which is π )*percent( in your case is 100% )
$('#circle').find('circle').attr('r', 90);
$('#circle').find('.border').attr('stroke-dasharray', 0);
$('#circle').find('.circle').attr('stroke-dasharray', 'big_circle, 20000');

如果circliful无法计算新的周长，我们自己做。

希望这些信息有用。