easy-pie-chart Null Prozent wird als Punkt dargestellt?

Question

Wenn ich versuche, easy-pie-chart mit 0% zu verwenden, sehe ich immer noch einen kleinen Punkt, der an der oberen/12-Uhr-Position gerendert wird.

Siehe Screenshot. HTML/JS/CSS unten.

Irgendeine Idee, was ich falsch mache?

rendering of 0% HTML:

<span class="chart" data-percent="25"> 
<span class="percent">25</span> 
</span> 

JS:

$('.chart').easyPieChart({ 
    animate: 2000, 
    scaleColor: false, 
    lineWidth: 12, 
    lineCap: 'square', 
    size: 100, 
    trackColor: '#e5e5e5', 
    barColor: '#00FF00', 
    onStep: function(from, to, percent) { 
     $(this.el).find('.percent').text(Math.round(percent)); 
    } 
}); 

CSS:

.chart { 
    position: relative; 
    display: inline-block; 
    width: 110px; 
    height: 110px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    text-align: center; 
} 

.chart canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.percent { 
    display: inline-block; 
    line-height: 110px; 
    z-index: 2; 
} 
.percent:after { 
    content: '%'; 
    margin-left: 0.1em; 
    font-size: .8em; 
} 

Answer 1

Sie nichts falsch machen. Ich weiß nicht, ob einer von ihnen dir gehört, aber es gibt mehrere similar issues on plugin's GitHub page.

Das Plugin zeichnet eine Linie. In diesem Fall startet es eine Linie bei 0, endet bei 0 und wendet einen 3px dicken Strich mit abgerundeten Endkappen an, der am Startpunkt einen kleinen Punkt erzeugt.

In Ihrem Code könnten Sie einfach überprüfen, ob der Wert mehr als 0 ist und diesen überhaupt nicht anzeigen, oder GH eingucken und auf eine Korrektur warten.

Answer 2

Sie können barColor = trackColor gesetzt:

$(document).ready(function(){ 
     var charts = $('.percentage'); 
     charts.easyPieChart({ 
     animate: 1000, 
     onStep: function(value) { 
      this.$el.find('span').text(~~value); 

      if(this.percentage == 0) 
      this.options.barColor = this.options.trackColor; 
     }, 

     }); 
}); 

DEMO