jQuery pie chart development example_jquery

The example in this article describes the method of developing jQuery pie chart. Share it with everyone for your reference. The specific analysis is as follows:

Here we would like to introduce to you a pie chart, circliful, which is based on HTML5 canvas and jQuery. It is easy to implement a pie chart without using images, and it has many attribute settings, making it very convenient to use. The rendering is as follows:

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

Copy code The code is as follows:

After the required Jquery files are introduced, now we can customize the basic style of the pie chart:

Copy code The code is as follows:

After the style is initially defined, you only need to add the following style code where the statistical chart is needed:

Copy code The code is as follows:

data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"
data-bgcolor="#eee" data-fill="#ddd">

After filling out the area block, we now need to initialize it:

Copy code The code is as follows:

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

It’s that simple, you can complete a handsome statistical chart with just a few clicks.

The following is the basic attribute description of the plug-in:

Circliful provides a rich set of attribute options, based on the data attribute of html5. The following is the setting list.

Parameters	Description	Default value
data-dimension	The width and height of the circular image are px	250
data-text	Text content displayed inside the circle	empty
data-info	Description information displayed under data-text	empty
data-width	Thickness of circle px	15
data-fontsize	Circle text size px	15
data-percent	Circle statistics percentage, 1-100	50
data-fgcolor	Foreground color of the circle	#556b2f
data-bgcolor	Background color of the circle	#eeeeee
data-fill	Circular fill background color	empty
data-type	Circle statistics type, can be "half" or "full"	full
data-total	Total amount of data, used in conjunction with data-part	empty
data-part	Data volume, used in conjunction with data-total	empty
data-border	Circular style, you can add borders, such as inline or outline	empty
data-icon	Fontawesome icon style, for details, please refer to: Fontawesome Website – Icons	empty
data-icon-size	Icon size	empty
data-icon-color	Icon color	empty

I hope this article will be helpful to everyone’s jQuery programming.