增加了data-bar-width属性

Dashboard.js

@@ -40,8 +40,8 @@
 
     var canvas = document.getElementById(id),
       ctx = canvas.getContext('2d'),
-      cWidth = canvas.width,
-      cHeight = canvas.height,
+      cWidth = Number(canvas.width),
+      cHeight = Number(canvas.height),
       label = (canvas.attributes['data-label']||{"value":""}).value,
       score = Number((canvas.attributes['data-score']||{"value":"0"}).value),
       color = (canvas.attributes['data-color']||{"value":"#000000"}).value,
@@ -49,7 +49,7 @@
       textColor = (canvas.attributes['data-text-color']||{"value":"#000000"}).value,
       pre_text=(canvas.attributes['data-pre-text']||{"value":""}).value,
       post_text=(canvas.attributes['data-post-text']||{"value":""}).value,
-      radius = 140, //圆的半径
+      barWidth = Number((canvas.attributes['data-bar-width']||{"value":10}).value),
       deg0 = Math.PI / 9, //每一格20度
       blocks = 14,
       mum = 1, //数字步长
@@ -62,6 +62,7 @@
 
     var angle = 0, 
       credit = 0, 
+      radius = (((cWidth>cHeight)?cHeight:cWidth)/2)-barWidth, //圆的半径
       mumsPerFrame = score / framesNumber
 
     var drawFrame = function () {
@@ -77,6 +78,8 @@
         pre_text = (canvas.attributes['data-pre-text']||{"value":""}).value
       if (canvas.attributes['data-post-text']&&canvas.attributes['data-post-text'].value !== post_text)
         post_text = (canvas.attributes['data-post-text']||{"value":""}).value
+      if (canvas.attributes['data-bar-width']&&canvas.attributes['data-bar-width'].value !== barWidth)
+        barWidth = Number((canvas.attributes['data-bar-width']||{"value":10}).value)
       if (canvas.attributes['data-score']&&Number(canvas.attributes['data-score'].value) !== score) {
         score = Number((canvas.attributes['data-score']||{"value":"0"}).value)
         angle = 0 

README.md

@@ -32,6 +32,7 @@ Dashboard.js拥有~~其实一点也不~~丰富的API。
 |data-score|HTML Attribute|定义仪表盘的进度，范围在0-100之间，**只能是数字**，更新会导致重新播放进入动画。|`<canvas data-score="0"></canvas>`|`0`|
 |data-pre-text|HTML Attribute|定义仪表盘的进度前面显示的文本。|`<canvas data-pre-text=""></canvas>`|`""`|
 |data-post-text|HTML Attribute|定义仪表盘的进度后面显示的文本。|`<canvas data-post-text="%"></canvas>`|`""`|
+|data-bar-width|HTML Attribute|定义仪表盘的进度条的宽度，**只能是数字**。|`<canvas data-bar-width="10"></canvas>`|`10`|
 
 ## 使用方法
 **直接下载下载** [Dashboard.min.js](https://github.com/zbLiuLiu/Dashboard.js/blob/master/dist/Dashboard.min.js "Panel.min.js")并在页面中引入。

dist/Dashboard.min.js

@@ -1,9 +1,6 @@
-(function(e,g){"object"===typeof exports?module.exports=g():"function"===typeof define&&define.amd?define(g):e.dashboard=g()})(this,function(){function e(g,e){function q(a,c,d){b.save();b.fillStyle=k;b.font=c;b.textAlign="center";b.textBaseLine="top";b.fillText(a,0,d);b.restore()}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();var a=document.getElementById(g),b=
-a.getContext("2d"),r=a.width,t=a.height,l=(a.attributes["data-label"]||{value:""}).value,c=Number((a.attributes["data-score"]||{value:"0"}).value),m=(a.attributes["data-color"]||{value:"#000000"}).value,n=(a.attributes["data-background-color"]||{value:"#BFBFBF"}).value,k=(a.attributes["data-text-color"]||{value:"#000000"}).value,u=(a.attributes["data-pre-text"]||{value:""}).value,v=(a.attributes["data-post-text"]||{value:""}).value,d=Math.PI/9,w=14*Math.PI/9/100,x=e/(1E3/60),h=0,f=0,p=c/x,y=function(){a.attributes["data-label"]&&
-a.attributes["data-label"].value!==l&&(l=(a.attributes["data-label"]||{value:""}).value);a.attributes["data-color"]&&a.attributes["data-color"].value!==m&&(m=(a.attributes["data-color"]||{value:"#000000"}).value);a.attributes["data-background-color"]&&a.attributes["data-background-color"].value!==n&&(n=(a.attributes["data-background-color"]||{value:"#BFBFBF"}).value);a.attributes["data-text-color"]&&a.attributes["data-text-color"].value!==k&&(k=(a.attributes["data-text-color"]||{value:"#000000"}).value);
-a.attributes["data-pre-text"]&&a.attributes["data-pre-text"].value!==u&&(u=(a.attributes["data-pre-text"]||{value:""}).value);a.attributes["data-post-text"]&&a.attributes["data-post-text"].value!==v&&(v=(a.attributes["data-post-text"]||{value:""}).value);a.attributes["data-score"]&&Number(a.attributes["data-score"].value)!==c&&(c=Number((a.attributes["data-score"]||{value:"0"}).value),f=h=0,p=c/x);if(0>c||100<c)console.log('"data-score"\u53ea\u80fd\u662f0-100'),c=100;b.save();b.clearRect(0,0,r,t);
-b.translate(r/2,t/2);h<c*w&&(h+=w*p);f=f<c?f+p:100<=f?100:c;b.save();b.restore();q(Math.floor(f)+"%","50px Microsoft yahei",0);q(l,"25px Microsoft yahei",40);b.save();b.beginPath();b.strokeStyle=n;b.lineWidth=20;b.rotate(9*d-(14*d-9*d)/2);b.arc(0,0,140,0,14*d,!1);b.stroke();b.restore();b.save();b.restore();b.beginPath();b.lineWidth=20;b.strokeStyle=m;b.rotate(9*d-(14*d-9*d)/2);b.arc(0,0,140,0,h,!1);b.stroke();b.restore();window.requestAnimFrame(y)};setTimeout(function(){y()},10)}console.group("Dashboard.js APIs:");
-console.log("dashboard(id,duration):\r\n\tid: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684id\u3002\r\n\tduration: \u8fdb\u5165\u52a8\u753b\u7684\u65f6\u957f\u3002");console.log("data-text-color: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u5b57\u4f53\u989c\u8272\u3002");console.log("data-background-color: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u8fdb\u5ea6\u6761\u7684\u80cc\u666f\u989c\u8272\u3002");
-console.log("data-color: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u8fdb\u5ea6\u6761\u7684\u524d\u666f\u989c\u8272\u3002");console.log("data-label: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u4e0a\u6807\u7b7e\u3002");console.log("data-score: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0cnumber\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u8fdb\u5ea6\uff0c\u8303\u56f4\u57280-100\u4e4b\u95f4\uff0c\u66f4\u65b0\u4f1a\u5bfc\u81f4\u91cd\u65b0\u64ad\u653e\u8fdb\u5165\u52a8\u753b\u3002");
-console.log("data-pre-text: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u8fdb\u5ea6\u524d\u9762\u663e\u793a\u7684\u6587\u672c\u3002");console.log("data-post-text: \u9700\u8981\u7ed1\u5b9a\u7684<canvas>\u6807\u7b7e\u7684\u5c5e\u6027\uff0c\u5b9a\u4e49\u4eea\u8868\u76d8\u7684\u8fdb\u5ea6\u540e\u9762\u663e\u793a\u7684\u6587\u672c\u3002");console.log("");console.log("\u539f\u5219\u4e0a\u652f\u6301\u6240\u6709MVVM\u6846\u67b6\u66f4\u65b0\u5c5e\u6027\uff0c\u4f46\u5728MVVM\u6846\u67b6\u7ed1\u5b9a\u5143\u7d20\u524d\u7ed1\u5b9a<canvas>\u6807\u7b7e\u53ef\u80fd\u4f1a\u5bfc\u81f4\u95ee\u9898\u3002");
-console.log("");console.groupEnd("Dashboard.js\u8be6\u89e3");console.log("Dashboard.js v1.0.0 @zbLiuLiu zbliuliu.top 2020-\u73b0\u5728");e.version="1.0.0";return e});
+(function(e,g){"object"===typeof exports?module.exports=g():"function"===typeof define&&define.amd?define(g):e.dashboard=g()})(this,function(){function e(g,e){function u(a,c,d){b.save();b.fillStyle=m;b.font=c;b.textAlign="center";b.textBaseLine="top";b.fillText(a,0,d);b.restore()}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();var a=document.getElementById(g),b=
+a.getContext("2d"),h=Number(a.width),k=Number(a.height),n=(a.attributes["data-label"]||{value:""}).value,c=Number((a.attributes["data-score"]||{value:"0"}).value),p=(a.attributes["data-color"]||{value:"#000000"}).value,q=(a.attributes["data-background-color"]||{value:"#BFBFBF"}).value,m=(a.attributes["data-text-color"]||{value:"#000000"}).value,v=(a.attributes["data-pre-text"]||{value:""}).value,w=(a.attributes["data-post-text"]||{value:""}).value,r=Number((a.attributes["data-bar-width"]||{value:10}).value),
+d=Math.PI/9,x=14*Math.PI/9/100,y=e/(1E3/60),l=0,f=0,z=(h>k?k:h)/2-r,t=c/y,A=function(){a.attributes["data-label"]&&a.attributes["data-label"].value!==n&&(n=(a.attributes["data-label"]||{value:""}).value);a.attributes["data-color"]&&a.attributes["data-color"].value!==p&&(p=(a.attributes["data-color"]||{value:"#000000"}).value);a.attributes["data-background-color"]&&a.attributes["data-background-color"].value!==q&&(q=(a.attributes["data-background-color"]||{value:"#BFBFBF"}).value);a.attributes["data-text-color"]&&
+a.attributes["data-text-color"].value!==m&&(m=(a.attributes["data-text-color"]||{value:"#000000"}).value);a.attributes["data-pre-text"]&&a.attributes["data-pre-text"].value!==v&&(v=(a.attributes["data-pre-text"]||{value:""}).value);a.attributes["data-post-text"]&&a.attributes["data-post-text"].value!==w&&(w=(a.attributes["data-post-text"]||{value:""}).value);a.attributes["data-bar-width"]&&a.attributes["data-bar-width"].value!==r&&(r=Number((a.attributes["data-bar-width"]||{value:10}).value));a.attributes["data-score"]&&
+Number(a.attributes["data-score"].value)!==c&&(c=Number((a.attributes["data-score"]||{value:"0"}).value),f=l=0,t=c/y);if(0>c||100<c)console.log('"data-score"\u53ea\u80fd\u662f0-100'),c=100;b.save();b.clearRect(0,0,h,k);b.translate(h/2,k/2);l<c*x&&(l+=x*t);f=f<c?f+t:100<=f?100:c;b.save();b.restore();u(Math.floor(f)+"%","50px Microsoft yahei",0);u(n,"25px Microsoft yahei",40);b.save();b.beginPath();b.strokeStyle=q;b.lineWidth=20;b.rotate(9*d-(14*d-9*d)/2);b.arc(0,0,z,0,14*d,!1);b.stroke();b.restore();
+b.save();b.restore();b.beginPath();b.lineWidth=20;b.strokeStyle=p;b.rotate(9*d-(14*d-9*d)/2);b.arc(0,0,z,0,l,!1);b.stroke();b.restore();window.requestAnimFrame(A)};setTimeout(function(){A()},10)}e.version="1.0.0";return e});