jQuery circular statistics plugin circliful
Add-ons
Plugin Description: Display information as circular statistics without requiring additional image files.
Display information as circular statistics without requiring additional image files.
Display relevant information as circular statistics without using images.
Based on HTML5 Canvas and jQuery
Many options can be configured as data attributes
Font Awesome integration
How to Use circliful
Include circliful and jQuery on your website
1 2 3 | <link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" /><script src="js/jquery.circliful.min.js"></script> |
If you want to use Font Awesome icons, you also need to include the CSS file on your website.
Add an element to your website with a unique ID and the required data attributes, for example:
1 | <div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div> |
Add this code at the end of your website
1 2 3 4 5 | <script>$( document ).ready(function() { $('#myStat').circliful(); });</script> |
Data Options (Properties)
Please refer to the official documentation
============The following content is provided by Travel Map Provided=================
Parameter Details:
| Parameters | Description | Default Value |
| data-dimension | Width and height of the circular chart in px | 250 |
| data-text | Text displayed inside the circle | empty |
| data-info | Description displayed below data-text | empty |
| data-width | Circle thickness in px | 15 |
| data-fontsize | Text size inside the circle in px | 15 |
| data-percent | Circle statistics percentage, 1-100 | 50 |
| data-fgcolor | Circle foreground color | #556b2f |
| data-bgcolor | Circle background color | #eeeeee |
| data-fill | Circular fill background color | empty |
| data-type | Circular statistics type, can be either "half" or "full" | full |
| data-total | Total data amount, used together with data-part | empty |
| data-part | Data amount, used together with data-total | empty |
| data-border | Circular style, can include borders, such as inline or outline | empty |
| data-icon | Font Awesome icon style, see:Fontawesome Website – Icons | empty |
| data-icon-size | Icon size | empty |
| data-icon-color | Icon color |
评论