首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js封装成插件_Canvas统计图插件编写实例

Posted in Javascript onSeptember 12, 2017

之前就说过，我想写一个canvas画统计图的插件，现在写好了

先说下实现的功能吧：

1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图

2.可以选择画折现图还是柱形统计图，或者两者都实现

3.可以自由定义折现颜色，坐标颜色，柱形图颜色 和canvas边框颜色，当然边框你也可以选择要或者不要

4.可以选择是否实现柱形图和折现图的动画实现

实现过程

画坐标——画箭头——做X轴和Y轴的标注——画柱形图——画折现图

话不多说，上代码

(function(window,document){
 var ChartDraws = function(options){
  if(!(this instanceof ChartDraws))return new ChartDraws(options);
  this.options = $.extend({
   //报表所需的参数
   "containerId" : "",  //canvas所在容器id
   "canvasWidth" : 400,
   "canvasHeight" : 300,
   "paddingLeft" : 20,
   "paddingTop" : 20,
   "columnChartData" :[], //柱形图的数量和对应得名称以及百分比
   "yChartData" :[],   //y轴的数量及名称
   "axisColor" : "white",  //坐标轴颜色
   "columnChartColor" : "#EEE685", //柱形图颜色
   "isNeedAnimation" : true, //是否需要动画
   "isNeedLineChart" : true, //是否需要折线图
   "isNeedColumnChart" : true, //是否需要柱形图
   "lineChartColor" : "#90EE90", //折线图颜色，当isNeedLineChart=true时有效
   "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;i<self.options.columnChartData.length;i++)
   {
    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);
    self.lineDataList.push({
     x:2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2,
     y:self.options.canvasHeight-(self.options.paddingTop+(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[i].PT)
    })
   }

   //画Y轴title 画y轴虚线
   self.reactAngleHeight = (self.options.canvasHeight-2*self.options.paddingTop)/(self.options.yChartData.length+1);
   for(var j = 0;j<self.options.yChartData.length;j++)
   {
    drawYText(self.ctx,3*self.options.paddingLeft/4,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.yChartData[j].Name);
    //画虚线
    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);
   }
   _drawColumnChart();
  }

  function _drawColumnChart(){
   //柱形图循环
   var reactAngleTimer = 1;
   function loopColumnChart()
   {
    var columnChartLooped = window.requestAnimationFrame(loopColumnChart);
    if(reactAngleTimer<=100)
    {
     for(var k=0;k<self.options.columnChartData.length;k++)
     {
      self.ctx.fillStyle =self.options.columnChartColor;
      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);
     }
     reactAngleTimer++;
    }
    else
    {
     window.cancelAnimationFrame(columnChartLooped);
     columnChartLooped = null;
     reactAngleTimer = 1;
     if(self.options.isNeedLineChart)
     {
      loopLineChart();
     }
    }
   }
   //折线图循环
   var lineTimer = 0;
   function loopLineChart()
   {
    var lineChartLooped = window.requestAnimationFrame(loopLineChart);
    if(lineTimer<self.lineDataList.length-1)
    {
     self.ctx.lineWidth = 2*self.axisBorderWidth/3;
     if(lineTimer == 0)
     {
      drawCircle(self.ctx,self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);
     }
     drawCircle(self.ctx,self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);
     self.ctx.beginPath();
     self.ctx.moveTo(self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);
     self.ctx.lineTo(self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);
     self.ctx.strokeStyle = self.options.lineChartColor;
     self.ctx.lineWidth = 2*self.axisBorderWidth/3;
     self.ctx.stroke();
     lineTimer++;
    }
    else
    {
     window.cancelAnimationFrame(lineChartLooped);
     lineChartLooped = null;
     lineTimer = 0;
    }
   }
   //画柱形图
   function drawRectangle(context,x,y,width,height){
    context.beginPath();
    context.fillRect(x,y,width,height);
   }
   //画圆
   function drawCircle(context,x,y){
    context.beginPath();
    context.arc(x,y,self.axisBorderWidth/2,0,2*Math.PI,true);
    context.strokeStyle=self.options.lineChartColor;
    context.stroke();
    context.closePath();
   }
   if(self.options.isNeedAnimation)
   {
    if(self.options.isNeedColumnChart)
    {
     loopColumnChart();
    }
    else
    {
     if(self.options.isNeedLineChart) {
      loopLineChart();
     }
    }
   }
   else
   {
    if(self.options.isNeedColumnChart)
    {
     for(var k=0;k<self.options.columnChartData.length;k++)
     {
      self.ctx.fillStyle =self.options.columnChartColor;
      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);
     }
    }
    if(self.options.isNeedLineChart) {
     for (var l = 0; l < self.lineDataList.length - 1; l++) {
      self.ctx.lineWidth = 4;
      if (l == 0) {
       drawCircle(self.ctx, self.lineDataList[l].x, self.lineDataList[l].y);
      }
      drawCircle(self.ctx, self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);
      self.ctx.beginPath();
      self.ctx.moveTo(self.lineDataList[l].x, self.lineDataList[l].y);
      self.ctx.lineTo(self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);
      self.ctx.strokeStyle = self.options.lineChartColor;
      self.ctx.lineWidth = 2*self.axisBorderWidth/3;
      self.ctx.stroke();
     }
    }
   }
  }


  function transformAxis(data)
  {
   var newData=[];
   for(var i=0;i<data.length;i++){
    newData.push({
     x:data[i].x,
     y:self.options.canvasHeight-data[i].y
    })
   }
   return newData;
  }

  function drawLine(context,point,width){
   context.beginPath();
   context.moveTo(point[0].x,point[0].y);
   if(point.length>2)
   {
    for(var i=1;i<point.length;i++)
    {
     context.lineTo(point[i].x,point[i].y);
    }
   }
   context.lineWidth = width;
   context.lineJoin='round';
   context.stroke();
   context.closePath();
  }

  //画y轴title
  function drawYText(context,x,y,str) {
   context.beginPath();
   context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");
   context.fillStyle = 'white';
   context.textAlign = 'right';
   context.fillText(str,x,self.options.canvasHeight-y);
   context.closePath();
  }
  //画x轴title
  function drawXText(context,x,y,str) {
   context.beginPath();
   context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");
   context.fillStyle = 'white';
   context.textAlign = 'center';
   context.fillText(str,x,self.options.canvasHeight-y);
   context.closePath();
  }
  function drawDottedLine(context,x1,y1,x2,y2,totalLength,length,lineWidth){
   y1 = self.options.canvasHeight-y1;
   y2 = self.options.canvasHeight-y2;
   var dashLen = length === undefined ? 5 : length;
   //计算有多少个线段
   context.beginPath();
   var num = Math.floor(totalLength/dashLen);
   context.lineWidth = lineWidth;
   for(var i = 0 ; i < num; i++)
   {
    context[i%2==0 ? 'moveTo' : 'lineTo'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i);
   }
   context.stroke();
  }
 };
 window.ChartDraws = ChartDraws;
}(window,document));

