zoukankan      html  css  js  c++  java
  • 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
     
  • 相关阅读:
    PHP学习笔记一
    抓取【你懂的】应用的数据
    抓取[今日新闻]应用的数据
    开源项目Html Agility Pack实现快速解析Html
    澳大利亚玩全攻略(图文全彩版)
    畅游夏威夷,看这本就够了
    科学丨光的折射
    未解之谜.下
    科学是什么
    大脑奥秘知多少:脑科学初探
  • 原文地址:https://www.cnblogs.com/z-e-r-o/p/6956373.html
Copyright © 2011-2022 走看看