html圆形百分⽐,jQuery圆形统计图（百分⽐）如何使⽤circliful
将jquery库⽂件和jquery.circliful.min.js引⼊到页⾯中。
添加css样式：
.circliful {
position: relative;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
width: 100%;
position: absolute;
text-align: center;
display: inline-block;
}
.circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}
在需要展现统计图的位置加⼊以下html代码：
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"
data-bgcolor="#eee" data-fill="#ddd">
然后在页⾯中加⼊调⽤circliful的代码：
$( document ).ready(function() {
$('#myStat').circliful();
});
然后预览页⾯，你会看到⼀个⾮常简洁漂亮的圆形统计图。
选项设置
Circliful提供了丰富的属性选项设置，基于html5的data属性，以下是设置清单。margin属性值可以为百分比
参数
描述
默认值
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
empty
data-icon-size
图标⼤⼩
empty
data-icon-color
图标颜⾊
empty

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。