easy-pie-chart zero percent呈現爲點？

當我嘗試使用容易餅圖0％，我仍然看到一個小點在頂部/ 12點位置呈現。easy-pie-chart zero percent呈現爲點？

請參閱截圖。 HTML/JS/CSS下面。

任何想法我做錯了什麼？

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

來源

2017-01-22 JavaChrisVA

你沒有做錯什麼。我不知道其中一個是你的，但有幾個similar issues on plugin's GitHub page。

該插件繪製一條線。在這種情況下，它從0開始一行，結束於0，並應用一個3px厚的筆劃和圓形的端蓋，在起點處創建一個小圓點。

在你的代碼中，你可以檢查一下值是否大於0，根本就不顯示它，或者在GH上打印並等待修復。

來源

2017-01-22 14:18:51

您可以設置barColor = trackColor：

$(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

來源

2017-01-22 14:30:56 talkhabi

easy-pie-chart zero percent呈現爲點？

回答

相關問題