HTML5圓形百分比進度條外掛程式circleChart(記錄)

標籤：min   nbsp   htm   query   cloc   大小   chart.js   out   css   

介紹:一款可以描繪圓圈進度條的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

 

 

HTML5圓形百分比進度條外掛程式circleChart(記錄)