jquery Circular Chart Real-combat development

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.

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

Java code

1. <script src="Http://code.jquery.com/jquery-1.10.2.min.js" ></script>
2. <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:

Java code

2. <style>
4. . circliful {
6. position:relative;
8. }
10. . Circle-text,. Circle-info,. Circle-text-half,. circle-info-half {
12. Width: 100%;
14. Position:absolute;
16. Text-align:center;
18. Display:inline-block;
20. }
22. . Circle-info,. circle-info-half {
24. Color: #999;
26. }
28. . circliful. FA {
30. Margin: -10px 3px 0 3px;
32. position:relative;
34. bottom:4px;
36. }
38. </style>

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

Java code

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

After the area block has been filled out, we now need to initialize it:

Java code

1. <script>
2. $ (document). Ready (function () {
3. $ (' #myStat '). circliful ();
4. });
5. </script>

As simple as this, just a few easy to complete a handsome statistical chart.

The following is a description of the basic properties of the plugin:

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

jquery Circular Chart Real-combat development