介绍:一款能够描绘圆圈进度条的jQuery插件(可用做统计图)
circleChart使用方法
在页面中引入jquery和circleChart.min.js文件。html
HTML结构jquery
使用一个
元素做为该圆形百分比进度条的HTML结构：dom
初始化插件字体
在页面DOM元素加载完毕，能够经过circleChart()方法来初始化该圆形百分比进度条插件。动画
$("#circle1").circleChart();
配置参数
circleChart.js圆形百分比进度条插件的默认配置参数以下：spa
color: "#3459eb", // 进度条颜色
backgroundColor: "#e6e6e6", // 进度条以外颜色
background: true, // 是否显示进度条以外颜色
speed: 2000, // 出现的时间
widthRatio: 0.2, // 进度条宽度
value: 66, // 进度条占比
unit: "percent",
counterclockwise: false, // 进度条反方向
size: 110, // 圆形大小
startAngle: 0, // 进度条起点
animate: true, // 进度条动画
backgroundFix: true,
lineCap: "round",
animation: "easeInOutCubic",
text: false, // 进度条内容
redraw: false,
cAngle: 0,
textCenter: true,
textSize: false,
textWeight: "normal",
textFamily: "sans-serif",
relativeTextSize: 1 / 7, // 进度条中字体占比
autoCss: true,
onDraw: false
实例
$(".circleChart").circleChart({
size: 300,
value: 50,
text: 0,
onDraw: function(el, circle) {
circle.text(Math.round(circle.value) + "%"); // 根据value修改text
}
});
setInterval(function() {
$(".circleChart").circleChart({
value: Math.random() * 100
});
}, 4000); // 定时修改进度条value
如果觉得《html5百分比圆圈插件 HTML5圆形百分比进度条插件circleChart(记录)》对你有帮助，请点赞、收藏，并留下你的观点哦！
