JQ插件：Knob旋钮按钮

在线演示

用法介绍：

分享一款超棒的jQuery旋钮插件 - jQuery knob

http://anthonyterrien.com/knob/

我要实现的效果：




就是需要下方有一个缺口，用于显示一些文字。
我利用knob只显示了这个圆环，其中的文本数字都是在div中显示的，跟knob无关！


首先导入jquery和knob插件：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript" src="js/jquery.knob.js"></script>

然后定义一个div用于显示圆环：

<div class="knob" data-width="250" data-height="250" data-bgcolor="#333" data-fgColor="#6B4F00" data-angleOffset="-140" data-angleArc="280" data-displayInput="false" data-readOnly="true" ></div>

注意设置其中的data-angleOffset和data-angleArc，这样一个环就出来了，默认应该是完整的圈圈。

JS代码：

$(".knob").knob({   change : function (value) {      },      release : function (value) {          console.log("release : " + value);      },      cancel : function () {          console.log("cancel : ", this);       },       draw : function () {//设置了data-skin="tron"才有效         // "tron" case          if(this.$.data('skin') == 'tron') {             var a = this.angle(this.cv)  // Angle               , sa = this.startAngle          // Previous start angle               , sat = this.startAngle         // Start angle               , ea                            // Previous end angle               , eat = sat + a                 // End angle               , r = 1;               this.g.lineWidth = this.lineWidth;               this.o.cursor                 && (sat = eat - 0.3)                  && (eat = eat + 0.3);                  if (this.o.displayPrevious) {                     ea = this.startAngle + this.angle(this.v);                      this.o.cursor                         && (sa = ea - 0.3)                          && (ea = ea + 0.3);                      this.g.beginPath();                       this.g.strokeStyle = this.pColor;                       this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);                       this.g.stroke();                  }                  this.g.beginPath();                   this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;                   this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);                  this.g.stroke();                  this.g.lineWidth = 2;                  this.g.beginPath();                   this.g.strokeStyle = this.o.fgColor;                   this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);                   this.g.stroke();                   return false;          }      }   });

最后为其动态设置value：

$(".knob").val(data.loyalty.progress_percentage).trigger("change");

data.loyalty.progress_percentage是个百分比值，根据你的需要传入即可。

更多功能请参考网上其他文档。

还可以试试这个插件：
http://www.jqueryscript.net/chart-graph/Animated-Circle-Statistics-Plugin-With-jQuery-Canvas-Circliful.html