jquery Circular chart (percent) to the author: Moonlight Light

Today I will introduce you to a circular chart circliful, which is based on the HTML5 canvas and jquery, without the need for an image to easily implement a circular chart, and has a lot of property settings, easy to use.

How to use Circliful

Bring the jquery library files and jquery.circliful.min.js to the page.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="js/jquery.circliful.min.js"></script> 
添加css样式：

<Style>
. circliful {
PositionRelative
}
. circle-Text. circle-Info. circle-text-Half,. circle-Info-Half {
Width100%;
PositionAbsolute
Text-align:Center
Displayinline-Block
}
. circle-Info, . circle-info-Half {
color: #999;
}
. circliful . FA {
margin:-10px 3px 0 3px;
position: relative;
bottom: 4px;
}
</style>                


Add the following HTML code where you want the chart to be displayed:

<divId="Mystat"data-dimension="Data-text=" "35%" data-info= "New clients"
Data-width= "data-fontsize=" data-percent= "  data-fgcolor=" #61a9dc "
data-bgcolor= "#eee" data-fill= "#ddd"></div>    


Then add the code that calls circliful in the page:
<script>

$( document ).ready(function() { 
        $(‘#myStat‘).circliful(); 
    }); 
</script> 


Then preview the page and you'll see a very concise and beautiful round chart.

Option settings

Circliful provides a rich set of property options, based on the HTML5 data property, and the following is the Setup checklist.

Parameters	Describe	Default value
Data-dimension	Width and height of the circular chart px	250
Data-text	Text content displayed inside the circle	Empty
Data-info	Description information displayed under Data-text	Empty
Data-width	The thickness of the circle px	15
Data-fontsize	Circle Text Size px	15
Data-percent	Circle Statistics percent%,1-100	50
Data-fgcolor	The foreground color of the circle	#556b2f
Data-bgcolor	The background color of the circle	#eeeeee
Data-fill	Rounded Fill background color	Empty
Data-type	Circular statistic type, which can be "half" or "full"	Full
Data-total	Total data, used in conjunction with Data-part	Empty
Data-part	Amount of data, used in conjunction with Data-total	Empty
Data-border	Circular style, can be added border, such as inline or outline	Empty
Data-icon	Fontawesome icon style, details can be referred to: Fontawesome website-icons	Empty
Data-icon-size	Icon size	Empty
Data-icon-color	Icon Color	Empty

jquery round chart (percent) turn to moonlight Light