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>