利用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参数即可。最后效果如下：