HTML5圓形百分比進度條插件circleChart(記錄)

介紹:一款可以描繪圓圈進度條的jQuery插件(可用作統計圖)

circleChart使用方法

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

<script src="path/to/jquery.min.js"></script>
<script src="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