jquery Circular statistical Diagram Development example _jquery

This article illustrates the development method of the jquery circular statistical diagram. Share to everyone for your reference. The specific analysis is as follows:

Here we want to introduce a circular chart circliful, it is based on the HTML5 canvas and jquery, no need to use the image easy to implement circular statistics, and there are many property settings, easy to use. The effect chart is as follows:

First we need to introduce the jquery library files and jquery.circliful.min.js into the page.

Copy Code code as follows:

<script src= "Js/jquery-1.10.2.min.js" ></script>
<script src= "Js/jquery.circliful.min.js" ></script>

Once the required jquery file is introduced, we can now customize the basic style of the circular chart:

Copy Code code as follows:

<style>
. circliful {
position:relative;
}
Circle-text,. Circle-info,. Circle-text-half,. circle-info-half {
width:100%;
Position:absolute;
Text-align:center;
Display:inline-block;
}
. Circle-info,. circle-info-half {
Color: #999;
}
. circliful. FA {
Margin: -10px 3px 0 3px;
position:relative;
bottom:4px;
}
</style>

Once the style is initially defined, simply add the following style code where you want the chart:

Copy Code code as follows:

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

Once the area block is completed, we need to initialize it now:

Copy Code code as follows:

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

It's so simple, just a few easy to complete the handsome statistical chart.

The following is a description of the basic properties of the plug-in:

Circliful provides a rich set of property options, based on the HTML5 data property, the following is a list of settings.

Parameters	Describe	Default value
Data-dimension	Width and height of a circular chart px	250
Data-text	Text displayed inside the circle	Empty
Data-info	Descriptive information displayed under Data-text	Empty
Data-width	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	Background color of a circle	#eeeeee
Data-fill	Fill background color of a circle	Empty
Data-type	Circular statistic type, can be "half" or "full"	Full
Data-total	Total amount of data, used in conjunction with Data-part	Empty
Data-part	Amount of data, used in conjunction with Data-total	Empty
Data-border	A rounded style that can be bordered, such as inline or outline	Empty
Data-icon	Fontawesome icon style, details can refer to: Fontawesome website–icons	Empty
Data-icon-size	Icon size	Empty
Data-icon-color	Icon Color	Empty

I hope this article will help you with your jquery programming.