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 ...
随机推荐
- oracle 客户端连接
客户端安装时选择管理员模式安装. 连接配置: 首先找到:\app\Administrator\product\11.2.0\client_1\network\admin 文件夹下 tnsnames. ...
- Hibernate “N+1”查询问题
Hibernate 默认情况下使用立即检索策略,即从数据库加载A对象时 会同时加载跟它关联的B,这样产生了不必要的对象集合查询,而且本来可以合并的sql要执行1+N次,因为一条select出所有的A ...
- 使用Excel2007去反复功能时要注意的一个问题
作者:iamlaosong Excel2007有个去反复功能(菜单:数据----删除反复项).非常实用,过去须要用VBA编程实现的功能,如今点击一下图标即可了.去反复通常是指定某列或者某几列.依据这指 ...
- ss请cc来家里钓鱼,鱼塘可划分为n*m的格子,每个格子有不同的概率钓上鱼,cc一直在坐标(x,y)的格子钓鱼,而ss每分钟随机钓一个格子。问t分钟后他们谁至少钓到一条鱼的概率大?为多少?
include "stdafx.h" #include<iostream> #include<vector> #include<math.h> ...
- 搭建私有Nuget仓库
使用Nexus搭建私有Nuget仓库 https://www.cnblogs.com/Erik_Xu/p/9211471.html 前言 Nuget是ASP .NET Gallery的一员,是免费.开 ...
- erlang进程监控:link和monitor
Erlang最开始是为了电信产品而发展起来的语言,因为这样的目的,决定了她对错误处理的严格要求.Erlang除了提供exception,try catch等语法,还支持Link和Monitor两种监控 ...
- python爬虫入门篇
优质爬虫入门源码:https://github.com/lining0806/PythonSpiderNotes Python Spider:https://www.cnblogs.com/wangy ...
- System.DateTime.Now.ToString()的一些用法
日期处理函数 //2007年4月24日 this.TextBox6.Text = System.DateTime.Now.ToString("D"); //200 ...
- Complete space 完备空间与柯西序列 巴拿赫空间与完备空间 完备空间与和希尔伯特空间 封闭closed与完备性complete
http://www.gatsby.ucl.ac.uk/~gretton/coursefiles/RKHS2013_slides1.pdf RKHS: a function space with a ...
- mybatis 各组件生命周期
1.SqlSessionFactoryBuilder SqlSessionFactoryBuilder是通过利用XML或者java编码来获取Configuration配置来构建SqlSessionFa ...