簡単な円グラフ - アニメーションを実行する数字がない理由

Question

Rendro Easy Pie Chartバージョン2.1.6に問題があります。

私はドキュメントとして正確なイージー・パイ・チャートを使用しました。それは正しい割合になるまで、バー自体のアニメーション を示しています。

その45％としましょう。 問題は、簡単な円グラフはバー自体でアニメーションを実行しているだけであり、残念ながら数字は0〜45％ではありません。

は、ここに私のコードスニペットです：

HTML：

<div class='circular-bar circular-bar-xs m-none mt-xs mr-md pull-right'> 
    <div class='chart circular-bar-chart circular-bar-container' data-percent='45'> 
     <label class='circular-bar-percentage-text'><span class='percent'>45</span>%</label> 
    </div> 
</div> 

CSS：

.circular-bar { 
    margin-bottom: 25px; 
} 

.circular-bar .circular-bar-chart { 
    position: relative; 
} 

.circular-bar strong { 
    display: block; 
    font-weight: 600; 
    font-size: 18px; 
    line-height: 30px; 
    position: absolute; 
    top: 35%; 
    width: 80%; 
    left: 10%; 
    text-align: center; 
} 

.circular-bar label { 
    display: block; 
    font-weight: 100; 
    font-size: 17px; 
    line-height: 20px; 
    position: absolute; 
    top: 50%; 
    width: 80%; 
    left: 10%; 
    text-align: center; 
} 

JS：

$('.circular-bar-chart').easyPieChart({ 
     barColor: "#2baab1", 
     delay: 300, 
     size: 45, 
     lineWidth: 4, 
     trackColor: '#f2f2f2', 
     scaleColor: false, 
     scaleLength: 5, 
     rotate: 0, 
     animate: 1600, 
     onStart: $.noop, 
     onStop: $.noop 
    }); 

ここにそれがどのように見えるかのリンクがあります： https://jsfiddle.net/6455nw8t/

0〜45％の実行番号の問題を解決するにはどうすればよいですか？

ありがとうございました！

Answer 1

あなたはonStepパラメータを追加する必要があります。

$('.circular-bar-chart').easyPieChart({ 
      barColor: "#2baab1", 
      delay: 300, 
      size: 45, 
      lineWidth: 4, 
      trackColor: '#f2f2f2', 
      scaleColor: false, 
      scaleLength: 5, 
      rotate: 0, 
      animate: 1600, 
      onStart: $.noop, 
      onStop: $.noop, 
      onStep: function(from, to, percent) { 
       $(this.el).find('.percent').text(Math.round(percent)); 
      } 
     });