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 06 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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
桌面中心(四)数据显示
2006/10/09 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
javascript Event对象详解及使用示例
2013/11/22 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
React diff算法的实现示例
2018/04/20 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
Python pass详细介绍及实例代码
2016/11/24 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
python搜索包的路径的实现方法
2019/07/19 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
在python中修改.properties文件的操作
2020/04/08 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
小学敬老月活动方案
2014/02/11 职场文书
益达广告词
2014/03/14 职场文书
项目合作意向书模板
2014/07/29 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
入团申请书格式
2019/06/20 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Consul在linux环境的集群部署
2022/04/08 Servers