用圆圈来显示统计数据信息的jQuery插件：Circliful
jopen
10年前
Circliful 是个用来展示统计数据的 jQuery 插件。
-
用圆来显示统计的数据信息，不需要图片
-
基于 HTML5 canvas 和 jQuery
-
很多选项可以设置数据属性
| Data Attribute | Explanation | Values | Default |
|---|---|---|---|
| data-dimension | Is the height and width of the element | Integer | 200px on 200px |
| data-text | Will be displayed inside of the circle over the info element | Alphanumeric | empty |
| data-info | Will be deisplayed inside of the circle bellow the text element (can be empty if you dont want to show info text) | Alphanumeric | empty |
| data-width | Is the thickness of circle | Integer | 15px |
| data-fontsize | Is the font size for the text element | Integer | 15px |
| data-percent | Can be 1 to 100 | Integer | 50% |
| data-fgcolor | Is the foreground colour of the circle | RGB | #556b2f |
| data-bgcolor | Is the background color of the cicle | RGB | #eeeeee |
| data-fill | Is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle) | RGB | empty |
| data-type | Full or half circle for example data-type="half" if not set the circle will be a full circle | half | empty |
| data-total | If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total="750" and data-part="350" and the circle will show the percentage value 36,85% | Integer | empty |
| data-part | See data-total explanation. | Integer | empty |
| data-border | Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline. | inline or outline | empty |
| data-icon | Fontawesome icon class. | Every Fontawesome Icon without the "fa-" for example not fa-plus just plus. Fontawesome Website - Icons | empty |
| data-icon-size | Will set the font size of the icon. | Integer | empty |
| data-icon-color | Will set the font color of the icon. | RGB | empty |
