用圓圈來顯示統計數據信息的jQuery插件：Circliful

jopen 10年前發布 | 26K 次閱讀 Circliful 其他jQuery插件 jQuery插件

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