之前就说过,我想写一个canvas画统计图的插件,现在写好了先说下实现的功能吧: 1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 2.可以选择画折现图还是柱形统计图,或者两者都实现 3.可以自由定义折现颜色,坐标颜色,柱形图颜色 和canvas边框颜色,当然边 ...
之前就说过,我想写一个canvas画统计图的插件,现在写好了
先说下实现的功能吧:
1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图
2.可以选择画折现图还是柱形统计图,或者两者都实现
3.可以自由定义折现颜色,坐标颜色,柱形图颜色 和canvas边框颜色,当然边框你也可以选择要或者不要
4.可以选择是否实现柱形图和折现图的动画实现
实现过程
画坐标——画箭头——做X轴和Y轴的标注——画柱形图——画折现图
1 (function(window,document){ 2 var ChartDraws = function(options){ 3 if(!(this instanceof ChartDraws))return new ChartDraws(options); 4 this.options = $.extend({ 5 //报表所需的参数 6 "containerId" : "", //canvas所在容器id 7 "canvasWidth" : 400, 8 "canvasHeight" : 300, 9 "paddingLeft" : 20, 10 "paddingTop" : 20, 11 "columnChartData" :[], //柱形图的数量和对应得名称以及百分比 12 "yChartData" :[], //y轴的数量及名称 13 "axisColor" : "white", //坐标轴颜色 14 "columnChartColor" : "#EEE685", //柱形图颜色 15 "isNeedAnimation" : true, //是否需要动画 16 "isNeedLineChart" : true, //是否需要折线图 17 "isNeedColumnChart" : true, //是否需要柱形图 18 "lineChartColor" : "#90EE90", //折线图颜色,当isNeedLineChart=true时有效 19 "isNeedBorder" : false, //canvas是否需要外边框 20 "borderColor" : "white" //外边框颜色 21 },options); 22 if(this.options.canvasWidth<=500) 23 { 24 this.axisBorderWidth = 3; 25 this.fontSize = 8; 26 } 27 else if(this.options.canvasWidth<=800){ 28 this.axisBorderWidth = 4; 29 this.fontSize = 12; 30 } 31 else{ 32 this.axisBorderWidth = 5; 33 this.fontSize = 16; 34 } 35 var self = this; 36 _init(); 37 function _init(){ 38 var canvasDom = document.createElement("canvas"); 39 canvasDom.id = self.options.containerId+"_"+"canvas"; 40 canvasDom.width = self.options.canvasWidth; 41 canvasDom.height = self.options.canvasHeight; 42 if(self.options.isNeedBorder){ 43 canvasDom.style.borderWidth = 1; 44 canvasDom.style.borderStyle = "solid"; 45 canvasDom.style.borderColor = self.options.borderColor; 46 } 47 document.getElementById(self.options.containerId).appendChild(canvasDom); 48 self.context = document.getElementById(self.options.containerId+"_"+"canvas"); 49 self.ctx = self.context.getContext("2d"); 50 _drawAxis(); 51 } 52 53 function _drawAxis(){ 54 var XYData =transformAxis( [{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop}]); 55 self.ctx.strokeStyle=self.options.axisColor; 56 drawLine(self.ctx,XYData,self.axisBorderWidth); 57 //画三角箭头 58 //画y轴三角箭头 59 drawLine(self.ctx,transformAxis([{x:self.options.paddingLeft-self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2},{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft+self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2}]),self.axisBorderWidth); 60 //画x轴三角箭头 61 drawLine(self.ctx,transformAxis([{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop+self.axisBorderWidth},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop-self.axisBorderWidth}]),self.axisBorderWidth); 62 _drawCoordinatePoints(); 63 } 64 65 function _drawCoordinatePoints(){ 66 self.reactAngleWidth = (1-2*0.04)*(self.options.canvasWidth-(2*self.options.paddingLeft))/(self.options.columnChartData.length*2-1); 67 self.lineDataList = []; 68 for(var i = 0;i<self.options.columnChartData.length;i++) 69 { 70 drawXText(self.ctx,2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2,self.options.paddingTop/2,self.options.columnChartData[i].Name); 71 self.lineDataList.push({ 72 x:2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2, 73 y:self.options.canvasHeight-(self.options.paddingTop+(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[i].PT) 74 }) 75 } 76 77 //画Y轴title 画y轴虚线 78 self.reactAngleHeight = (self.options.canvasHeight-2*self.options.paddingTop)/(self.options.yChartData.length+1); 79 for(var j = 0;j<self.options.yChartData.length;j++) 80 { 81 drawYText(self.ctx,3*self.options.paddingLeft/4,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.yChartData[j].Name); 82 //画虚线 83 drawDottedLine(self.ctx,self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-2*self.options.paddingLeft,10,self.axisBorderWidth/2); 84 } 85 _drawColumnChart(); 86 } 87 88 function _drawColumnChart(){ 89 //柱形图循环 90 var reactAngleTimer = 1; 91 function loopColumnChart() 92 { 93 var columnChartLooped = window.requestAnimationFrame(loopColumnChart); 94 if(reactAngleTimer<=100) 95 { 96 for(var k=0;k<self.options.columnChartData.length;k++) 97 { 98 self.ctx.fillStyle =self.options.columnChartColor; 99 drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100);100 }101 reactAngleTimer++;102 }103 else104 {105 window.cancelAnimationFrame(columnChartLooped);106 columnChartLooped = null;107 reactAngleTimer = 1;108 if(self.options.isNeedLineChart)109 {110 loopLineChart();111 }112 }113 }114 //折线图循环115 var lineTimer = 0;116 function loopLineChart()117 {118 var lineChartLooped = window.requestAnimationFrame(loopLineChart);119 if(lineTimer<self.lineDataList.length-1)120 {121 self.ctx.lineWidth = 2*self.axisBorderWidth/3;122 if(lineTimer == 0)123 {124 drawCircle(self.ctx,self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);125 }126 drawCircle(self.ctx,self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);127 self.ctx.beginPath();128 self.ctx.moveTo(self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);129 self.ctx.lineTo(self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);130 self.ctx.strokeStyle = self.options.lineChartColor;131 self.ctx.lineWidth = 2*self.axisBorderWidth/3;132 self.ctx.stroke();133 lineTimer++;134 }135 else136 {137 window.cancelAnimationFrame(lineChartLooped);138 lineChartLooped = null;139 lineTimer = 0;140 }141 }142 //画柱形图143 function drawRectangle(context,x,y,width,height){144 context.beginPath();145 context.fillRect(x,y,width,height);146 }147 //画圆148 function drawCircle(context,x,y){149 context.beginPath();150 context.arc(x,y,self.axisBorderWidth/2,0,2*Math.PI,true);151 context.strokeStyle=self.options.lineChartColor;152 context.stroke();153 context.closePath();154 }155 if(self.options.isNeedAnimation)156 {157 if(self.options.isNeedColumnChart)158 {159 loopColumnChart();160 }161 else162 {163 if(self.options.isNeedLineChart) {164 loopLineChart();165 }166 }167 }168 else169 {170 if(self.options.isNeedColumnChart)171 {172 for(var k=0;k<self.options.columnChartData.length;k++)173 {174 self.ctx.fillStyle =self.options.columnChartColor;175 drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT);176 }177 }178 if(self.options.isNeedLineChart) {179 for (var l = 0; l < self.lineDataList.length - 1; l++) {180 self.ctx.lineWidth = 4;181 if (l == 0) {182 drawCircle(self.ctx, self.lineDataList[l].x, self.lineDataList[l].y);183 }184 drawCircle(self.ctx, self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);185 self.ctx.beginPath();186 self.ctx.moveTo(self.lineDataList[l].x, self.lineDataList[l].y);187 self.ctx.lineTo(self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);188 self.ctx.strokeStyle = self.options.lineChartColor;189 self.ctx.lineWidth = 2*self.axisBorderWidth/3;190 self.ctx.stroke();191 }192 }193 }194 }195 196 197 function transformAxis(data)198 {199 var newData=[];200 for(var i=0;i<data.length;i++){201 newData.push({202 x:data[i].x,203 y:self.options.canvasHeight-data[i].y204 })205 }206 return newData;207 }208 209 function drawLine(context,point,width){210 context.beginPath();211 context.moveTo(point[0].x,point[0].y);212 if(point.length>2)213 {214 for(var i=1;i<point.length;i++)215 {216 context.lineTo(point[i].x,point[i].y);217 }218 }219 context.lineWidth = width;220 context.lineJoin='round';221 context.stroke();222 context.closePath();223 }224 225 //画y轴title226 function drawYText(context,x,y,str) {227 context.beginPath();228 context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");229 context.fillStyle = 'white';230 context.textAlign = 'right';231 context.fillText(str,x,self.options.canvasHeight-y);232 context.closePath();233 }234 //画x轴title235 function drawXText(context,x,y,str) {236 context.beginPath();237 context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");238 context.fillStyle = 'white';239 context.textAlign = 'center';240 context.fillText(str,x,self.options.canvasHeight-y);241 context.closePath();242 }243 function drawDottedLine(context,x1,y1,x2,y2,totalLength,length,lineWidth){244 y1 = self.options.canvasHeight-y1;245 y2 = self.options.canvasHeight-y2;246 var dashLen = length === undefined ? 5 : length;247 //计算有多少个线段248 context.beginPath();249 var num = Math.floor(totalLength/dashLen);250 context.lineWidth = lineWidth;251 for(var i = 0 ; i < num; i++)252 {253 context[i%2==0 ? 'moveTo' : 'lineTo'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i);254 }255 context.stroke();256 }257 };258 window.ChartDraws = ChartDraws;259 }(window,document)
话不多说,上代码
1 (function(window,document){ 2 var ChartDraws = function(options){ 3 if(!(this instanceof ChartDraws))return new ChartDraws(options); 4 this.options = $.extend({ 5 //报表所需的参数 6 "containerId" : "", //canvas所在容器id 7 "canvasWidth" : 400, 8 "canvasHeight" : 300, 9 "paddingLeft" : 20, 10 "paddingTop" : 20, 11 "columnChartData" :[], //柱形图的数量和对应得名称以及百分比 12 "yChartData" :[], //y轴的数量及名称 13 "axisColor" : "white", //坐标轴颜色 14 "columnChartColor" : "#EEE685", //柱形图颜色 15 "isNeedAnimation" : true, //是否需要动画 16 "isNeedLineChart" : true, //是否需要折线图 17 "isNeedColumnChart" : true, //是否需要柱形图 18 "lineChartColor" : "#90EE90", //折线图颜色,当isNeedLineChart=true时有效 19 "isNeedBorder" : false, //canvas是否需要外边框 20 "borderColor" : "white" //外边框颜色 21 },options); 22 if(this.options.canvasWidth<=500) 23 { 24 this.axisBorderWidth = 3; 25 this.fontSize = 8; 26 } 27 else if(this.options.canvasWidth<=800){ 28 this.axisBorderWidth = 4; 29 this.fontSize = 12; 30 } 31 else{ 32 this.axisBorderWidth = 5; 33 this.fontSize = 16; 34 } 35 var self = this; 36 _init(); 37 function _init(){ 38 var canvasDom = document.createElement("canvas"); 39 canvasDom.id = self.options.containerId+"_"+"canvas"; 40 canvasDom.width = self.options.canvasWidth; 41 canvasDom.height = self.options.canvasHeight; 42 if(self.options.isNeedBorder){ 43 canvasDom.style.borderWidth = 1; 44 canvasDom.style.borderStyle = "solid"; 45 canvasDom.style.borderColor = self.options.borderColor; 46 } 47 document.getElementById(self.options.containerId).appendChild(canvasDom); 48 self.context = document.getElementById(self.options.containerId+"_"+"canvas"); 49 self.ctx = self.context.getContext("2d"); 50 _drawAxis(); 51 } 52 53 function _drawAxis(){ 54 var XYData =transformAxis( [{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop}]); 55 self.ctx.strokeStyle=self.options.axisColor; 56 drawLine(self.ctx,XYData,self.axisBorderWidth); 57 //画三角箭头 58 //画y轴三角箭头 59 drawLine(self.ctx,transformAxis([{x:self.options.paddingLeft-self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2},{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft+self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2}]),self.axisBorderWidth); 60 //画x轴三角箭头 61 drawLine(self.ctx,transformAxis([{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop+self.axisBorderWidth},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop-self.axisBorderWidth}]),self.axisBorderWidth); 62 _drawCoordinatePoints(); 63 } 64 65 function _drawCoordinatePoints(){ 66 self.reactAngleWidth = (1-2*0.04)*(self.options.canvasWidth-(2*self.options.paddingLeft))/(self.options.columnChartData.length*2-1); 67 self.lineDataList = []; 68 for(var i = 0;i<self.options.columnChartData.length;i++) 69 { 70 drawXText(self.ctx,2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2,self.options.paddingTop/2,self.options.columnChartData[i].Name); 71 self.lineDataList.push({ 72 x:2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2, 73 y:self.options.canvasHeight-(self.options.paddingTop+(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[i].PT) 74 }) 75 } 76 77 //画Y轴title 画y轴虚线 78 self.reactAngleHeight = (self.options.canvasHeight-2*self.options.paddingTop)/(self.options.yChartData.length+1); 79 for(var j = 0;j<self.options.yChartData.length;j++) 80 { 81 drawYText(self.ctx,3*self.options.paddingLeft/4,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.yChartData[j].Name); 82 //画虚线 83 drawDottedLine(self.ctx,self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-2*self.options.paddingLeft,10,self.axisBorderWidth/2); 84 } 85 _drawColumnChart(); 86 } 87 88 function _drawColumnChart(){ 89 //柱形图循环 90 var reactAngleTimer = 1; 91 function loopColumnChart() 92 { 93 var columnChartLooped = window.requestAnimationFrame(loopColumnChart); 94 if(reactAngleTimer<=100) 95 { 96 for(var k=0;k<self.options.columnChartData.length;k++) 97 { 98 self.ctx.fillStyle =self.options.columnChartColor; 99 drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100);100 }101 reactAngleTimer++;102 }103 else104 {105 window.cancelAnimationFrame(columnChartLooped);106 columnChartLooped = null;107 reactAngleTimer = 1;108 if(self.options.isNeedLineChart)109 {110 loopLineChart();111 }112 }113 }114 //折线图循环115 var lineTimer = 0;116 function loopLineChart()117 {118 var lineChartLooped = window.requestAnimationFrame(loopLineChart);119 if(lineTimer<self.lineDataList.length-1)120 {121 self.ctx.lineWidth = 2*self.axisBorderWidth/3;122 if(lineTimer == 0)123 {124 drawCircle(self.ctx,self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);125 }126 drawCircle(self.ctx,self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);127 self.ctx.beginPath();128 self.ctx.moveTo(self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);129 self.ctx.lineTo(self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);130 self.ctx.strokeStyle = self.options.lineChartColor;131 self.ctx.lineWidth = 2*self.axisBorderWidth/3;132 self.ctx.stroke();133 lineTimer++;134 }135 else136 {137 window.cancelAnimationFrame(lineChartLooped);138 lineChartLooped = null;139 lineTimer = 0;140 }141 }142 //画柱形图143 function drawRectangle(context,x,y,width,height){144 context.beginPath();145 context.fillRect(x,y,width,height);146 }147 //画圆148 function drawCircle(context,x,y){149 context.beginPath();150 context.arc(x,y,self.axisBorderWidth/2,0,2*Math.PI,true);151 context.strokeStyle=self.options.lineChartColor;152 context.stroke();153 context.closePath();154 }155 if(self.options.isNeedAnimation)156 {157 if(self.options.isNeedColumnChart)158 {159 loopColumnChart();160 }161 else162 {163 if(self.options.isNeedLineChart) {164 loopLineChart();165 }166 }167 }168 else169 {170 if(self.options.isNeedColumnChart)171 {172 for(var k=0;k<self.options.columnChartData.length;k++)173 {174 self.ctx.fillStyle =self.options.columnChartColor;175 drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT);176 }177 }178 if(self.options.isNeedLineChart) {179 for (var l = 0; l < self.lineDataList.length - 1; l++) {180 self.ctx.lineWidth = 4;181 if (l == 0) {182 drawCircle(self.ctx, self.lineDataList[l].x, self.lineDataList[l].y);183 }184 drawCircle(self.ctx, self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);185 self.ctx.beginPath();186 self.ctx.moveTo(self.lineDataList[l].x, self.lineDataList[l].y);187 self.ctx.lineTo(self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);188 self.ctx.strokeStyle = self.options.lineChartColor;189 self.ctx.lineWidth = 2*self.axisBorderWidth/3;190 self.ctx.stroke();191 }192 }193 }194 }195 196 197 function transformAxis(data)198 {199 var newData=[];200 for(var i=0;i<data.length;i++){201 newData.push({202 x:data[i].x,203 y:self.options.canvasHeight-data[i].y204 })205 }206 return newData;207 }208 209 function drawLine(context,point,width){210 context.beginPath();211 context.moveTo(point[0].x,point[0].y);212 if(point.length>2)213 {214 for(var i=1;i<point.length;i++)215 {216 context.lineTo(point[i].x,point[i].y);217 }218 }219 context.lineWidth = width;220 context.lineJoin='round';221 context.stroke();222 context.closePath();223 }224 225 //画y轴title226 function drawYText(context,x,y,str) {227 context.beginPath();228 context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");229 context.fillStyle = 'white';230 context.textAlign = 'right';231 context.fillText(str,x,self.options.canvasHeight-y);232 context.closePath();233 }234 //画x轴title235 function drawXText(context,x,y,str) {236 context.beginPath();237 context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");238 context.fillStyle = 'white';239 context.textAlign = 'center';240 context.fillText(str,x,self.options.canvasHeight-y);241 context.closePath();242 }243 function drawDottedLine(context,x1,y1,x2,y2,totalLength,length,lineWidth){244 y1 = self.options.canvasHeight-y1;245 y2 = self.options.canvasHeight-y2;246 var dashLen = length === undefined ? 5 : length;247 //计算有多少个线段248 context.beginPath();249 var num = Math.floor(totalLength/dashLen);250 context.lineWidth = lineWidth;251 for(var i = 0 ; i < num; i++)252 {253 context[i%2==0 ? 'moveTo' : 'lineTo'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i);254 }255 context.stroke();256 }257 };258 window.ChartDraws = ChartDraws;259 }(window,document));
下面还有一个是实现requestAnimationFrame浏览器兼容的
1 (function(){ 2 var lastTime = 0; 3 var prefixes = ['ms','webkit','o','moz']; //各浏览器前缀 4 5 var requestAnimationFrame = window.requestAnimationFrame; 6 var cancelAnimationFrame = window.cancelAnimationFrame; 7 8 var prefix; 9 //通过遍历各浏览器前缀,来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式10 for( var i = 0; i < prefixes.length; i++ ) {11 if ( requestAnimationFrame && cancelAnimationFrame ) {12 break;13 }14 prefix = prefixes[i];15 requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];16 cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];17 }18 19 //如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame,则会退到setTimeout20 if ( !requestAnimationFrame || !cancelAnimationFrame ) {21 requestAnimationFrame = function( callback, element ) {22 var currTime = new Date().getTime();23 //为了使setTimteout的尽可能的接近每秒60帧的效果24 var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );25 var id = window.setTimeout( function() {26 callback( currTime + timeToCall );27 }, timeToCall );28 lastTime = currTime + timeToCall;29 return id;30 };31 cancelAnimationFrame = function( id ) {32 window.clearTimeout( id );33 };34 }35 36 window.requestAnimationFrame = requestAnimationFrame;37 window.cancelAnimationFrame = cancelAnimationFrame;38 }());
附上<script>调用
1 ChartDraws({ 2 "containerId" : "chart1", //canvas所在容器id 3 "canvasWidth" : 1000, 4 "canvasHeight" : 250, 5 "paddingLeft" : 50, 6 "paddingTop" : 50, 7 "columnChartData": [ 8 {NO:0,PT:0.2,Name:"Html/Css"}, 9 {NO:1,PT:0.4,Name:"Html5/Css3"},10 {NO:2,PT:0.4,Name:"JavaScript"},11 {NO:3,PT:0.5,Name:"JQuery"},12 {NO:4,PT:0.2,Name:"Angular.js"},13 {NO:5,PT:0.8,Name:"BootStrap"},14 {NO:6,PT:0.6,Name:"React.js"},15 {NO:7,PT:0.5,Name:"Java"}16 ],17 "yChartData" : [18 {NO:0,Name:"熟悉"},19 {NO:1,Name:"掌握"},20 {NO:2,Name:"精通"}21 ],22 "isNeedAnimation" : false,23 "isNeedBorder" : false,24 "isNeedLineChart":true,25 "axisColor" : "#8DEEEE"26 });27 ChartDraws({28 "containerId" : "chart2", //canvas所在容器id29 "canvasWidth" : 1000,30 "canvasHeight" : 250,31 "paddingLeft" : 50,32 "paddingTop" : 50,33 "columnChartData": [34 {NO:0,PT:0.4,Name:"Html/Css"},35 {NO:1,PT:0.5,Name:"Html5/Css3"},36 {NO:2,PT:0.2,Name:"JavaScript"},37 {NO:3,PT:0.7,Name:"JQuery"},38 {NO:4,PT:0.2,Name:"Angular.js"},39 {NO:5,PT:0.3,Name:"BootStrap"},40 {NO:6,PT:0.8,Name:"React.js"},41 {NO:7,PT:0.2,Name:"Java"}42 ],43 "yChartData" : [44 {NO:0,Name:"熟悉"},45 {NO:1,Name:"掌握"},46 {NO:2,Name:"精通"}47 ],48 "isNeedAnimation" : false,49 "isNeedBorder" : false,50 "isNeedLineChart":false,51 "isNeedColumnChart" : true,52 "columnChartColor":"#9370DB"53 });54 55 ChartDraws({56 "containerId" : "chart3", //canvas所在容器id57 "canvasWidth" : 1000,58 "canvasHeight" : 250,59 "paddingLeft" : 50,60 "paddingTop" : 50,61 "columnChartData": [62 {NO:0,PT:0.4,Name:"Html/Css"},63 {NO:1,PT:0.5,Name:"Html5/Css3"},64 {NO:2,PT:0.2,Name:"JavaScript"},65 {NO:3,PT:0.7,Name:"JQuery"},66 {NO:4,PT:0.2,Name:"Angular.js"},67 {NO:5,PT:0.3,Name:"BootStrap"},68 {NO:6,PT:0.8,Name:"React.js"},69 {NO:7,PT:0.2,Name:"Java"}70 ],71 "yChartData" : [72 {NO:0,Name:"熟悉"},73 {NO:1,Name:"掌握"},74 {NO:2,Name:"精通"}75 ],76 "isNeedAnimation" : false,77 "isNeedBorder" : true,78 "isNeedLineChart":true,79 "isNeedColumnChart" : false,80 "lineChartColor" : "#8DB6CD",81 "borderColor" : "#87CEFA"82 })
html代码
1 <div class="section">2 <div id="chart1"></div>3 <div id="chart2"></div>4 <div id="chart3"></div>5 </div>
下面是一个实现后的效果图
在整个编码的过程中我把代码改过一次,为什么改呢,因为在第一次的时候我在js里面使用了大量的 ChartDraws.prototype.XXXX = function(){};
后来我一想不对啊,我为什么要把这么多的方法暴露给外部呢......这不是没事找事么.......
所以现在就改成这样了,如果有不对的地方和可以改进的地方,希望路过的指点下,谢谢!还有那个白条代码背景怎么删不掉...........
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:js封装成插件
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。