jQuery+circliful圆形百分比统计图

来源:https://www.sucaihuo.com/js/65.html 2015-04-22 08:08浏览(5152) 收藏

今天我给大家介绍一款圆形统计图circliful,它基于HTML5的Canvas,轻松实现漂亮的圆形统计图,熟悉非常丰富,可以很方便的应用到你的项目中。
jQuery+circliful圆形百分比统计图
分类:统计图 > 数字统计 难易:初级
查看演示 下载资源: 622 下载资源 下载积分: 20 积分

首先引入jQuery库和圆形统计图circliful插件:

<script src="jquery.js"></script> 
<script src="jquery.circliful.js"></script>

HTML

接着我们放4个div,附带相关属性,文章最下面的相关参数有属性参数介绍。

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients"
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"
data-bgcolor="#eee" data-fill="#ddd">
</div>
<div id="myStat2" data-dimension="250" data-text="35%" data-info="New Clients"
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568"
data-bgcolor="#eee" data-type="half" data-fill="#ddd">
</div>
<div id="myStat3" data-dimension="250" data-text="35%" data-info="New Clients"
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568"
data-bgcolor="#eee" data-type="half" data-icon="fa-task">
</div>
<div id="myStat4" data-dimension="250" data-text="35%" data-info="New Clients"
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"
data-bgcolor="#eee">
</div>

最后我们调用circleful插件:

$(function() {
    $('#myStat').circliful();
    $('#myStat2').circliful();
    $('#myStat3').circliful();
    $('#myStat4').circliful();
});

circleful相关参数

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

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 6楼
    12-05 13:37
    c***g
    很好的图表功能啊
  • 头像 5楼
    11-13 12:28
    I***帽
    高达上的图
  • 头像 4楼
    08-07 09:54
    2***3
    高达上的图标
  • 头像 3楼
    07-01 14:06
    凌***云
    帅气的图表!

  • 头像 板凳
    06-18 00:49
    1***6
    熟悉非常丰富
  • 头像 椅子
    06-12 08:22
    w***5
    轻松实现漂亮的圆形统计图
  • 头像 沙发
    09-26 21:39
    C***g
    帅气的图表
1 2