HTML5圓形百分比進度條插件circleChart(記錄)
阿新 • • 發佈:2017-06-07
orm syn math unit 配置參數 頁面 進度條 使用方法 dom
介紹:一款可以描繪圓圈進度條的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(記錄)