特性:
用圆形来显示信息,没有使用图片
基于html5 canvas 和 jquery
N多选项可设置
集成fontawesome
如何使用circliful
引入circliful & jquery
[html]
[/html]
其中jquery.circliful.css为如下代码
[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;
}
[/css]
在需要展现统计图的位置加入以下html代码:
最后在页面最后加入调用代码
[js]
$( document ).ready(function() {
$(‘#myStat’).circliful();
});
[/js]
选项设置
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
empty
data-icon-size
图标大小
empty
data-icon-color
图标颜色
empty