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

 

Leave a Reply