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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery 筛选器简单操作示例
Oct 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
提问的智慧
2006/10/09 PHP
PHP文件下载类
2006/12/06 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
脚本收藏iframe
2006/07/21 Javascript
event.srcElement+表格应用
2006/08/29 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
PHP面试题大全
2015/10/16 面试题
小学教师管理制度
2014/01/18 职场文书
信息合作协议书
2014/10/09 职场文书
写给老师的感谢信
2015/01/20 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
常用的Python代码调试工具总结
2021/06/23 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
Java中API的使用方法详情
2022/04/06 Java/Android