没有合适的资源?快使用搜索试试~ 我知道了~
首页jquery插件canvaspercent.js:实现高效百分比圆饼图绘制
jquery插件canvaspercent.js:实现高效百分比圆饼图绘制
0 下载量 15 浏览量
更新于2024-08-29
收藏 117KB PDF 举报
jQuery插件canvaspercent.js是一款轻量级的JavaScript库,它利用HTML5的Canvas元素实现了动态的百分比圆饼图。这款插件适用于需要在页面上展示多个动态圆环数据的场景,如仪表盘或者数据可视化的需求。其设计目标是在简化开发者工作的同时,提供基础的功能支持,并预留了扩展空间,以应对未来可能的业务变化。 该插件的核心功能包括根据传入的配置参数(如圆饼的直径、颜色、线条宽度等)动态绘制圆饼,以及根据不同单位(如rem或px)自动调整尺寸。它支持三种类型的圆饼(type=1、2、3),可以根据实际需求选择。圆饼的占比部分会使用指定的颜色(cir_color)显示,而圆环本身则有透明度(cir_color_op),以区分占比和背景。中间区域通常填充预设颜色(fill_color),增强视觉效果。 使用这个插件时,开发者首先需要引入jQuery库,然后通过$.fn.drawCanvasPercent方法将所需配置应用到HTML元素上。例如,设置圆饼的直径为屏幕宽度的百分比,线条宽度同样基于屏幕宽度,确保在不同设备上都能适应。插件内部的逻辑主要是根据传入的配置进行计算和渲染,实现了从抽象配置到具体图形的转换过程。 虽然canvaspercent.js目前处于1.0版本,但由于其简洁的代码结构和良好的可定制性,对于快速实现百分比圆饼效果非常实用。随着业务的发展,开发者可以根据需要添加新的功能,比如动画效果、数据绑定等,使得插件更加灵活和强大。 这个插件是开发人员在处理页面中的百分比圆环数据时的一个有效工具,它的出现简化了前端开发中绘制复杂图形的工作,提高了开发效率,提升了用户体验。
资源详情
资源推荐
jquery插件插件canvaspercent.js实现百分比圆饼效果实现百分比圆饼效果
在仪表盘的任务增多同时,列表页的百分比圆环或圆饼也随之增多,于是顺手在仪表盘的基础上,封装了一个小小的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);
调用方式:
下载后可阅读完整内容,剩余3页未读,立即下载
weixin_38691641
- 粉丝: 5
- 资源: 929
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功