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 files and jquery.circliful.min.js into the page.
<src= "Http://code.jquery.com/jquery-1.10.2.min.js"></ 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:
<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:
<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>
After the area block has been filled out, we now need to initialize it:
< Script > $ (document). Ready (function() { $ ('#myStat'). Circliful (); </ 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 |
Empty
|
JQuery Round chart actual combat development