如何理解jQuery圆形统计图-创新互联

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

创新互联公司：自2013年起为各行业开拓出企业自己的“网站建设”服务，为1000多家公司企业提供了专业的网站设计制作、成都网站建设、网页设计和网站推广服务， 按需网站设计由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。

今天我给大家介绍一款圆形统计图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圆形统计图了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

网站名称：如何理解jQuery圆形统计图-创新互联
转载注明：http://shouzuofang.com/article/ijesd.html