circleChart.min.js 6.3 KB

1
  1. (function(a){"use strict";a.fn.circleChart=function(g){const h={color:"#3459eb",backgroundColor:"#e6e6e6",background:!0,speed:2e3,widthRatio:0.2,value:66,unit:"percent",counterclockwise:!1,size:110,startAngle:0,animate:!0,backgroundFix:!0,lineCap:"round",animation:"easeInOutCubic",text:!1,redraw:!1,cAngle:0,textCenter:!0,textSize:!1,textWeight:"normal",textFamily:"sans-serif",relativeTextSize:1/7,autoCss:!0,onDraw:!1};let i={linearTween:(s,u,v,w)=>v*s/w+u,easeInQuad:(s,u,v,w)=>{return s/=w,v*s*s+u},easeOutQuad:(s,u,v,w)=>{return s/=w,-v*s*(s-2)+u},easeInOutQuad:(s,u,v,w)=>{return(s/=w/2,1>s)?v/2*s*s+u:(s--,-v/2*(s*(s-2)-1)+u)},easeInCubic:(s,u,v,w)=>{return s/=w,v*s*s*s+u},easeOutCubic:(s,u,v,w)=>{return s/=w,s--,v*(s*s*s+1)+u},easeInOutCubic:(s,u,v,w)=>{return(s/=w/2,1>s)?v/2*s*s*s+u:(s-=2,v/2*(s*s*s+2)+u)},easeInQuart:(s,u,v,w)=>{return s/=w,v*s*s*s*s+u},easeOutQuart:(s,u,v,w)=>{return s/=w,s--,-v*(s*s*s*s-1)+u},easeInOutQuart:(s,u,v,w)=>{return(s/=w/2,1>s)?v/2*s*s*s*s+u:(s-=2,-v/2*(s*s*s*s-2)+u)},easeInQuint:(s,u,v,w)=>{return s/=w,v*s*s*s*s*s+u},easeOutQuint:(s,u,v,w)=>{return s/=w,s--,v*(s*s*s*s*s+1)+u},easeInOutQuint:(s,u,v,w)=>{return(s/=w/2,1>s)?v/2*s*s*s*s*s+u:(s-=2,v/2*(s*s*s*s*s+2)+u)},easeInSine:(s,u,v,w)=>-v*Math.cos(s/w*(Math.PI/2))+v+u,easeOutSine:(s,u,v,w)=>v*Math.sin(s/w*(Math.PI/2))+u,easeInOutSine:(s,u,v,w)=>-v/2*(Math.cos(Math.PI*s/w)-1)+u,easeInExpo:(s,u,v,w)=>v*Math.pow(2,10*(s/w-1))+u,easeOutExpo:(s,u,v,w)=>v*(-Math.pow(2,-10*s/w)+1)+u,easeInOutExpo:(s,u,v,w)=>{return(s/=w/2,1>s)?v/2*Math.pow(2,10*(s-1))+u:(s--,v/2*(-Math.pow(2,-10*s)+2)+u)},easeInCirc:(s,u,v,w)=>{return s/=w,-v*(Math.sqrt(1-s*s)-1)+u},easeOutCubic:(s,u,v,w)=>{return s/=w,s--,v*(s*s*s+1)+u},easeInOutCubic:(s,u,v,w)=>{return(s/=w/2,1>s)?v/2*s*s*s+u:(s-=2,v/2*(s*s*s+2)+u)},easeOutCirc:(s,u,v,w)=>{return s/=w,s--,v*Math.sqrt(1-s*s)+u},easeInOutCirc:(s,u,v,w)=>{return(s/=w/2,1>s)?-v/2*(Math.sqrt(1-s*s)-1)+u:(s-=2,v/2*(Math.sqrt(1-s*s)+1)+u)}},j=(s,u,v,w,x,y,z,A)=>{let B=Object.create(j.prototype);return B.pos=s,B.bAngle=u,B.eAngle=v,B.cAngle=w,B.radius=x,B.lineWidth=y,B.sAngle=z,B.settings=A,B};j.prototype={onDraw(s){if(!1!==this.settings.onDraw){let u=Object.assign({},this),v={percent:q,rad:w=>w,"default":n};u.value=(v[this.settings.unit]||v["default"])(u.cAngle),u.text=w=>l(s,w),u.settings.onDraw(s,u)}},drawBackground(s){s.beginPath(),s.arc(this.pos,this.pos,this.settings.backgroundFix?0.9999*this.radius:this.radius,0,2*Math.PI),s.lineWidth=this.settings.backgroundFix?0.95*this.lineWidth:this.lineWidth,s.strokeStyle=this.settings.backgroundColor,s.stroke()},draw(s){if(s.beginPath(),this.settings.counterclockwise){let u=2*Math.PI;s.arc(this.pos,this.pos,this.radius,u-this.bAngle,u-(this.bAngle+this.cAngle),this.settings.counterclockwise)}else s.arc(this.pos,this.pos,this.radius,this.bAngle,this.bAngle+this.cAngle,this.settings.counterclockwise);s.lineWidth=this.lineWidth,s.lineCap=this.settings.lineCap,s.strokeStyle=this.settings.color,s.stroke()},animate(s,u,v,w,x){let y=new Date().getTime()-v;1>y&&(y=1),v-w<1.05*this.settings.speed&&(!x&&1e3*this.cAngle<=Math.floor(1e3*this.eAngle)||x&&1e3*this.cAngle>=Math.floor(1e3*this.eAngle))?(this.cAngle=i[this.settings.animation]((v-w)/y,this.sAngle,this.eAngle-this.sAngle,this.settings.speed/y),u.clearRect(0,0,this.settings.size,this.settings.size),this.settings.background&&this.drawBackground(u),this.draw(u),this.onDraw(s),v=new Date().getTime(),r(()=>this.animate(s,u,v,w,x))):(this.cAngle=this.eAngle,u.clearRect(0,0,this.settings.size,this.settings.size),this.settings.background&&this.drawBackground(u),this.draw(u),this.setCurrentAnglesData(s))},setCurrentAnglesData(s){let u={percent:q,rad:w=>w,"default":n},v=u[this.settings.unit]||u["default"];s.data("current-c-angle",v(this.cAngle)),s.data("current-start-angle",v(this.bAngle))}};let l=(s,u)=>{s.data("text",u),a(".circleChart_text",s).html(u)},m=s=>{let u=s.getContext("2d"),v=window.devicePixelRatio||1,w=u.webkitBackingStorePixelRatio||u.mozBackingStorePixelRatio||u.msBackingStorePixelRatio||u.oBackingStorePixelRatio||u.backingStorePixelRatio||1,x=v/w,y=s.width,z=s.height;s.width=y*x,s.height=z*x,s.style.width=y+"px",s.style.height=z+"px",u.scale(x,x)},n=s=>180*(s/Math.PI),o=s=>s/180*Math.PI,p=s=>o(360*(s/100)),q=s=>100*(n(s)/360),r=(()=>window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(u){window.setTimeout(u,1e3/60)})();return this.each((s,u)=>{let v=a(u),w={},x=v.data();for(let K in x)x.hasOwnProperty(K)&&0===K.indexOf("_cache_")&&h.hasOwnProperty(K.substring(7))&&(w[K.substring(7)]=x[K]);let y=Object.assign({},h,w,x,g);for(let K in y)y.hasOwnProperty(K)&&0!==K.indexOf("_cache_")&&v.data("_cache_"+K,y[K]);a("canvas.circleChart_canvas",v).length||(v.append(function(){return a("<canvas/>",{"class":"circleChart_canvas"}).prop({width:y.size,height:y.size}).css(y.autoCss?{"margin-left":"auto","margin-right":"auto",display:"block"}:{})}),m(a("canvas",v).get(0))),a("p.circleChart_text",v).length||!1===y.text||(v.append("<p class='circleChart_text'>"+y.text+"</p>"),y.autoCss&&(y.textCenter?a("p.circleChart_text",v).css({position:"absolute","line-height":y.size+"px",top:0,width:"100%",margin:0,padding:0,"text-align":"center","font-size":!1===y.textSize?y.size*y.relativeTextSize:y.textSize,"font-weight":y.textWeight,"font-family":y.textFamily}):a("p.circleChart_text",v).css({"padding-top":"5px","text-align":"center","font-weight":y.textWeight,"font-family":y.textFamily,"font-size":!1===y.textSize?y.size*y.relativeTextSize:y.textSize}))),y.autoCss&&v.css("position","relative"),y.redraw||(y.cAngle=y.currentCAngle?y.currentCAngle:y.cAngle,y.startAngle=y.currentStartAngle?y.currentStartAngle:y.startAngle);let z=a("canvas",v).get(0),A=z.getContext("2d"),B={percent:p,rad:K=>K,"default":o},C=B[y.unit]||B["default"],D=C(y.startAngle),E=C(y.value),F=C(y.cAngle),G=y.size/2,H=G*(1-y.widthRatio/2),I=H*y.widthRatio,J=j(G,D,E,F,H,I,F,y);v.data("size",y.size),y.animate?0===y.value?r(()=>{A.clearRect(0,0,y.size,y.size),J.settings.background&&J.drawBackground(A),J.onDraw(v)}):J.animate(v,A,new Date().getTime(),new Date().getTime(),F>E):(J.cAngle=J.eAngle,r(()=>{A.clearRect(0,0,y.size,y.size),y.background&&J.drawBackground(A),0===y.value?J.settings.background&&J.drawBackground(A):(J.draw(A),J.setCurrentAnglesData(v)),J.onDraw(v)}))})}})(jQuery);