jquery 圆形进度条
Posted 魔流剑●风之痕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 圆形进度条相关的知识，希望对你有一定的参考价值。
最近手里面的项目需要完成这个对设备性能的检测显示功能，需要使用到圆形进度条这样的效果，网上找了一圈，有很多相当的插件，找到：circliful 插件，看了他的使用说明比较的方便，于是就下载了它并将自己想要的效果添加了进去；
上面的效果，需要圆心中间的数字动态展示，并且在颜色值在小于50的时候为绿色，大于50的时候为红色；
第一步： 页面布局
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>圆形进度条</title> 6 <link rel="icon" href="images/50.gif" type="image/gif" /> 7 <script src="js/jquery.min.js"></script> 8 <script src="js/jquery.circliful.js"></script> 9 <style> 10 body{ margin:0; padding:0; font-size:14px; line-height:24px; color:#8b8b8b; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;} 11 .you{ margin-left:36px; float:left; height:auto; width:55%; min-width:500px} 12 .yous{ box-shadow:0px 0px 5px #ddd; background:#FFF;} 13 .youz{ background:url(./images/tbg.png) repeat-x; height:39px; line-height:39px; font-size:14px; color:#323436; text-indent:20px} 14 .rrlh{ height:180px; margin-top:20px} 15 .txz{ position: absolute; left: 50%; top: 50%; margin-left: -30px; margin-top: -30px; line-height: 30px;} 16 .cpu{ width:50%; height:170px; float:left; text-align:center; position:relative} 17 </style> 18 </head> 19 <div class="you"> 20 <div class="yous"> 21 <div class="youz">运行状态</div> 22 <div class="rrlh"> 23 <!-- cpu使用率 --> 24 <div class="cpu"> 25 <div class="txz"><span style="font-size: 40px;" id="cpuText">0</span><br /> CPU使用率</div> 26 <div id="myStat2" style="display: inline-block" data-width="10" data-fontsize="28" ></div> 27 </div> 28 <!-- 内存使用率 --> 29 <div class="cpu"> 30 <div class="txz"><span style="font-size: 40px;" id="ncText">0</span><br /> 内存使用率</div> 31 <div id="myStat3" style="display: inline-block" data-width="10" data-fontsize="28" ></div> 32 </div> 33 </div> 34 </div> 35 </div> 36 </html>
第二步： 修改 jquery.circliful.js
1 (function( $ ) { 2 $.fn.circliful = function(options) { 3 var settings = $.extend({ 4 // These are the defaults. 5 foregroundColor: "#556b2f", 6 backgroundColor: "#eee", 7 fillColor: false, 8 width: 15, 9 dimension: 200, 10 size: 15, 11 percent: 50, 12 endPercent: 100, 13 showValue: "showValue", //新增 动态数值变化值显示标签ID 14 animationStep: 1.0 15 }, options ); 16 return this.each(function() { 17 var dimension = ‘‘; 18 var text = ‘‘; 19 var info = ‘‘; 20 var width = ‘‘; 21 var size = 0; 22 var percent = 0; 23 var endPercent = 100; 24 var fgcolor = ‘‘; 25 var bgcolor = ‘‘; 26 var icon = ‘‘; 27 var animationstep = 0.0; 28 var showValue = ‘‘; 29 $(this).addClass(‘circliful‘); 30 31 showValue = settings.showValue; //赋值 32 33 if($(this).data(‘dimension‘) != undefined) { 34 dimension = $(this).data(‘dimension‘); 35 } else { 36 dimension = settings.dimension; 37 } 38 39 if($(this).data(‘width‘) != undefined) { 40 width = $(this).data(‘width‘); 41 } else { 42 width = settings.width; 43 } 44 45 if($(this).data(‘fontsize‘) != undefined) { 46 size = $(this).data(‘fontsize‘); 47 } else { 48 size = settings.size; 49 } 50 51 if($(this).data(‘percent‘) != undefined) { 52 percent = $(this).data(‘percent‘) / 100; 53 endPercent = $(this).data(‘percent‘); 54 } else { 55 percent = settings.percent / 100; 56 endPercent = settings.endPercent; 57 } 58 59 if($(this).data(‘fgcolor‘) != undefined) { 60 fgcolor = $(this).data(‘fgcolor‘); 61 } else { 62 fgcolor = settings.foregroundColor; 63 } 64 65 if($(this).data(‘bgcolor‘) != undefined) { 66 bgcolor = $(this).data(‘bgcolor‘); 67 } else { 68 bgcolor = settings.backgroundColor; 69 } 70 71 if($(this).data(‘animation-step‘) != undefined) { 72 animationstep = parseFloat($(this).data(‘animation-step‘)); 73 } else { 74 animationstep = settings.animationStep; 75 } 76 if($(this).data(‘text‘) != undefined) { 77 text = $(this).data(‘text‘); 78 79 if($(this).data(‘icon‘) != undefined) { 80 icon = ‘<i class="fa ‘ + $(this).data(‘icon‘) + ‘"></i>‘; 81 } 82 83 if($(this).data(‘type‘) != undefined) { 84 type = $(this).data(‘type‘); 85 86 if(type == ‘half‘) { 87 $(this).append(‘<span class="circle-text-half">‘ + icon + text + ‘</span>‘); 88 $(this).find(‘.circle-text-half‘).css({‘line-height‘: (dimension / 1.45) + ‘px‘, ‘font-size‘ : size + ‘px‘ }); 89 } else { 90 $(this).append(‘<span class="circle-text">‘ + icon + text + ‘</span>‘); 91 //设置文字样式 92 $(this).find(‘.circle-text‘).css( 93 {‘line-height‘: dimension + ‘px‘, ‘font-size‘ : size + ‘px‘} 94 ); 95 } 96 } else { 97 $(this).append(‘<span class="circle-text">‘ + icon + text + ‘</span>‘); 98 $(this).find(‘.circle-text‘).css( 99 {‘line-height‘: dimension + ‘px‘, ‘font-size‘ : size + ‘px‘ } 100 ); 101 } 102 } else if($(this).data(‘icon‘) != undefined) { 103 104 } 105 106 if($(this).data(‘info‘) != undefined) { 107 info = $(this).data(‘info‘); 108 109 if($(this).data(‘type‘) != undefined) { 110 type = $(this).data(‘type‘); 111 112 if(type == ‘half‘) { 113 $(this).append(‘<span class="circle-info-half">‘ + info + ‘</span>‘); 114 $(this).find(‘.circle-info-half‘).css({‘line-height‘: (dimension * 0.9) + ‘px‘, }); 115 } else { 116 $(this).append(‘<span class="circle-info">‘ + info + ‘</span>‘); 117 $(this).find(‘.circle-info‘).css({‘line-height‘: (dimension * 1.25) + ‘px‘, }); 118 } 119 } else { 120 $(this).append(‘<span class="circle-info">‘ + info + ‘</span>‘); 121 $(this).find(‘.circle-info‘).css({‘line-height‘: (dimension * 1.25) + ‘px‘, }); 122 } 123 } 124 125 $(this).width(dimension + ‘px‘); 126 127 var canvas = $(‘<canvas></canvas>‘).attr({ width: dimension, height: dimension }).appendTo($(this)).get(0); 128 var context = canvas.getContext(‘2d‘); 129 var x = canvas.width / 2; 130 var y = canvas.height / 2; 131 var degrees = percent * 360.0; 132 var radians = degrees * (Math.PI / 180); 133 var radius = canvas.width / 2.5; 134 var startAngle = 2.3 * Math.PI; 135 var endAngle = 0; 136 var counterClockwise = false; 137 var curPerc = animationstep === 0.0 ? endPercent : 0.0; 138 var curStep = Math.max(animationstep, 0.0); 139 var circ = Math.PI * 2; 140 var quart = Math.PI / 2; 141 var type = ‘‘; 142 var fill = false; 143 144 if($(this).data(‘type‘) != undefined) { 145 type = $(this).data(‘type‘); 146 147 if(type == ‘half‘) { 148 var startAngle = 2.0 * Math.PI; 149 var endAngle = 3.13; 150 var circ = Math.PI * 1.0; 151 var quart = Math.PI / 0.996; 152 } 153 } 154 155 if($(this).data(‘fill‘) != undefined) { 156 fill = $(this).data(‘fill‘); 157 } else { 158 fill = settings.fillColor; 159 } 160 //animate foreground circle 161 function animate(current) { 162 /** 163 * [修改] 设置圆心动态数据变化值 164 * showValue 为显示动态值的html标签的ID 165 * 这里 parseInt(current*100) 取整数，他的最大值为 endPercent的值 166 **/ 167 $("#"+showValue).html(parseInt(current*100)); 168 /** 169 * [修改] 判断值是否超过圆形的一半，并修改圆形颜色 * 170 **/ 171 if(current < 0.5){ 172 fgcolor = ‘#14b997‘; 173 }else{ 174 fgcolor = ‘#f75656‘; 175 } 176 177 context.clearRect(0, 0, canvas.width, canvas.height); 178 context.beginPath(); 179 context.arc(x, y, radius, endAngle, startAngle, false); 180 context.lineWidth = width - 1; 181 // line color 182 context.strokeStyle = bgcolor; 183 context.stroke(); 184 if(fill) { 185 context.fillStyle = fill; 186 context.fill(); 187 } 188 context.beginPath(); 189 context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 190 context.lineWidth = width; 191 // line color 192 context.strokeStyle = fgcolor; 193 context.stroke(); 194 195 if (curPerc < endPercent) { 196 curPerc += curStep; 197 requestAnimationFrame(function () { 198 /** 199 * [修改] 降低圆形进度条速度 200 **/ 201 setTimeout(function(){ 202 animate(Math.min(curPerc, endPercent) / 100); 203 }, 40); 204 }); 205 } 206 } 207 animate(curPerc / 100); 208 }); 209 }; 210 }( jQuery ));
第三步： 调用
1 $(document).ready(function(){ 2 var cupCount = 10, 3 ncCount = 80; 4 var myStat2Color = cupCount > 50 ? ‘#f75656‘ : ‘#14b997‘; 5 var myStat3Color = ncCount > 50 ? ‘#f75656‘ : ‘#14b997‘; 6 $(‘#myStat2‘).circliful({ 7 dimension: 170, 8 endPercent: cupCount, 9 showValue: "cpuText", 10 foregroundColor: myStat2Color,//556b2f 11 backgroundColor: "#eee", 12 }); 13 $(‘#myStat3‘).circliful({ 14 dimension: 170, 15 endPercent: ncCount, 16 showValue: "ncText", 17 foregroundColor: myStat3Color, 18 backgroundColor: "#eee", 19 }); 20 });
注： 插件下载 https://github.com/pguso/jquery-plugin-circliful 按需修改，如果不妥或者其他，联系：594710017。
插件参数说明
转自：http://my.oschina.net/comfiger/blog/362281
以上是关于jquery 圆形进度条的主要内容，如果未能解决你的问题，请参考以下文章