jquery圆环统计插件circliful

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 id="demo"
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">
</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

来源：http://www.jqueryscript.net/chart-graph/Animated-Circle-Statistics-Plugin-With-jQuery-Canvas-Circliful.html

 

选项设置

 

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