首页 > 代码库 > HTML5圆形百分比进度条插件circleChart(记录)

HTML5圆形百分比进度条插件circleChart(记录)

2024-10-02 08:30:39   216人阅读

介绍:一款可以描绘圆圈进度条的jQuery插件(可用作统计图)

circleChart使用方法

在页面中引入jquery和circleChart.min.js文件。

<script src="http://www.mamicode.com/path/to/jquery.min.js"></script>
<script src="http://www.mamicode.com/path/to/circleChart.min.js"></script>　

HTML结构

使用一个<div>元素作为该圆形百分比进度条的HTML结构：

<div class="circleChart" id="circle1"></div>

初始化插件

在页面DOM元素加载完毕，可以通过circleChart()方法来初始化该圆形百分比进度条插件。

$("#circle1").circleChart();

 配置参数

circleChart.js圆形百分比进度条插件的默认配置参数如下：

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圆形百分比进度条插件circleChart(记录)


联系
我们