HTML5圓形百分比進度條插件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 cirstyle" id="1">
      <div class="pos"><p>有效線索</p><p>邀約到店率</p></div>
</div>

 

 

初始化插件

在頁面DOM元素加載完畢，可以通過circleChart()方法來初始化該圓形百分比進度條插件。

$(".circleChart#1").circleChart（{}）

 

 配置參數

circleChart.js圓形百分比進度條插件的默認配置參數如下：

 $(".circleChart#1").circleChart({
            size: 100,         // 圓形大小
            value: 80,         // 進度條占比
            color: "#EC808D",  // 進度條顏色
            backgroundColor: "#DDDADA",  // 進度條之外顏色
        
            startAngle: -25,
            text: true,
            background: true, // 是否顯示進度條之外顏色
            speed: 2000, // 出現的時間
            widthRatio: 0.1, // 進度條寬度
            value: 66, 
            unit: "percent",
            counterclockwise: false, // 進度條反方向
            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, // 進度條中字體占比

            onDraw: function(el, circle) {
                circle.text(Math.round(circle.value) + "%");
            }
        });

 

改變 文本 百分比的位置：

 $('.circleChart#1 .circleChart_text').css({ "top": "20%" })