如何理解jQuery圆形统计图

这期内容当中小编将会给大家带来有关如何理解jQuery圆形统计图，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

今天我给大家介绍一款圆形统计图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

上述就是小编为大家分享的如何理解jQuery圆形统计图了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。