Development of jQuery circular statistical charts and jquery statistical charts

Development of jQuery circular statistical charts and jquery statistical charts

Today, I will introduce you to a circular Statistical Chart circliful, which is based on the HTML5 canvas and jQuery. You do not need to use an image to easily implement a circular Statistical Chart, and there are many attribute settings, which are very convenient to use.

First, we need to introduce the jquery library file and jquery. circliful. min. js to 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>

 

After the Jquery file is introduced, we can now customize the basic style of the circular Statistical Chart:

Java code

1. <Style>
2. . Circliful {
3. Position: relative;
4. }
5. . Circle-text,. circle-info,. circle-text-half,. circle-info-half {
6. Width: 100%;
7. Position: absolute;
8. Text-align: center;
9. Display: inline-block;
10. }
11. . Circle-info,. circle-info-half {
12. Color: #999;
13. }
14. . Circliful. fa {
15. Margin:-10px 3px 0 3px;
16. Position: relative;
17. Bottom: 4px;
18. }
19. </Style>

 

After the style is preliminarily defined, you only need to add the following style code where the Statistical Chart is needed:

Java code

1. <Div id = "myStat" data-dimension = "250" data-text = "35%" data-info = "New Clients"
2. Data-width = "30" data-fontsize = "38" data-percent = "35" data-fgcolor = "# 61a9dc"
3. Data-bgcolor = "# eee" data-fill = "# ddd"> </div>

 

After entering the region block, we need to initialize it now:

Java code

1. <Script>
2. $ (Document). ready (function (){
3. $ ('# Mystat'). circliful ();
4. });
5. </Script>

 

It's so simple that you can easily complete a few handsome statistical charts.

The following describes the basic attributes of the plug-in:

Circliful provides rich attribute options, which are based on html5 data attributes. The following is a configuration list.

 

Parameters	Description	Default Value
Data-dimension	Width and height px of a circular chart	250
Data-text	Text content displayed inside the circle	Empty
Data-info	Description in data-text	Empty
Data-width	Circle thickness px	15
Data-fontsize	Incircle text size px	15
Data-percent	Percentage of circle statistics %, 1-100	50
Data-fgcolor	Foreground color of the circle	# 556b2f
Data-bgcolor	Background Color of the circle	# Eeeeee
Data-fill	Filled background color of the circle	Empty
Data-type	Circular statistical type, which can be "half" or "full"	Full
Data-total	Total data volume, used with data-part	Empty
Data-part	Data volume, used with data-total	Empty
Data-border	Circle style, border can be added, such as inline or outline	Empty
Data-icon	Fontawesome icon style. For details, refer to: Fontawesome Website-Icons.	Empty
Data-icon-size	Icon size	Empty
Data-icon-color	Icon color

How to Use jquery to make a line chart

We recommend that you use amchart or jfreechart jquery to create a line chart ....
However, the principle should be similar. If jquery does not provide the corresponding graphic control, you may have to write it yourself ..
If you want to know the principle, go to the source code of amchart or jfreechart.

How to draw a circular Statistical Chart on a PPT

Click the insert icon on the frequently used bar, and then click the icon type selection. To change the color, double-click the corresponding position.