简易饼图 - 为什么没有数字运行动画

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

这是 link 的外观： 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));
            }
        });

简易饼图 - 为什么没有数字运行动画

Easy Pie Charts - Why there's no numbers running animation

html

javascript

css

jquery

easypie

HTML:

CSS:

JS:

简易饼图 - 为什么没有数字 运行 动画

Easy Pie Charts - Why there's no numbers running animation

html

javascript

css

jquery

easypie

HTML:

CSS:

JS:

简易饼图 - 为什么没有数字运行动画