Jquery Circleプログレスバーの値が100％以上

Question

Circlefuls（https://github.com/pguso/jquery-plugin-circliful）を参照してjQueryサークルのプログレスバーに取り組んでいます。このプラグインはすべて正常に動作しますが、一部のシナリオでは私のパーセンテージは100％を超えています。パーセンテージの値が120％の場合、サークルは100％で完全に塗りつぶされ、次の20％では同じ色でオーバーラップしているように見えます。この場合、エンドユーザの視点からは、それらは変化を見ることができず、混乱するように見える。だから私はいくつかのバリエーションがいくつかの異なる色の余分な20％がいくつかの他のものであることを示す必要があります。ここで私は私は私の質問が正しいかどうか分からないhttps://jsfiddle.net/heh12u5v/7/

<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

は時々物事はあなたが想像ほどきちんとしていない..です

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(){ 
 
    \t $("#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に達すると、残りの値に対して3番目に細いものを追加します。このようにして

：

1. は、我々は我々がパーセントが100％を通過するときに "余分な" 正確に開始してい0
2. % 120からスムーズ割合カウントを保つ

はい。

Answer 2

あなたは120が出て、その後120であれば、それは他の

var value = (120/120)*100; 

が好きでなければならないようにあなたには、いくつかの値の値で割り必要以上の割合を表示したい場合は、ハード値は、実際に何であるか、あなたが与えている値

var value = (120/out_of_value)*100; 

Answer 3

こんにちは、このソリューションをチェックアウトしてください：JSFiddle （私はivascuのjsfiddle @madalin変更しました）。次のように思う方がいいかもしれません。

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>