zoukankan      html  css  js  c++  java
  • 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%" })
  • 相关阅读:
    第六章 实验报告
    第三次实验报告
    第五章 循环结构课后反思
    第二次实验报告
    第一次实验报告
    第一次作业
    第九章
    指针实验报告
    第七次实验报告
    第六章
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/12360311.html
Copyright © 2011-2022 走看看