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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
PHP 一个页面执行时间类代码
2010/03/05 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php限制ip地址范围的方法
2015/03/31 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
《二泉映月》教学反思
2014/04/15 职场文书
医院标语大全
2014/06/23 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书