1. 效果图
2. 插件github地址
https://github.com/kottenator/jquery-circle-progress
3. 问题
- 如何在圆形环状图中插入文字?
相信很多人照着官方示例画出了环状图,但是纠结如何在里面添加相应进度的文字。比如以上效果图中显示的第二个图,如何在里面添加“100%”呢?
首先假设你参考官方的usage在html中写了如下代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>//引入jquery插件
<script src="jquery-circle-progress/dist/circle-progress.js"></script>//引入插件核心代码
<div id="circle">
//重要
//新增span标签(不一定必须是span,只是需要添加一个存文字的标签)
<span></span>
</div>
<script>
//创建环状元实例
$('#circle').circleProgress({
value: 0.75,
size: 80,
fill: {
gradient: ["red", "orange"]
}
});
</script>
在代码中创建了<span>标签来存储文字后,下一步需要做的就是设置"#circle"和<span>的样式。具体样式的设置需要参考你想实现的效果,这里视情况而定。
最后一步所需就是为该圆形环状图设置监听事件,使文字可以随环状图进度加载的状态变化而改变。ps:圆形环状图详细的监听事件请查看github官方文档。
4. demo
最后放个小demo加深下大家的理解。效果图如下:
关键的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jquery.min.js"></script>
<script src="./js/circle-progress.js"></script>
<style>
#circle {
position: relative;
text-align: center;
font-size: 13px;
}
#circle span {
position: absolute;
top: 15px;
left: 0;
width: 100%;
text-align: center;
line-height: 13px;
}
</style>
</head>
<body>
<div id="circle">
<span></span>
</div>
<script type="text/javascript">
$("#circle").circleProgress({
value: 0.75,
size: 45,
startAngle: -Math.PI / 2,
thickness: '5.5',
fill: {
gradient: ["orange", "red"]
}
}).on('circle-animation-progress', function (event, progress, stepValue) {
$(this).find('span').html(stepValue.toFixed(2) * 100 + '%');
});
</script>
</body>
</html>