纯CSS3或SVG动画甜甜圈图表

时间：2015-06-08 15:01:08

标签： html css css3 svg charts

我正在寻找纯CSS3或SVG动画圆环图。

  • 需要中圈填充颜色
  • 用灰色和蓝色分割的外圆即：蓝色80％完整，灰色20％剩余。
  • 需要在圆圈中间的文字。

我找到了一个例子http://jsfiddle.net/4azpfk3r/

任何人都可以帮我创建/编辑上面的内容吗？它的中途。

<div class="item css">
   <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
     <title>Layer 1</title>
       <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
      </g>
   </svg>
 </div>

由于

1 个答案:

答案 0 :(得分：32)

试试这个，它使用stroke-dasharray创建长度为251.2的笔画，请参阅here以获取更多参考。 stroke-dashoffset属性指定到破折号模式的距离以开始破折号see here

＆＃13;
＆＃13; 
<svg width="100%" height="100%" viewbox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="tomato"/>
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#00CCFF" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
    <text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
＆＃13;
＆＃13;
＆＃13;

此处笔划填充80％（使用251.2 - 251.2 * 80/100计算，251.2是使用2 * 3.14 * 40计算的圆的周长）。即stroke-dashoffset = perimeter - perimeter * amount / 100也将stroke-dasharray设为perimeter。 perimeter = 2 * 3.14 * radius。

您可以查看 this blog post ，轻松解释甜甜圈图表的制作。

查看50％填充的圆圈

＆＃13;
＆＃13; 
<svg width="100%" height="100%" viewbox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="tomato"/>
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#00CCFF" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
    <text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
＆＃13;
＆＃13;
＆＃13;

多环演示：

＆＃13;
＆＃13; 
<svg width="300px" height="300px" viewbox="0 0 100 100">
    <!-- Center color -->
    <circle cx="50" cy="50" r="40" fill="#eee"/>
    <!-- Default color of ring -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
    
    <!-- Progress -->
    <!-- The amount shown as 'filled' is the amount the ring fills, starting from right center (3 o' clock) -->
    <!-- 100% fill -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" stroke-dasharray="251.2" stroke-dashoffset="0"/>
    <!-- 80% fill -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
    <!-- 70% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" stroke-dasharray="251.2" stroke-dashoffset="75.36"/>
    <!-- 50% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
    <!-- 40% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" stroke-dasharray="251.2" stroke-dashoffset="150.72"/>
    <!-- 20% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" stroke-dasharray="251.2" stroke-dashoffset="200.96"/>
    <!-- Center Text -->
    <text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
＆＃13;
＆＃13;
＆＃13;

动画演示（未在所有浏览器中测试）

＆＃13;
＆＃13; 
$(".progress").each(function() {
  var dataProgress = $(this).attr("stroke-dashoffset");
  $(this).attr("stroke-dashoffset", "251.2");
  $(this).animate({
    "stroke-dashoffset": dataProgress
  },1500)
})
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="300px" height="300px" viewbox="0 0 100 100">
        <!-- Center color -->
        <circle cx="50" cy="50" r="40" fill="#eee"/>
        <!-- Default color of ring -->
        <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="white"/>
        
        <!-- Progress -->
        <!-- The amount shown as 'filled' is the amount the ring fills, starting from right center (3 o' clock) -->
        <!-- 100% fill -->
        <circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" stroke-dasharray="251.2" stroke-dashoffset="0"/>
        <!-- 80% fill -->
        <circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
        <!-- 70% filled -->
        <circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" stroke-dasharray="251.2" stroke-dashoffset="75.36"/>
        <!-- 50% filled -->
        <circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
        <!-- 40% filled -->
        <circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" stroke-dasharray="251.2" stroke-dashoffset="150.72"/>
        <!-- 20% filled -->
        <circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" stroke-dasharray="251.2" stroke-dashoffset="200.96"/>
        <!-- Center Text -->
        <text x="40" y="50" fill="black" font-size="10">Text</text>
    </svg>
＆＃13;
＆＃13;
＆＃13;

使用jquery的解决方案：

为每个data-fill=amount提供.progress，jquery将完成其余的工作

＆＃13;
＆＃13; 
var radius = parseInt($("#radius").attr("r")) // Get the radius of the circle 
var perimeter = 2 * 3.14 * radius;

$(".progress").each(function(){
  var amount = parseFloat($(this).attr("data-fill"));
  var fillAmount = perimeter - perimeter * amount / 100;
  
  $(this).attr({
    "stroke-dasharray":perimeter,
    "stroke-dashoffset":fillAmount
  })
  
})
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="300px" height="300px" viewbox="0 0 100 100">
    <!-- Center color -->
    <circle cx="50" cy="50" r="40" fill="#eee" id="radius"/>
    <!-- Default color of ring -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
    
    <!-- Progress -->
    <!-- The amount shown as 'filled' is the amount the ring fills, starting from right center (3 o' clock) -->
    <!-- 100% fill -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" data-fill="100" class="progress"/>
    <!-- 80% fill -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" data-fill="80" class="progress"/>
    <!-- 70% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" data-fill="70" class="progress"/>
    <!-- 50% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" data-fill="50" class="progress"/>
    <!-- 40% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" data-fill="40" class="progress"/>
    <!-- 20% filled -->
    <circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" data-fill="20" class="progress"/>
    <!-- Center Text -->
    <text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题