详细信息
jCirclize 是一个小巧但可定制的 jQuery 百分比/进度表插件，它在画布元素上绘制一个动画圆/环来表示百分比数据。
也可以看看：
10 个最佳圆形/径向进度条
如何使用它：
1. 将最新版本的 jQuery 库和 jCirclize 插件的文件导入到文档中。
<link href="css/jCirclize.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
crossorigin="anonymous"></script>
<script src="dist/jquery.jCirclize.js"></script>2. 创建一个要放置画布的容器。
<div id="example">
</div>3. 调用容器元素上的函数以生成默认百分比/进度表。
$(document).ready(function() {
$('#example').circlize();
});4. 自定义背景/填充颜色。
$(document).ready(function() {
$('#example').circlize({
background: "rgba(20,20,20,0.5)",
foreground: "#1a1a1a"
});
});5. 自定义笔画宽度。
$(document).ready(function() {
$('#example').circlize({
stroke: 20
});
});6. 定义要表示的百分比数据。
$(document).ready(function() {
$('#example').circlize({
perc: 50,
usePercentage: true
});
});7. 设置百分比/进度表的大小。
$(document).ready(function() {
$('#example').circlize({
radius: 100
});
});8. 自定义填充动画的持续时间。
$(document).ready(function() {
$('#example').circlize({
duration: 1000
});
});9. 自定义最小值/最大值。
$(document).ready(function() {
$('#example').circlize({
min: 100,
max: 100
});
});变更日志：
2020-03-01
将var更改为let
2018-11-21
固定代码风格
2018-11-19
使用渐变作为前景。
2018-11-17
固定代码样式和自述文件
添加了库的香草版本
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。