Jquery Kreis Fortschrittsbalkenwert mehr als 100%

Question

Ich arbeite an einem jQuery Kreis Fortschrittsbalken mit Bezug auf Circlefuljs (https://github.com/pguso/jquery-plugin-circliful). Alles funktioniert gut in diesem Plugin, aber in einigen Szenarien erreicht mein Prozentsatz mehr als 100%. Wenn der Prozentwert 120% beträgt, wird der Kreis für seine 100% vollständig ausgefüllt und scheint für die nächsten 20% mit der gleichen Farbe überlappt zu sein. In diesem Fall können sie aus Sicht des Endbenutzers die Variation nicht sehen und es scheint verwirrend zu sein. Also brauche ich etwas Variation, um zu zeigen, dass zusätzliche 20% in einigen verschiedenen Farben andere Dinge sind. Hier ist mein Snippet ich mit https://jsfiddle.net/heh12u5v/7/ versucht

<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, 
    }); 
}); 

Ich weiß nicht, ob meine Frage richtig ist oder nicht, aber ich Gesicht dieses Szenario. Gibt es eine Möglichkeit, dies zu tun, so dass zusätzliche 20% Prozent mit einer dünnen Linie mit etwas Farbe angezeigt wird? Wenn irgend etwas, bitte, schlagen Sie es mir vor. Es wird sehr hilfreich für mich sein. Danke im Voraus.

Answer 1

Manchmal sind die Dinge nicht so ordentlich wie Sie sich vorstellen ..

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>

was wir getan haben war, wenn der Wert größer als 100 ist, fügen wir einen weiteren Kreis hinzu, der zur gleichen Zeit läuft, unsichtbar ist und nur zu 100 geht. Dies ermöglicht es uns zu wissen, wann der erste Kreis 100% erreicht. Wenn 100 erreicht ist, fügen wir einen dritten Verdünner für den verbleibenden Wert hinzu.

Auf diese Weise:

1. Wir halten den Prozentsatz Zählung reibungslos von 0 bis 120%
2. Wir haben die "extra" genau starten, wenn der prozentuale Anteil
100% durch

Ja.

Answer 2

Der Wert, was Ihr geben tatsächlich ein harter Wert ist, wenn Sie Prozent zeigen wollen, als Sie es von einem gewissen Wert Wert teilen sollte wie wenn 120 120 aus, dann sollte es

var value = (120/120)*100; 

sonst

mögen

var value = (120/out_of_value)*100; 

Answer 3

Hallo bitte diese Lösung finden Sie unter: JSFiddle (i @madalin Ivascu jsfiddle geändert haben). Vielleicht möchtest du etwas wie unten finden.

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>