Circliful is a jQuery chart plugin that animates the presentation of your information with good looking circular design, a little similar to the ring chart. Also can be used as a circular timer, progress/loading indicator, pie chart and so on.
Basic Usage:
1. Create an DIV container for the plugin. You can pass options to the chart by using the data-* attributes , or by passing them in on initialization.
<div
data-text="35%"
data-info="New Clients"
data-fgcolor="#61a9dc"
data-bgcolor="#eee"
data-fill="#ddd">
</div>
2. Load the jQuery javascript library and jQuery Circliful plugin at the end of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
3. Initialize the plugin.
<script>
$( document ).ready(function() {
$('#demo').circliful();
});
</script>
4. Default settings.
<script>
$( document ).ready(function() {
$('#demo').circliful({
fgcolor: "#556b2f",
bgcolor: "#eee",
fill: false,
width: 15,
dimension: 200,
fontsize: 15,
percent: 50,
animationstep: 1.0,
iconsize: '20px',
iconcolor: '#999',
border: 'default'
});
});
</script>
Change log:
2014-05-27
- added font awesome v4.1.0
- added border inline/outline option again
0.1.5 (2014-01-24)
- Add animation-step option
For more Advanced Usages, please check the demo page or visit the official website.
下载：https://github.com/pguso/jquery-plugin-circliful
选项设置
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 |