业务要求要使用现有的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参数即可。最后效果如下: