Question

我正在使用https://github.com/yxfanxiao/jQuery-plugin-progressbar来绘制动画饼图，并使用以下确切代码：

JS：

;
(function ($) {
    $.fn.loading = function () { 



        var DEFAULTS = {
            backgroundColor: '#4b86db',
            progressColor: '#b3cef6',
            percent: 75,
            duration: 2000
        };  

        $(this).each(function () {
            var $target  = $(this);

            var opts = {
            backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
            progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
            percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
            duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
            };
            // console.log(opts);

            $target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');

            $target.find('.background').css('background-color', opts.backgroundColor);
            $target.find('.left').css('background-color', opts.backgroundColor);
            $target.find('.rotate').css('background-color', opts.progressColor);
            $target.find('.right').css('background-color', opts.progressColor);

            var $rotate = $target.find('.rotate');
            //$rotate.set(0);
            setTimeout(function () {    
                $rotate.css({
                    'transition': 'transform ' + opts.duration + 'ms linear',
                    'transform': 'rotate(' + opts.percent * -3.6 + 'deg)'
                });
            },1);       

            if (opts.percent > 50) {
                var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
                var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';  
                $target.find('.left').css({
                    animation: animationRight,
                    opacity: 1
                });
                $target.find('.right').css({
                    animation: animationLeft,
                    opacity: 0
                });
            } 
            else
            {
                var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
                var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';  
                $target.find('.left').css({
                    animation: animationRight,
                    opacity: 0
                });
                $target.find('.right').css({
                    animation: animationLeft,
                    opacity: 1
                });
            }
        });
    }
})(jQuery);

CSS：

.position {
  float: left;
  margin: 100px 50px;
}

.progress-bar {
  position: relative;
  height: 100px;
  width: 100px;
}
.progress-bar div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.progress-bar div span {
  position: absolute;
  font-family: Arial;
  font-size: 25px;
  line-height: 75px;
  height: 75px;
  width: 75px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
.progress-bar .background {
  background-color: #b3cef6;
}
.progress-bar .rotate {
  clip: rect(0 50px 100px 0);
  background-color: #4b86db;
}
.progress-bar .left {
  clip: rect(0 50px 100px 0);
  opacity: 1;
  background-color: #b3cef6;
}
.progress-bar .right {
  clip: rect(0 50px 100px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress Bar</title>
    <link rel="stylesheet" href="jQuery-plugin-progressbar.css">
    <script src="jquery-1.11.3.js"></script>
    <script src="jQuery-plugin-progressbar.js"></script>
</head>
<body>
    <div class="progress-bar position" data-percent="30" data-duration="1000" data-color="#4b86db,#b3cef6"></div>
    <div class="progress-bar position" data-percent="60" data-duration="1000" data-color="yellow,#ccc"></div>
    <div class="progress-bar position" data-percent="84" data-color="#12b321,#a456b1"></div>
    <input type="submit" value="Draw">
    <script>
        $(".progress-bar").loading();
        $('input').on('click', function () {
             $(".progress-bar").loading();
        });
    </script>
</body>
</html>

输出如下：

我需要做的是增加饼图的大小（宽度和高度）。更改宽度和高度值仅是行不通的，其他值似乎也需要进行相应的更改，但仍然无法正确显示图形。

它们现在是100X100，如何将它们制成200X200？任何帮助将不胜感激！

谢谢！

Answer 1

尝试一下？

.position {
  float: left;
  margin: 100px 50px;
}

.progress-bar {
  position: relative;
  height: 200px;
  width: 200px;
}
.progress-bar div {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.progress-bar div span {
  position: absolute;
  font-family: Arial;
  font-size: 50px;
  line-height: 150px;
  height: 150px;
  width: 150px;
  left: 25px;
  top: 25px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
.progress-bar .background {
  background-color: #b3cef6;
}
.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}
.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}
.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

增大由progressbar.js创建的饼图的大小（宽度和高度）

1 个答案: