如何使用progressBar.js在圆圈内绘制圆圈?

时间:2017-09-11 13:02:31

标签: javascript progress-bar

我正在使用progressBar.Circle,这是我的代码,它绘制了一个圆圈:

function AnimateCircle(container_id, animatePercentage,type) {
    var startColor = '#FFFFFF';
    var endColor = '#F18F01';

    var element = document.getElementById(container_id);
    var circle = new ProgressBar.Circle(element, {
        color: startColor,
        trailColor: '#eee',
        trailWidth: 3,
        duration: 1400,
        easing: 'easeInOut',
        strokeWidth: 3,
        text: {
            value: "<h4>"+type+"</h4>"+ "<h4>"+(animatePercentage )*10+ "</h1>",
            className: 'progressbar__label'
        },

        // Set default step function for all animate calls
        step: function (state, circle) {
            circle.path.setAttribute('stroke', state.color);
        }
    });

    circle.animate(animatePercentage, {
        from: {
            color: startColor
        },
        to: {
            color: endColor
        }
    });

    circle.path.style.strokeLinecap = 'round';
}

我有办法在其中画另一个圆圈吗?这将产生类似于此的东西:

enter image description here

0 个答案:

没有答案