今天我给大家介绍一款圆形统计图circliful，它基于HTML5的画布和jQuery，无需使用图像轻松实现圆形统计图，而且有很多属性设置，使用起来非常方便。

如何使用circliful

将jquery库文件和jquery.circliful.min.js引入到页面中。

添加css样式：

在需要展现统计图的位置加入以下html代码：

然后在页面中加入调用circliful的代码：

然后预览页面，你会看到一个非常简洁漂亮的圆形统计图。

选项设置

Circliful提供了丰富的属性选项设置，基于html5的data属性，以下是设置清单。

参数            描述            默认值        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            图标颜色            empty