用CSS和SVG制作饼图_html/css_WEB-ITnose

上没有动画，我们可以给它设置animation-delay作为内联样式，然后给伪元素应用 animation-delay: inherit; 。综上所述，20%和60%的饼图的HTML代码如下：

1 2

刚刚提出的这个动画的CSS代码如下（省略 .pie 规则，因为没有改变）：

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { /* [Rest of styling stays the same] */ animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }

这时候，可以把HTML标签改成使用百分比作为内容，和一开始希望的一样，然后通过一个简单的脚本为其添加 animation-delay 内联样式。

JavaScript

1 2 3 4

$$('.pie').forEach(function(pie) { var p = parseFloat(pie.textContent); pie.style.animationDelay = '-' + p + 's'; });

图8：没有隐藏文本前的图

把饼图的height转换成 line-height （或添加一个和height值相等的line-height，但是这值是毫无意义的重复代码，因为line-height会自动计算height的值）。

通过绝对定位给伪元素设置大小和位置，这样它不会把文本挤下去。

添加 text-align: center; 让文本水平居中。

最后的代码如下：

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.pie { position: relative; width: 100px; line-height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); color: transparent; text-align: center; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { content: ''; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }

See the Pen qdvRMv by Airen (@airen) on CodePen.

基于SVG的解决方案

SVG使得很多图形工作变得更加简单，饼图也不例外。但是，用path路径创建饼图，需要复杂的数学计算，我们可以使用一点小技巧来代替。

我们从一个圆开始：

1 2 3

现在，给它应用一些基础的样式：

CSS

1 2 3 4 5

circle { fill: yellowgreen; stroke: #655; stroke-width: 30; }

注意：你可能知道，这些CSS属性也可以作为SVG元素的属性使用，如果把可移植性考虑在内的话这可能挺方便的。

图9：从一个绿色的SVG圆形，带一个胖胖的#655描边开始

你可以在图9中看到我们绘制的加了描边的圆。SVG描边不止有stroke和stroke-width属性。还有很多不是特别流行的描边相关的属性可以用于对描边进行微调。其中一个是stroke-dasharray，用于创建虚线描边。例如，我们可以使用如下：

CSS

1	stroke-dasharray: 20 10;

图10：一个简单的虚线描边，通过stroke-dasharray属性创建

这行代码的意思是我们的虚线是20的长度加上10的边距，如图10所示。在这里，你可能会好奇这个SVG描边属性和饼图究竟有什么关系呢。如果我们给描边应用一个值为0的虚线宽度，和一个大于或等于我们当前圆的周长的边距，它可能就清晰一些了（计算周长： C = 2πr , 所以在这里 C = 2π × 30 ≈ 189 ）：

CSS

1	stroke-dasharray: 0 189;

图11：不同stroke-dasharray值对应的效果；从左到右： 0 189; 40 189; 95 189; 150 189

如图11中的第一个圆所示，它的描边的都被移除了，只剩下一个绿色的圆。但是，当我们开始增大第一个值的时候，有趣的事情发生了（图11）：因为边距太长，我们就没有虚线描边了，只有一个描边覆盖了我们指定的圆的周长的百分比。

你可能已经开始弄清楚了这是怎么回事：如果我们把圆的半径减小到一定程度，它可能就会完全被它的描边覆盖，最后得到的是一个非常类似于饼图的东西。例如，你可以在图12中看到：当给圆应用一个25的半径和一个50的stroke-width，像下面的效果：

图12：我们的SVG图像开始像一个饼图了O(∩_∩)O

记住：SVG描边总是相对于元素边缘一半在内一半在外的（居中的）。将来应该可以控制这一行为。

1 2 3 4 5 6 7 8 9 10

circle { fill: yellowgreen; stroke: #655; stroke-width: 50; stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */ }

现在，把它变成我们在上一个解决方案中制作的饼图的样子是非常容易的：我们只需要在描边下面添加一个更大的绿色圆形，然后逆时针旋转90°，这样它的起点就在顶部中间。因为

CSS

1 2 3 4 5

svg { transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; }

图13：最后的SVG饼图

你可以在图13中看到最终结果。这种技术可以让饼图更容易实现从0%到100%变化的动画。我们只需要创建一个CSS动画，让stroke-dasharray从 0 158 变成 158 158 ：

CSS

1 2 3 4 5 6 7 8 9 10 11

@keyframes fillup { to { stroke-dasharray: 158 158; } } circle { fill: yellowgreen; stroke: #655; stroke-width: 50; stroke-dasharray: 0 158; animation: fillup 5s linear infinite; }

作为一个额外的改进，我们可以在圆上指定一个特定半径，使其周长无限接近100，这样我们可以用百分比指定stroke-dasharray的长度，而不需要做计算。因为周长是2πr，我们的半径则是100 ÷ 2π ≈ 15.915494309，约等于16。我们还可以用viewBox特性指定SVG的尺寸，可以让它自动调整为容器的大小，不要使用width和height属性。

经过以上调整，图13的饼图的HTML标签如下：

1 2 3

CSS如下：

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13

svg { width: 100px; height: 100px; transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; } circle { fill: yellowgreen; stroke: #655; stroke-width: 32; stroke-dasharray: 38 100; /* for 38% */ }

注意现在百分比已经可以很方便地改变了。当然，即使已经简化了标签，我们还是不想在绘制每个饼图的时候都重复一遍所有这些SVG标签。这是时候拿出JavaScript来帮我们一把了。我们写一个简单的脚本，让我们的HTML标签直接简单地这样写：

1 2

20% 60%

然后在每个.pie元素里边添加一个内联SVG，包括所有需要的元素和属性。它还会添加一个