将项目名从Panel.js更改为Dashboard.js

Panel.js → Dashboard.js

@@ -4,14 +4,14 @@
     } else if (typeof define === 'function' && define.amd) {
         define(factory)
     } else {
-        root['panel'] = factory()
+        root['dashboard'] = factory()
     }
 })(this, function () {
   var version = "1.0.0"
   var DEBUG = true
   if(DEBUG){
-    console.group("Panel.js APIs:")
-    console.log("panel(id,duration):\r\n\tid: 需要绑定的<canvas>标签的id。\r\n\tduration: 进入动画的时长。")
+    console.group("Dashboard.js APIs:")
+    console.log("dashboard(id,duration):\r\n\tid: 需要绑定的<canvas>标签的id。\r\n\tduration: 进入动画的时长。")
     console.log("data-text-color: 需要绑定的<canvas>标签的属性，定义仪表盘字体颜色。")
     console.log("data-background-color: 需要绑定的<canvas>标签的属性，定义仪表盘进度条的背景颜色。")
     console.log("data-color: 需要绑定的<canvas>标签的属性，定义仪表盘进度条的前景颜色。")
@@ -22,8 +22,8 @@
     console.log("")
     console.log("原则上支持所有MVVM框架更新属性，但在MVVM框架绑定元素前绑定<canvas>标签可能会导致问题。")
     console.log("")
-    console.groupEnd("Panel.js详解")
-    console.log("Panel.js v"+version+" @zbLiuLiu zbliuliu.top 2020-现在")
+    console.groupEnd("Dashboard.js详解")
+    console.log("Dashboard.js v"+version+" @zbLiuLiu zbliuliu.top 2020-现在")
   }
   
   function a (id, dur) {

README.md

@@ -1,5 +1,5 @@
 # Dashboard.js
-一个简单的JS+canvas的仪表盘插件，你只需要在<canvas>中写好id和属性，在<script>中调用一下panel函数即可轻松绘制一个仪表盘！你还可以仅仅使用jQuery、Vue.js甚至document.getElementById(id).setAttribute()来更新<canvas>的参数即可修改数据和样式！
+一个简单的JS+canvas的仪表盘插件，你只需要在<canvas>中写好id和属性，在<script>中调用一下dashboard函数即可轻松绘制一个仪表盘！你还可以仅仅使用jQuery、Vue.js甚至document.getElementById(id).setAttribute()来更新<canvas>的参数即可修改数据和样式！
 
 ## 为什么要制作这个插件
 我的大学报的校企合作专业，其中企业方给我们布置了一个考试，要求仿照Lenovo Learning System的教师页面做一个页面+页面相关的后端API，不能使用任何框架，指定使用HTML+CSS+JS做前端，PHP+MySQL做后端。其中页面中有四个仪表盘，因此我就用8个小时的考试时间中的约一半多一点的时间做了这个插件。然后略微修改之后便成了你现在所看到的插件的第一个版本。
@@ -14,7 +14,7 @@
     <canvas id="canvas" width="300" height="300" data-score="50"></canvas>
     <script src="Panel.js"></script>
     <script>
-    	panel("canvas", 1000)
+    	dashboard("canvas", 1000)
     </script>
 
 只需要加入上面5行代码，你的网页上就会出现一个仪表盘！

dist/Panel.min.js → dist/Dashboard.min.js

@@ -1,9 +1,9 @@
-(function(e,g){"object"===typeof exports?module.exports=g():"function"===typeof define&&define.amd?define(g):e.panel=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"]&&
+(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("Panel.js APIs:");
-console.log("panel(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");
+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("Panel.js\u8be6\u89e3");console.log("Panel.js v1.0.0 @zbLiuLiu zbliuliu.top 2020-\u73b0\u5728");e.version="1.0.0";return e});
+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});