2 lines
8.5 KiB
JavaScript
2 lines
8.5 KiB
JavaScript
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).Schart=i()}(this,function(){"use strict";function a(t,i){for(var e=0;e<i.length;e++){var a=i[e];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function o(t){return function(t){if(Array.isArray(t)){for(var i=0,e=new Array(t.length);i<t.length;i++)e[i]=t[i];return e}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var f=window.devicePixelRatio||1,g=10*f,u=g/2;return function(){function e(t,i){!function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}(this,e),this.canvas=function(t){var i=document.getElementById(t),e=i.parentNode.clientWidth,a=i.parentNode.clientHeight;return i.style.width=e+"px",i.style.height=a+"px",i.width=e*f,i.height=a*f,i}(t),this.ctx=this.canvas.getContext("2d"),this.type="bar",this.showValue=!0,this.showGrid=!0,this.topPadding=60*f,this.leftPadding=50*f,this.rightPadding=10*f,this.bottomPadding=50*f,this.yEqual=5,this.yLength=0,this.xLength=0,this.ySpace=0,this.xRorate=0,this.yRorate=0,this.bgColor="#fff",this.axisColor="#666",this.gridColor="#eee",this.title={text:"",color:"#666",position:"top",font:"bold "+18*f+"px Arial",top:g,bottom:u},this.legend={display:!0,position:"top",color:"#666",font:14*f+"px Arial",top:45*f,bottom:15*f,textWidth:0},this.radius=100*f,this.innerRadius=60*f,this.colorList=["#4A90E2","#F5A623","#ff5858","#5e64ff","#2AC766","#743ee2","#b554ff","#199475"],this.init(i)}return function(t,i,e){i&&a(t.prototype,i),e&&a(t,e)}(e,[{key:"init",value:function(t){if(t.title=Object.assign({},this.title,t.title),t.legend=Object.assign({},this.legend,t.legend),Object.assign(this,t),!t.labels||!t.labels.length)throw new Error("缺少主要参数labels");if(!t.datasets||!t.datasets.length)throw new Error("缺少主要参数datasets");this.drawBackground(),"bar"===this.type||"line"===this.type?this.renderBarChart():this.renderPieChart(),this.drawLegend()}},{key:"renderBarChart",value:function(){this.yLength=Math.floor((this.canvas.height-this.topPadding-this.bottomPadding-g)/this.yEqual),this.xLength=Math.floor((this.canvas.width-this.leftPadding-this.rightPadding-g)/this.labels.length),this.ySpace=function(t,i){var e=t.map(function(t){return t.data.reduce(function(t,i){return i<t?t:i})}),a=Math.ceil(Math.max.apply(Math,o(e))/i),s=a.toString().length-1;return s=2<s?2:s,Math.ceil(a/Math.pow(10,s))*Math.pow(10,s)}(this.datasets,this.yEqual),this.drawXAxis(),this.drawYAxis(),this.drawBarContent()}},{key:"drawBarContent",value:function(){var t=this.ctx,i=this.datasets.length;t.beginPath();for(var e=0;e<i;e++){t.font=this.legend.font,this.legend.textWidth+=Math.ceil(t.measureText(this.datasets[e].label).width),t.fillStyle=t.strokeStyle=this.datasets[e].fillColor||this.colorList[e];for(var a=this.datasets[e].data,s=0;s<a.length;s++)if(!(s>this.labels.length-1)){var o=this.xLength/(i+1),h=this.yLength/this.ySpace,l=this.leftPadding+this.xLength*s+o*(e+.5),n=l+o,r=this.canvas.height-this.bottomPadding,d=r-a[s]*h;if("bar"===this.type)t.fillRect(l,d,n-l,r-d),this.drawValue(a[s],l+o/2,d-u);else if("line"===this.type){var c=this.leftPadding+this.xLength*(s+.5);t.beginPath(),t.arc(c,d,3*f,0,2*Math.PI,!0),t.fill(),0!==s&&(t.beginPath(),t.strokeStyle=this.datasets[e].fillColor||this.colorList[e],t.lineWidth=2*f,t.moveTo(c-this.xLength,r-a[s-1]*h),t.lineTo(c,d),t.stroke(),t.lineWidth=1*f),this.drawValue(a[s],c,d-g)}}}t.stroke()}},{key:"renderPieChart",value:function(){for(var t=this.ctx,i=this.labels.length,e=this.datasets[0],a=e.data,s=a.reduce(function(t,i){return t+i}),o=-Math.PI/2,h=this.canvas.width/2,l=this.canvas.height/2,n=0;n<i;n++){t.font=this.legend.font,this.legend.textWidth+=Math.ceil(t.measureText(this.labels[n]).width),t.beginPath(),t.strokeStyle=t.fillStyle=e.colorList&&e.colorList[n]||this.colorList[n],t.moveTo(h,l);var r=o,d=o+=a[n]/s*2*Math.PI;t.arc(h,l,this.radius,r,d),t.closePath(),t.fill();var c=(r+d)/2;this.drawPieValue(a[n],c)}"ring"===this.type&&(t.beginPath(),t.fillStyle=this.bgColor,t.arc(h,l,this.innerRadius,0,2*Math.PI),t.closePath(),t.fill())}},{key:"drawValue",value:function(t,i,e){var a=this.ctx;this.showValue&&(a.textBaseline="middle",a.font=12*f+"px Arial",a.textAlign="center",a.fillText(t,i,e))}},{key:"drawPieValue",value:function(t,i){var e=this.ctx;if(this.showValue){var a=this.canvas.width/2,s=this.canvas.height/2,o=Math.ceil(Math.abs(this.radius*Math.cos(i))),h=Math.floor(Math.abs(this.radius*Math.sin(i)));e.textBaseline="middle",this.showValue&&(i<=0?(e.textAlign="left",e.moveTo(a+o,s-h),e.lineTo(a+o+g,s-h-g),e.moveTo(a+o+g,s-h-g),e.lineTo(a+o+3*g,s-h-g),e.stroke(),e.fillText(t,a+o+3.5*g,s-h-g)):0<i&&i<=Math.PI/2?(e.textAlign="left",e.moveTo(a+o,s+h),e.lineTo(a+o+g,s+h+g),e.moveTo(a+o+g,s+h+g),e.lineTo(a+o+3*g,s+h+g),e.stroke(),e.fillText(t,a+o+3.5*g,s+h+g)):i>Math.PI/2&&i<Math.PI?(e.textAlign="right",e.moveTo(a-o,s+h),e.lineTo(a-o-g,s+h+g),e.moveTo(a-o-g,s+h+g),e.lineTo(a-o-3*g,s+h+g),e.stroke(),e.fillText(t,a-o-3.5*g,s+h+g)):(e.textAlign="right",e.moveTo(a-o,s-h),e.lineTo(a-o-g,s-h-g),e.moveTo(a-o-g,s-h-g),e.lineTo(a-o-3*g,s-h-g),e.stroke(),e.fillText(t,a-o-3.5*g,s-h-g)))}}},{key:"drawBackground",value:function(){this.ctx.fillStyle=this.bgColor,this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.drawTitle()}},{key:"drawTitle",value:function(){var t=this.title;if(t.text){var i=this.ctx;i.beginPath(),i.font=t.font,i.textAlign="center",i.fillStyle=t.color,"top"===t.position?(i.textBaseline="top",i.fillText(t.text,this.canvas.width/2,t.top)):(i.textBaseline="bottom",i.fillText(t.text,this.canvas.width/2,this.canvas.height-t.bottom))}}},{key:"drawXAxis",value:function(){var t=this.ctx,i=this.canvas.height-this.bottomPadding+.5;t.beginPath(),t.strokeStyle=this.axisColor,t.moveTo(this.leftPadding,i),t.lineTo(this.canvas.width-this.rightPadding,i),t.stroke(),this.drawXPoint()}},{key:"drawXPoint",value:function(){var t=this.ctx;t.beginPath(),t.font=12*f+"px Microsoft YaHei",t.textAlign=this.xRorate?"right":"center",t.textBaseline="top",t.fillStyle=this.axisColor;for(var i=0;i<this.labels.length;i++){var e=this.labels[i],a=this.leftPadding+this.xLength*(i+1)+.5,s=this.canvas.height-this.bottomPadding;this.showGrid?(t.strokeStyle=this.gridColor,t.moveTo(a,s),t.lineTo(a,this.topPadding+g)):(t.moveTo(a,s),t.lineTo(a,s-u)),t.stroke(),t.save(),t.translate(a-this.xLength/2,s+u),t.rotate(-this.xRorate*Math.PI/180),t.fillText(e,0,0),t.restore()}}},{key:"drawYAxis",value:function(){var t=this.ctx;t.beginPath(),t.strokeStyle=this.axisColor,t.moveTo(this.leftPadding-.5,this.canvas.height-this.bottomPadding+.5),t.lineTo(this.leftPadding-.5,this.topPadding+.5),t.stroke(),this.drawYPoint()}},{key:"drawYPoint",value:function(){var t=this.ctx;t.font=12*f+"px Microsoft YaHei",t.textAlign="right",t.textBaseline="middle",t.beginPath();for(var i=0;i<this.yEqual;i++){var e=this.leftPadding,a=this.canvas.height-this.bottomPadding-this.yLength*(i+1)+.5;this.showGrid?(t.strokeStyle=this.gridColor,t.moveTo(e,a),t.lineTo(this.canvas.width-this.rightPadding-g,a)):(t.strokeStyle=this.axisColor,t.moveTo(e-u,a),t.lineTo(e,a)),t.stroke(),t.save(),t.fillStyle=this.axisColor,t.translate(e-g,a),t.rotate(-this.yRorate*Math.PI/180),t.fillText(this.ySpace*(i+1),0,0),t.restore()}}},{key:"drawLegend",value:function(){var t=this.legend;if(t.display){var i=this.ctx,e="pie"===this.type||"ring"===this.type;i.beginPath(),i.font=t.font,i.textAlign="left",i.textBaseline="middle";for(var a=e?this.labels.length:this.datasets.length,s=(this.canvas.width-(this.legend.textWidth+(5*a-2)*g))/2,o=0,h=0;h<a;h++){var l=e?this.datasets[0]:this.datasets[h],n=(e?this.labels[h]:l.label)||"";i.fillStyle=l.colorList&&l.colorList[h]||l.fillColor||this.colorList[h],"top"===t.position?(this.drawLegendIcon(s+5*g*h+o,t.top-u,2*g,g),i.fillStyle=t.color,i.fillText(n,s+(5*h+3)*g+o,t.top)):"bottom"===t.position?(this.drawLegendIcon(s+5*g*h+o,this.canvas.height-t.bottom-u,2*g,g),i.fillStyle=t.color,i.fillText(n,s+(5*h+3)*g+o,this.canvas.height-t.bottom)):(i.fillRect(g,t.top+2*g*h,2*g,g),i.fillStyle=t.color,i.fillText(n,4*g,t.top+2*g*h+.5*g)),o+=Math.ceil(i.measureText(n).width)}}}},{key:"drawLegendIcon",value:function(t,i,e,a){var s=this.ctx;"line"===this.type?(s.beginPath(),s.strokeStyle=s.fillStyle,s.lineWidth=2*f,s.moveTo(t,i+u),s.lineTo(t+2*g,i+u),s.stroke(),s.lineWidth=1*f,s.arc(t+g,i+u,3*f,0,2*Math.PI,!0),s.fill()):s.fillRect(t,i,e,a)}}]),e}()});
|