利用chart.js制作环形进度条

业务要求要使用现有的chart.js的库制作环形进度条，既可以自己设定运行时间，又可以利用ajax获取进度等。

1.画板定位

<div class="col-sm-6 col-sm-offset-3 msg text-center">
    <canvas id="load" width="200" height="200" class="text-center" >Your browser does not support canvas！</canvas>
    <p class="status"></p>
    <p class="tip"><strong class="text-warning">Device information loading...</strong></p>
</div>

status的p标签是为了用数字显示当前进度。

2.画进度条

function progress(bfb){
    let data = [
        {
            value: bfb,
            color:"#5cb85c"
        },
        {
            value: 100-bfb,
            color:"#ddd"
        }
    ];
    let defaults = {
        segmentShowStroke : false,
        animation : false

    };
    let canvas = document.getElementById("load");
    let ctx= canvas.getContext("2d");
    new Chart(ctx).Doughnut(data,defaults);
    $(".status").text(bfb+"%");
    bfb++;
    if(bfb==100){
        clearTimeout(time)
        // window.location.href="home.html";
    }else{
        time=setTimeout(function(){
            progress(bfb);
        },30)
    }
}

注意进度条的两种颜色不要放反了，进度条到100后要清除定时器否则会继续走下去。

3.启用

let bfb = 0;
progress(bfb);

注意要设置初始值为0，再调用方法。

4.其他

如果是与后台交互获取数值的话，只需将数值赋给方法内的bfb参数即可。最后效果如下：