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              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({  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