jQuery圆形统计图开发实例

前端之家收集整理的这篇文章主要介绍了jQuery圆形统计图开发实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery圆形统计图开发的方法分享给大家供大家参考。具体分析如下:

这里我们要给大家介绍一款圆形统计图circliful,它基于HTML5的画布和jQuery,无需使用图像轻松实现圆形统计图,而且有很多属性设置,使用起来非常方便。效果图如下:

首先我们需要将jquery库文件和jquery.circliful.min.js引入到页面中。

代码如下:

就这么简单,只需轻松几部就可以完成帅气的统计图了。

下面是插件的基本属性说明:

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

显示在圆圈内侧的文字内容显示在data-text下的说明信息文字大小px统计百分比%,1-100统计类型,可以是”half”或”full”

希望本文所述对大家的jQuery程序设计有所帮助。

猜你在找的jQuery相关文章