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.
data-dimension="250"
data-text="35%"
data-info="New Clients"
data-width="30"
data-fontsize="38"
data-percent="35"
data-fgcolor="#61a9dc"
data-bgcolor="#eee"
data-fill="#ddd">
2. Load the jQuery javascript library and jQuery Circliful plugin at the end of the page.
3. Initialize the plugin.
$( document ).ready(function() {
$('#demo').circliful();
});
4. Default settings.
$( 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'
});
});
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.
选项设置
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
empty
data-icon-size
图标大小
empty
data-icon-color
图标颜色
empty