小編給大家分享一下js如何實(shí)現(xiàn)一個(gè)Canvas統(tǒng)計(jì)圖插件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、平果ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的平果網(wǎng)站制作公司

先說(shuō)下實(shí)現(xiàn)的功能吧：

1.可以通過(guò)自定義X軸坐標(biāo)屬性和Y軸坐標(biāo)屬性按比例畫出統(tǒng)計(jì)圖

2.可以選擇畫折現(xiàn)圖還是柱形統(tǒng)計(jì)圖，或者兩者都實(shí)現(xiàn)

3.可以自由定義折現(xiàn)顏色，坐標(biāo)顏色，柱形圖顏色 和canvas邊框顏色，當(dāng)然邊框你也可以選擇要或者不要

4.可以選擇是否實(shí)現(xiàn)柱形圖和折現(xiàn)圖的動(dòng)畫實(shí)現(xiàn)

實(shí)現(xiàn)過(guò)程

畫坐標(biāo)——畫箭頭——做X軸和Y軸的標(biāo)注——畫柱形圖——畫折現(xiàn)圖

話不多說(shuō)，上代碼

(function(window,document){
 var ChartDraws = function(options){
  if(!(this instanceof ChartDraws))return new ChartDraws(options);
  this.options = $.extend({
   //報(bào)表所需的參數(shù)
   "containerId" : "",  //canvas所在容器id
   "canvasWidth" : 400,
   "canvasHeight" : 300,
   "paddingLeft" : 20,
   "paddingTop" : 20,
   "columnChartData" :[], //柱形圖的數(shù)量和對(duì)應(yīng)得名稱以及百分比
   "yChartData" :[],   //y軸的數(shù)量及名稱
   "axisColor" : "white",  //坐標(biāo)軸顏色
   "columnChartColor" : "#EEE685", //柱形圖顏色
   "isNeedAnimation" : true, //是否需要?jiǎng)赢?
   "isNeedLineChart" : true, //是否需要折線圖
   "isNeedColumnChart" : true, //是否需要柱形圖
   "lineChartColor" : "#90EE90", //折線圖顏色，當(dāng)isNeedLineChart=true時(shí)有效
   "isNeedBorder" : false,  //canvas是否需要外邊框
   "borderColor" : "white"  //外邊框顏色
  },options);
  if(this.options.canvasWidth<=500)
  {
   this.axisBorderWidth = 3;
   this.fontSize = 8;
  }
  else if(this.options.canvasWidth<=800){
   this.axisBorderWidth = 4;
   this.fontSize = 12;
  }
  else{
   this.axisBorderWidth = 5;
   this.fontSize = 16;
  }
  var self = this;
  _init();
  function _init(){
   var canvasDom = document.createElement("canvas");
   canvasDom.id = self.options.containerId+"_"+"canvas";
   canvasDom.width = self.options.canvasWidth;
   canvasDom.height = self.options.canvasHeight;
   if(self.options.isNeedBorder){
    canvasDom.style.borderWidth = 1;
    canvasDom.style.borderStyle = "solid";
    canvasDom.style.borderColor = self.options.borderColor;
   }
   document.getElementById(self.options.containerId).appendChild(canvasDom);
   self.context = document.getElementById(self.options.containerId+"_"+"canvas");
   self.ctx = self.context.getContext("2d");
   _drawAxis();
  }

  function _drawAxis(){
   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}]);
   self.ctx.strokeStyle=self.options.axisColor;
   drawLine(self.ctx,XYData,self.axisBorderWidth);
   //畫三角箭頭
   //畫y軸三角箭頭
   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);
   //畫x軸三角箭頭
   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);
   _drawCoordinatePoints();
  }

  function _drawCoordinatePoints(){
   self.reactAngleWidth = (1-2*0.04)*(self.options.canvasWidth-(2*self.options.paddingLeft))/(self.options.columnChartData.length*2-1);
   self.lineDataList = [];
   for(var i = 0;i2)
   {
    for(var i=1;i
下面還有一個(gè)是實(shí)現(xiàn)requestAnimationFrame瀏覽器兼容的
(function(){
 var lastTime = 0;
 var prefixes = ['ms','webkit','o','moz']; //各瀏覽器前綴

 var requestAnimationFrame = window.requestAnimationFrame;
 var cancelAnimationFrame = window.cancelAnimationFrame;

 var prefix;
 //通過(guò)遍歷各瀏覽器前綴，來(lái)得到requestAnimationFrame和cancelAnimationFrame在當(dāng)前瀏覽器的實(shí)現(xiàn)形式
 for( var i = 0; i < prefixes.length; i++ ) {
  if ( requestAnimationFrame && cancelAnimationFrame ) {
   break;
  }
  prefix = prefixes[i];
  requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
  cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];
 }

 //如果當(dāng)前瀏覽器不支持requestAnimationFrame和cancelAnimationFrame，則會(huì)退到setTimeout
 if ( !requestAnimationFrame || !cancelAnimationFrame ) {
  requestAnimationFrame = function( callback, element ) {
   var currTime = new Date().getTime();
   //為了使setTimteout的盡可能的接近每秒60幀的效果
   var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
   var id = window.setTimeout( function() {
    callback( currTime + timeToCall );
   }, timeToCall );
   lastTime = currTime + timeToCall;
   return id;
  };
  cancelAnimationFrame = function( id ) {
   window.clearTimeout( id );
  };
 }

 window.requestAnimationFrame = requestAnimationFrame;
 window.cancelAnimationFrame = cancelAnimationFrame;
}());
附上