쉬운 원형 차트 - 애니메이션을 실행하는 숫자가없는 이유

Question

Rendro Easy Pie Chart 버전 2.1.6에 문제가 있습니다.

필자는 easy-pie-chart를 문서로 사용했고 정확한 비율로 올 때까지 막대의 애니메이션을 표시합니다.

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