下面还有一个是实现requestAnimationFrame浏览器兼容的

(function(){
 var lastTime = 0;
 var prefixes = ['ms','webkit','o','moz']; //各浏览器前缀

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

 var prefix;
 //通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
 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' ];
 }

 //如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到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;
}());

附上<script>调用

ChartDraws({
  "containerId" : "chart1",  //canvas所在容器id
  "canvasWidth" : 1000,
  "canvasHeight" : 250,
  "paddingLeft" : 50,
  "paddingTop" : 50,
  "columnChartData": [
   {NO:0,PT:0.2,Name:"Html/Css"},
   {NO:1,PT:0.4,Name:"Html5/Css3"},
   {NO:2,PT:0.4,Name:"JavaScript"},
   {NO:3,PT:0.5,Name:"JQuery"},
   {NO:4,PT:0.2,Name:"Angular.js"},
   {NO:5,PT:0.8,Name:"BootStrap"},
   {NO:6,PT:0.6,Name:"React.js"},
   {NO:7,PT:0.5,Name:"Java"}
  ],
  "yChartData" : [
   {NO:0,Name:"熟悉"},
   {NO:1,Name:"掌握"},
   {NO:2,Name:"精通"}
  ],
  "isNeedAnimation" : false,
  "isNeedBorder" : false,
  "isNeedLineChart":true,
  "axisColor" : "#8DEEEE"
 });
 ChartDraws({
  "containerId" : "chart2",  //canvas所在容器id
  "canvasWidth" : 1000,
  "canvasHeight" : 250,
  "paddingLeft" : 50,
  "paddingTop" : 50,
  "columnChartData": [
   {NO:0,PT:0.4,Name:"Html/Css"},
   {NO:1,PT:0.5,Name:"Html5/Css3"},
   {NO:2,PT:0.2,Name:"JavaScript"},
   {NO:3,PT:0.7,Name:"JQuery"},
   {NO:4,PT:0.2,Name:"Angular.js"},
   {NO:5,PT:0.3,Name:"BootStrap"},
   {NO:6,PT:0.8,Name:"React.js"},
   {NO:7,PT:0.2,Name:"Java"}
  ],
  "yChartData" : [
   {NO:0,Name:"熟悉"},
   {NO:1,Name:"掌握"},
   {NO:2,Name:"精通"}
  ],
  "isNeedAnimation" : false,
  "isNeedBorder" : false,
  "isNeedLineChart":false,
  "isNeedColumnChart" : true,
  "columnChartColor":"#9370DB"
 });

 ChartDraws({
  "containerId" : "chart3",  //canvas所在容器id
  "canvasWidth" : 1000,
  "canvasHeight" : 250,
  "paddingLeft" : 50,
  "paddingTop" : 50,
  "columnChartData": [
   {NO:0,PT:0.4,Name:"Html/Css"},
   {NO:1,PT:0.5,Name:"Html5/Css3"},
   {NO:2,PT:0.2,Name:"JavaScript"},
   {NO:3,PT:0.7,Name:"JQuery"},
   {NO:4,PT:0.2,Name:"Angular.js"},
   {NO:5,PT:0.3,Name:"BootStrap"},
   {NO:6,PT:0.8,Name:"React.js"},
   {NO:7,PT:0.2,Name:"Java"}
  ],
  "yChartData" : [
   {NO:0,Name:"熟悉"},
   {NO:1,Name:"掌握"},
   {NO:2,Name:"精通"}
  ],
  "isNeedAnimation" : false,
  "isNeedBorder" : true,
  "isNeedLineChart":true,
  "isNeedColumnChart" : false,
  "lineChartColor" : "#8DB6CD",
  "borderColor" : "#87CEFA"
 })

html代码

<div class="section">
 <div id="chart1"></div>
 <div id="chart2"></div>
 <div id="chart3"></div>
 </div>

下面是一个实现后的效果图

js封装成插件_Canvas统计图插件编写实例

在整个编码的过程中我把代码改过一次，为什么改呢，因为在第一次的时候我在js里面使用了大量的 ChartDraws.prototype.XXXX = function(){};

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

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

以上这篇js封装成插件_Canvas统计图插件编写实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

js封装成插件_Canvas统计图插件编写实例

- Author -

蒋世超

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
javascript 常用功能总结
Mar 18 Javascript
JQuery中clone方法复制节点
May 18 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
JS监控关闭浏览器操作的实例详解
Sep 12 #Javascript
详解angular笔记路由之angular-router
Sep 12 #Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
vue引入jq插件的实例讲解
Sep 12 #Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
BootStrap实现文件上传并带有进度条效果
Sep 11 #Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 #Javascript
直流胆(1) S2000(3) 东方红(1) YB235(1) 森海(1) 再生机(1) MX500(1) 1 Tube Radio(1) YB217(1) YB400(2)
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js命名空间写法示例
2015/12/18 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[03:01]2014DOTA2国际邀请赛 DC：我是核弹粉，为Burning和国土祝福
2014/07/13 DOTA
介绍Python中的__future__模块
2015/04/27 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
python K近邻算法的kd树实现
2018/09/06 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
为您的家、后院、车库等在线购物：Spreetail
2019/06/17 全球购物
学习之星事迹材料
2014/05/17 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
2019年最新版见习人员管理制度！
2019/07/08 职场文书
广告策划的实习心得体会总结！
2019/07/22 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL