javascript - 如何使用 CSS 设置 easypiechart 的样式？

Question

我想创建一个如下所示的计数器圆，我使用 easy-pie-chart但我不知道如何像下面这样设计创建的圆圈。有没有一种方法可以使用 css 来设置它们的样式并使其看起来如下所示？

任何资源或文章都有帮助。

Answer 1

实际上，这(或非常接近于此的东西)技术上可以通过仅使用纯 CSS 来完成。

您正在寻找的是一种相对较新的东西，称为动画。

让我们定义一些要使用的标记。没什么特别的，只是:

<div id="wheel"></div>

然后，让我们给它一些 CSS:

#wheel {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 5px solid #90F090;
    border-right: 5px solid #000070;
}

由于这涉及到动画，我不会在此过程中发布每张图片，但它看起来是这样的:

这看起来很接近您正在寻找的内容，并且通过一些操作，您可以让它看起来不错，但我假设您希望它以正确的百分比动画。 p>

为了演示，给它添加一个:hover效果来旋转它:

#wheel:hover {
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
}

#wheel {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 5px solid #90F090;
  border-right: 5px solid #000070;
}
#wheel:hover {
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  transform: rotate(80deg);
}

<div id="wheel">

但是，您希望它自己动画。从 CSS3 开始，有一种方法可以做到这一点!它被称为动画。

无论如何，一般语法是like this :

/* Chrome, Safari, Opera */
-webkit-animation: <name> <duration> <direction> <delay> <count> <timing function>; 

/* Standard syntax */
animation: <name> <duration> <direction> <delay> <count> <timing function>; 

• = 你给它起的名字。
• = 持续多长时间。
• > <direction> = 哪个方向(正常/反向/备用)
• = 加载到开始的时间。
• = 做多少次(或无限次)。
• > <timing function> = 指定动画播放的速度。

呸。好多啊。实际上，现在我们可以开始了。

弄清楚所有这些之后，就该创建动画了。

语法如下:

/* "Standard" way */
@keyframes <name> { 
    from {
        /* After <duration>, play the animation FROM this state */
     } 
     to {
        /* Until it gets TO this state within <duration>'s time */
        /* Unless <direction> is reverse/alternate */
     }
     /* Then repeat <count> times. */
}

/* Engine specific implementations */
@-webkit-keyframes <name>
@-moz-keyframes <name>
@-ms-keyframes <name>
@-o-keyframes <name>

此外，您可以使用 percentages 而不是 from/to (5% 通过动画，在这里。25% 通过，在这里，等等)。事实上，from just 表示 0%，to 表示 100%。

现在，将旋转从 0 度到 359 度(不是 360 度，因为 360 度 = 0 度，它不会移动)固定在“从”和“到”内，您就有了一个纺车。

#wheel {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 5px solid #90F090;
    border-right: 5px solid #000070;
    
    /* Chrome, Safari, Opera */
    -webkit-animation: spin 5s linear 2s infinite normal; 
    
    /* Standard syntax */
    animation: spin 5s linear 2s infinite normal; 
} 


/* Chrome, Safari, Opera */
@-webkit-keyframes spin { 
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
     } to {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
     }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
     } to {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
     }
}

<div id="wheel"></div>

这就是问题所在。还记得我说过您可以技术上使用纯 CSS 实现这种效果吗？

好吧，我们使用不同的颜色边框来模拟移动的东西(您的“加载”条或“饼图”值)。在一个圆中，每个边框正好占据它的 25%...这意味着您在任何时候只能为 90 度的圆弧设置动画。 p>

解决方案？重叠两个圆圈，通过稍微旋转一个圆圈来“隐藏”所需的数量。

#container {
    width: 110px;
    height: 110px;
    padding: 0;
    margin: 0;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: spin 5s linear 2s infinite normal; 
    
    /* Standard syntax */
    animation: spin 5s linear 2s infinite normal; 
}

#wheel, #hide {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 5px solid #90F090;
    border-right: 5px solid #000070;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
} 

#hide {
    border-color: #90F090;
    border-right: 5px solid transparent;
    z-index: 11;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes spin { 
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
     } to {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
     }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
     } to {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
     }
}

<div id="container">
    <div id="hide"></div>
    <div id="wheel"></div>
</div>

(Here)是一个显示较小旋转量的 fiddle 。

使用透明边框/重叠的组合(或者像 Tambo 回答的那样，使用背景渐变)，您可以轻松实现您想要的任何弧长。

要有一个加载循环，你可以尝试一下动画，直到你得到你想要的工作。

但是，您使用的饼图库本身可以很好地处理这项工作。 :)

注意:所有这些的目的是使用纯 CSS 向您展示动画和圆圈。其余的你可以学习并根据自己的喜好进行调整。