Простые круговые диаграммы - почему нет анимации чисел

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