jQuery 圆形统计插件circliful

circliful介绍
是一款jquery+css的小工具，用来显示"环状"图表的工具。

circliful兼容性
circliful插件是基于HTML5上开发的，所以circliful支持IE10以上，以及各大浏览器。

circliful下载
链接：https://pan.baidu.com/s/183be9ztUqECeziYXr7tWmA
提取码：9nsu

circliful使用
1.引用css和js样式

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.circliful.js"></script>

2.创建div环图

<div name='name' class="circliful" id="myStat" data-dimension="220" data-text='98%' data-info='准点率'
    data-percent="98" data-width="12" data-fgcolor="#02FF9A" data-bgcolor="#3C4247">
</div>

/* 自定义 circliful 样式 */
.circliful .circle-text {
    font-size: 32px !important;
    line-height: 148px !important;
}
.circliful .circle-info {
    font-size: 24px !important;
    line-height: 220px !important;
    color: #FFFFFF;
}

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	图标颜色

3.调用circliful()生成环图

<script>
    $(document).ready(function() {
        $('#myStat').circliful();
    });
</script>

jQuery 圆形统计插件circliful

猜你喜欢