Circliful简约的圆形统计图表jQuery插件

时间：2015-09-01 编辑：简简单单来源：一聚教程网

Circliful是一款基于jQuery的圆环显示统计信息的插件，它是基于HTML5与CSS3，没有使用任何图片。Circliful内置有许多选项可以设置数据属性，可与Font Awesome集成。

Circliful特点

显示的信息为圆形统计，不需要添加额外图像文件
展示的相关信息为圆形统计，使用无图像
基于HTML5的Canvas画布和jQuery
许多选项可以被设置为数据的属性
可以与Font Awesome无缝整合
如何使用Circliful

引入 Circliful & jQuery 文件到你的网页中

css/jquery.circliful.css" rel="stylesheet" type="text/css" />

如果您想使用Font Awesome字体图标，你也需要引入Font Awesome的CSS文件到您的网站。

你需要添加一个元素到你的网站有一个唯一的ID的数据属性，例如下面的代码：

最后在文档加载完毕以后，初始化插件，调用circliful()方法

Circliful可选参数

参数	描述	默认值
data-dimension	圆形图的宽度和高度px	250
data-text	显示在圆圈内侧的文字内容	empty
data-info	显示在data-text下的说明信息	empty
data-width	圆圈的厚度px	15
data-fontsize	圈内文字大小px	15
data-percent	圆圈统计百分比%，1-100	50
data-fgcolor	圆圈的前景色	#556b2f
data-bgcolor	圆圈的背景色	#eeeeee
data-fill	圆形的填充背景色	empty
data-type	圆形统计类型，可以是”half”或”full”	full
data-total	数据总量，和data-part配合使用	empty
data-part	数据量，与data-total配合使用	empty
data-border	圆形样式，可以加边框，如inline或outline	empty
data-icon	Fontawesome图标样式，详情可参照：Fontawesome Website ? Icons	empty
data-icon-size	图标大小	empty
data-icon-color	图标颜色