堆栈内存溢出
  繁体   English   中英

如何通过进度条插件逆时针旋转饼图？

[英]How to rotate a pie chart by progressbar plugin counterclockwise?

 原文  2019-03-27 13:07:20  2   1    javascript/ jquery/ html/ css/ jquery-plugins

问题描述

我在github中使用了一个开源插件，这里是链接： https : //github.com/yxfanxiao/jQuery-plugin-progressbar

请查看以下代码：

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"></div>
    <div class="progress-bar position" data-percent="60" data-duration="1000" data-color="#ccc,yellow"></div>
    <div class="progress-bar position" data-percent="20" data-color="#a456b1,#12b321"></div>
    <input type="submit" value="加载">
    <script>
        $(".progress-bar").loading();
        $('input').on('click', function () {
             $(".progress-bar").loading();
        });
    </script>
</body>
</html>

JS：

;
(function ($) {
    $.fn.loading = function () {
        var DEFAULTS = {
            backgroundColor: '#b3cef6',
            progressColor: '#4b86db',
            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');
            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('.right').css({
                    animation: animationRight,
                    opacity: 1
                });
                $target.find('.left').css({
                    animation: animationLeft,
                    opacity: 0
                });
            } 
        });
    }
})(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;
  }
}

请注意，您可以从提供的链接下载包含这些代码的 zip 文件。 可以看出，最初的饼图是顺时针旋转的。 我所需要的只是让它们逆时针旋转。 这看起来很容易，但不幸的是我无法做到几个小时。 任何帮助或建议将不胜感激！ 谢谢！！

编辑：请注意动画的起点（原点）不应更改，应从顶部（北）开始。

1 个解决方案

解决方案1
 1 已采纳  2019-03-27 20:14:23

您应该首先将旋转值乘以其负值； -3.6而不是3.6 。 您还必须相应地更新 CSS，否则它将从底部开始动画，与从顶部开始的原始版本相反。 你可以通过交换左右组件来欺骗它，但这会影响小于 50% 的进度值，因此你应该添加一个 else 语句来处理它。 因此最终的 JS 文件变成如下所示；

JS：

;
(function ($) {
    $.fn.loading = function () {
        var DEFAULTS = {
            backgroundColor: '#f00',
            progressColor: '#adadad',
            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
            };

            $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');
            setTimeout(function () {    
                $rotate.css({
                    'transition': 'transform ' + opts.duration + 'ms linear',
                    'transform': 'rotateZ(' + -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);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript旋转-如何逆时针旋转？ 如何顺时针或逆时针旋转图像，以较短者为准？ 画布-如何独立于饼图中的形状旋转绘制的图像 如何在Charts.js中旋转饼图？ 逆时针旋转图像 使用JQueryRotate逆时针旋转图像 旋转图表“饼”以需要值或角度 D3.js 图表饼图随标签旋转 在 dc.js 饼图中旋转饼图标签 如何更新饼图？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM