0

我对 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%的问题？

提前致谢！

4

1 回答 1

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));
            }
        });
于 2016-06-23T14:14:45.923 回答