js封装成插件-------Canvas统计图插件编写

最新推荐文章于 2022-10-24 18:24:24 发布

nqxcwl

最新推荐文章于 2022-10-24 18:24:24 发布

阅读量134

点赞数

分类专栏：前端文章标签： javascript html5

原文链接：https://www.mk2048.com/blog/blog.php?id=h1aiai210jaa&title=js%E5%B0%81%E8%A3%85%E6%88%90%E6%8F%92%E4%BB%B6-------Canvas%E7%BB%9F%E8%AE%A1%E5%9B%BE%E6%8F%92%E4%BB%B6%E7%BC%96%E5%86%99

版权

前端专栏收录该内容

241 篇文章 0 订阅

订阅专栏

之前就说过，我想写一个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                 else
104                 {
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                 else
136                 {
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                 else
162                 {
163                     if(self.options.isNeedLineChart) {
164                         loopLineChart();
165                     }
166                 }
167             }
168             else
169             {
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].y
204                 })
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轴title
226         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轴title
235         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                 else
104                 {
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                 else
136                 {
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                 else
162                 {
163                     if(self.options.isNeedLineChart) {
164                         loopLineChart();
165                     }
166                 }
167             }
168             else
169             {
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].y
204                 })
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轴title
226         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轴title
235         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，则会退到setTimeout
20     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所在容器id
29         "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所在容器id
57         "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(){};

后来我一想不对啊，我为什么要把这么多的方法暴露给外部呢......这不是没事找事么.......

所以现在就改成这样了，如果有不对的地方和可以改进的地方，希望路过的指点下，谢谢！还有那个白条代码背景怎么删不掉...........

nqxcwl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js封装成插件-------Canvas统计图插件编写

之前就说过，我想写一个canvas画统计图的插件，现在写好了先说下实现的功能吧：　　1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图　　2.可以选择画折现图还是柱形统计图，或者两者都...
复制链接

扫一扫