jquery插件canvaspercent.js实现百分比圆饼效果


Posted in jQuery onJuly 18, 2017

在仪表盘的任务增多同时,列表页的百分比圆环或圆饼也随之增多,于是顺手在仪表盘的基础上,封装了一个小小的jquery插件(jq-canvaspercent.js),暂且版本1.0吧,到以后业务的变化在对其进行功能拓展;

暂时性用于页面中有多处百分比圆环的效果处理,还是不错的。

jq-canvaspercent.js代码比较简单,以下直接给出插件代码和几张截图:

/* 
 * canvaspercent 0.1 
 * Copyright:HeavyShell 
 * Date: 2016-06-27 
 * 利用canvas绘图实现百分比percent圆饼图 
 */ 
(function($){ 
 $.fn.drawCanvasPercent = function(options){ 
  //各种属性、参数 
  var defaults = { 
   type:1, //类型默认1,有[1,2,3] 
   dw:'rem', //判断是单位是rem还是px 
   cir_r:1, //圆饼的直径 
   cir_color:'#0e9cfa', //圆饼的占比颜色 
   cir_color_op:'#e0ebf4', //圆饼的占比颜色 
   line_w:0.16, //圆饼的线条宽度 
   fill_color:"#fff" //圆饼的中间区域填充颜色 
  } 
  var options = $.extend(defaults, options); 
  this.each(function(){ 
   //插件实现代码 
   var cur_obj=$(this); 
   if(options.dw=="rem"){ 
    var cur_cir_r=options.cir_r*(window.screen.width/10); 
    var cur_line_w=options.line_w*(window.screen.width/10); 
   }else{ 
    var cur_cir_r=options.cir_r; 
    var cur_line_w=options.line_w; 
   } 
   var cur_type=options.type; 
   var cur_cir_color=options.cir_color; 
   var cur_cir_color_op=options.cir_color_op; 
   var cur_fill_color=options.fill_color; 
   var percent=cur_obj.attr('data-percent'); 
   cur_obj.attr({'width':cur_cir_r,'height':cur_cir_r}); 
   cur_obj.css({'border-radius':"50%",'background':cur_cir_color_op}); 
   if(cur_obj[0].getContext){ 
 
    if(cur_type==2){ 
     //无填充颜色,且线条宽度等于直径 
     cur_line_w=cur_cir_r; 
    }else if(cur_type==3){ 
     //无填充颜色 
    }else{ 
     //有填充颜色 
     var ctx2 = cur_obj[0].getContext("2d"); 
     ctx2.fillStyle = cur_fill_color; 
     ctx2.arc(cur_cir_r/2, cur_cir_r/2, cur_cir_r/2-cur_line_w/2, 0, Math.PI*2, false); 
     ctx2.fill(); 
    } 
 
    var ctx = cur_obj[0].getContext("2d"); 
    ctx.beginPath(); 
    ctx.strokeStyle = cur_cir_color; 
    ctx.lineWidth=cur_line_w; 
    ctx.arc(cur_cir_r/2, cur_cir_r/2, cur_cir_r/2, 0, Math.PI*(percent/100)*360/180, false); 
    ctx.stroke(); 
   } 
  }); 
 }; 
})(jQuery);

调用方式:

$(function(){ 
  $('.perCanvas').drawCanvasPercent(); 
 });

也给出html页面代码吧:

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="Pragma" content="no-cache"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 
 <meta name="format-detection" content="telephone=no"/> 
 <meta name="apple-mobile-web-app-capable" content="yes"/> 
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/> 
 <title>demo01</title> 
 <style type="text/css"> 
  div{margin:.1rem .2rem;background:#eee;padding:.3rem} 
  div span{display:block;float:right;margin:.22rem 2rem 0 0;font-size:.4rem;font-family:microsoft yahei} 
  div canvas{ 
   -webkit-transform: rotateZ(-270deg); 
   transform:rotateZ(-270deg); 
   -webkit-animation:ani01 1s ease 0s both; 
   animation:ani01 1s ease 0s both; 
  } 
 
  @-webkit-keyframes ani01 { 
   0%{ 
    -webkit-transform:scale(.5,.5) rotateZ(-270deg); 
    transform:scale(.5,.5) rotateZ(-270deg); 
   } 
   100%{ 
    -webkit-transform:scale(1,1) rotateZ(-90deg); 
    transform:scale(1,1) rotateZ(-90deg); 
   } 
  } 
  @keyframes ani01 { 
   0%{ 
    -webkit-transform:scale(.5,.5) rotateZ(-270deg); 
    transform:scale(.5,.5) rotateZ(-270deg); 
   } 
   100%{ 
    -webkit-transform:scale(1,1) rotateZ(-90deg); 
    transform:scale(1,1) rotateZ(-90deg); 
   } 
  } 
 </style> 
</head> 
<body> 
 
<div> 
 <canvas data-percent="80" class="perCanvas"> 
  您的浏览器不支持canvas标签。 
 </canvas> 
 <span>第一章:进度 80%</span> 
</div> 
<div> 
 <canvas data-percent="50" class="perCanvas"> 
  您的浏览器不支持canvas标签。 
 </canvas> 
 <span>第一章:进度 50%</span> 
</div> 
<div> 
 <canvas data-percent="75" class="perCanvas"> 
  您的浏览器不支持canvas标签。 
 </canvas> 
 <span>第一章:进度 75%</span> 
</div> 
<div> 
 <canvas data-percent="35" class="perCanvas"> 
  您的浏览器不支持canvas标签。 
 </canvas> 
 <span>第一章:进度 35%</span> 
</div> 
<div> 
 <canvas data-percent="95" class="perCanvas"> 
  您的浏览器不支持canvas标签。 
 </canvas> 
 <span>第一章:进度 95%</span> 
</div> 
<div> 
 <canvas data-percent="13" class="perCanvas"> 
  您的浏览器不支持canvas标签。 
 </canvas> 
 <span>第一章:进度 13%</span> 
</div> 
 
<script type="text/javascript" src="js/flexible.js"></script> 
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jq-canvaspercent.js"></script> 
<script type="text/javascript"> 
 $(function(){ 
  $('.perCanvas').drawCanvasPercent(); 
 }); 
</script> 
 
</body> 
</html>

截图如下:

jquery插件canvaspercent.js实现百分比圆饼效果

jquery插件canvaspercent.js实现百分比圆饼效果

jquery插件canvaspercent.js实现百分比圆饼效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
jQuery常用选择器详解
Jul 17 #jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python异常处理操作实例详解
2018/08/28 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Python matplotlib可视化实例解析
2020/06/01 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
python Cartopy的基础使用详解
2020/11/01 Python
Shell编程面试题
2016/05/29 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
简短大学毕业感言
2014/01/18 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
长城的导游词
2015/01/30 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL