Jquery圆形进度条值大于100%

Question

我正在参考 Circlefuljs (https://github.com/pguso/jquery-plugin-circliful). Everything works fine in this plugin, but in some scenarios my percentage reaches more than 100%. If the percentage value is 120% the circle is filled fully for its 100% and it seems to be overlapped with the same color for the next 20%. In this case, from the end user point of view, they cant see the variation and it seems to be confusing. So I need some variation to show that extra 20% in some different colors are some other things. Here is my snippet I tried with https://jsfiddle.net/heh12u5v/7/

制作一个 jQuery 圆形进度条

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
    <div id="test-circle"></div>
</div>

var value = 120
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
  });
});

我不知道我的问题对不对，但是我遇到了这种情况。有什么可能的方法可以做到这一点，以便额外的 20% 百分比显示为带有某种颜色的细线？如果有任何事情请向我建议。这对我很有帮助。提前致谢。

Answer 1

你给出的值实际上是一个硬值，如果你想显示百分比而不是你应该将它除以某个值，比如如果 120 等于 120 那么它应该像

    var value =  (120/120)*100;

其他

    var value = (120/out_of_value)*100;

Answer 2

您好，请查看此解决方案：JSFiddle （我修改了@madalin ivascu jsfiddle）。可能你想要一些像下面这样的想法。

Javascript:

var value = 120; // here your dynamic value
var extravalue=0;
if(value>100)
{
    extravalue=value-100;
  value=100;
}

$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value
  },function(){
    if(extravalue!=0)
    {
       $("#test-circle2").circliful({
            animationStep: 5,
            foregroundBorderWidth: 15,
            backgroundBorderWidth: 15,
            backgroundColor:"none",
            foregroundColor: '#009900',
            percent: extravalue
        },function(){
            alert("completed");
        });    
    }
  });
});

HTML :

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
    <div id="test-circle"></div>
  <div id="test-circle2"></div>
</div>

Answer 3

有时候事情并没有想象中那么整洁..

var value = 120
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
  });
  
  if(value > 100){
    var extra = value - 100;
    $("#test-circle-time").circliful({
      animationStep: 5,
      foregroundBorderWidth: 0,
      backgroundBorderWidth: 0,
      percent: 100,
      percentageTextSize:0
    },function(){
     $("#test-circle-extra").circliful({
        animationStep: 5,
        foregroundBorderWidth: 8,
        backgroundBorderWidth: 8,
        percent: extra,
        backgroundColor: "none",
        foregroundColor:'#a33',
        percentageTextSize:0
      });
    });
  }
});

#circle-container{
  postition:relative;
}
#circle-container > div{
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div id="circle-container">
  <div id="test-circle"></div>
  <div id="test-circle-time"></div>
  <div id="test-circle-extra"></div>
</div>

我们所做的是，如果该值大于 100，我们添加另一个同时运行的圆圈，它是不可见的，并且只到 100。这让我们知道第一个圆圈何时达到 100%。然后当达到 100 时，我们为剩余值添加第三个稀释剂。

这样：

我们保持百分比从 0 到 120% 的平稳计数
当百分比超过 100%

是的。

Jquery圆形进度条值大于100%

Jquery Circle progress bar value more than 100%

jquery

geometry

progress-bar