jQuery圆形统计图(百分比)转 作者:月光光
今天我给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便。
如何使用circliful
将jquery库文件和jquery.circliful.min.js引入到页面中。
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
添加css样式:
<style>
.circliful {
position: relative;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
width: 100%;
position: absolute;
text-align: center;
display: inline-block;
}
.circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}
</style>
在需要展现统计图的位置加入以下html代码:
<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients"
然后在页面中加入调用circliful的代码:
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"
data-bgcolor="#eee" data-fill="#ddd"></div>
<script>
$( document ).ready(function() {
$('#myStat').circliful();
});
</script>
然后预览页面,你会看到一个非常简洁漂亮的圆形统计图。
选项设置
Circliful提供了丰富的属性选项设置,基于html5的data属性,以下是设置清单。
参数 | 描述 | 默认值 |
data-dimension | 圆形图的宽度和高度px | 250 |
data-text | 显示在圆圈内侧的文字内容 | empty |
data-info | 显示在data-text下的说明信息 | empty |
data-width | 圆圈的厚度px | 15 |
data-fontsize | 圈内文字大小px | 15 |
data-percent | 圆圈统计百分比%,1-100 | 50 |
data-fgcolor | 圆圈的前景色 | #556b2f |
data-bgcolor | 圆圈的背景色 | #eeeeee |
data-fill | 圆形的填充背景色 | empty |
data-type | 圆形统计类型,可以是"half"或"full" | full |
data-total | 数据总量,和data-part配合使用 | empty |
data-part | 数据量,与data-total配合使用 | empty |
data-border | 圆形样式,可以加边框,如inline或outline | empty |
data-icon | Fontawesome图标样式,详情可参照:Fontawesome Website - Icons | empty |
data-icon-size | 图标大小 | empty |
data-icon-color | 图标颜色 | empty |
jQuery圆形统计图(百分比)转 作者:月光光的更多相关文章
- jQuery圆形统计图实战开发
今天我给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便. 首先我们需要将jquery库文件和jqu ...
- jquery 圆形进度条
最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- 日期选择器:jquery datepicker的使用
helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery datepicker jquery ui 在jquery ui中,提供了一个非常实用 ...
- 使用CSS3和jQuery可伸缩的搜索条
使用CSS3和jQuery可伸缩的搜索条 helloweba.com 作者:月光光 时间:2013-12-09 21:23 标签: CSS3 jquery 搜索条在我们网站是必不可少的,尤其是在有限的 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- Atitit.jquery 版本号新特性attilax总结
Atitit.jquery 版本号新特性attilax总结 1. Jq1.4 1 2. 1.5 1 3. 1.6 3 4. Jq1.7 3 ⒉提升了事件委派时的性能有了大幅度的提升.尤其是在ie7下: ...
- jQuery Gantt Edit:(一)参数以及方法说明
jQuery Gantt editor jQuery Gantt Edit(以下简称GE)是一款开源的基于jQuery的甘特图插件,作者:robicch. GitHub地址:https://githu ...
随机推荐
- matlab-1
1.size():获取矩阵的行数和列数 (1)s=size(A), 当只有一个输出参数时,返回一个行向量,该行向量的第一个元素时矩阵的行数,第二个元素是矩阵的列数.(2)[r,c]=size(A),当 ...
- Linux Sed命令具体解释+怎样替换换行符"\n"(非常多面试问道)
Sed Sed是一个强大的文本处理工具 能够採用正则匹配.对文本进行插入删除改动等操作 Sed处理的时候,一次处理一行,每一次把当前处理的存放在暂时缓冲区.处理完后输出缓冲区内容到屏幕,然后把下一行读 ...
- Centos 7.0系统服务管理
从Centos7开始,不再用sysvinit管理系统服务了,而是改用了systemd,因此对系统服务管理方法已经变更,以下简述 1.查看当前所有系统服务的状态 systemctl 2.查看指定系统服务 ...
- 【SQLServer2008】之改变主键当为null时也不会报错,可以入数据库。
在SqlServer红框中设置主键,右键会有添加主键选项,并且设置不能为null. 当我们插入主键数据如果为null时,会插不进去,这时候我们需要修改一下,如下图: “标识规范”中选择“是”,就可以了 ...
- IOS获取当前地理位置文本
本文转载至 http://blog.csdn.net/lvxiangan/article/details/28101119 以下内容摘抄自网络,著作权属于原作者 方法1:使用ios自带联网查询功 ...
- OIer同样是音乐家
烦闷的时候,shenben为大家准备了2首歌(不用耳机也能听哦) 只需把代码复制到dev-c++的编辑器上,轻按F11,然后聆听OIer的音乐…… 千本樱 曲谱 #include <cstdio ...
- 【BZOJ2666】[cqoi2012]组装 贪心
[BZOJ2666][cqoi2012]组装 Description 数轴上有m个生产车间可以生产零件.一共有n种零件,编号为1~n.第i个车间的坐标为xi,生产第pi种零件(1<=pi< ...
- springcloud和kubernetes对比
由于这两个都不熟,所以在考虑学哪个. 先说结论:都要学,但是重点学k8s,k8s是一个更加完善的解决方案,springcloud被淘汰只是时间的问题. 从自己的经历和网上的文章两方面分析 个人经历: ...
- python中装饰器你真的理解吗?
def w1(func): print('装饰器1....') def w1_in(): print('w1_in.....') func() return w1_in def w2(func): p ...
- restlet验证
1 restlet有无认证对比 无认证: 客户端发起请求 -----> 服务器路由 -----> 访问服务端资源 有认证: 客户端发起请求 -----> 认证 ----->服务 ...