用CSS和SVG制作饼图


饼图,即使是最简单的只有两种颜色的形式,用Web技术创建也并不简单,尽管都是一些常见的信息内容,从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现,或是使用大型的JavaScript框架来设计更复杂的图表。

尽管这个东西并不像它曾经看起来那么难以实现,但是也没有什么直接并且简单的方法。但是,现在已经有很多更好、更易于维护的方式来实现它。

基于变换的解决方案


这个方案从HTML的角度来说是最好的:它只需要一个元素,其它的都可以用伪元素、变换和CSS渐变完成。我们从下面这个简单的元素开始:

1

<div class="pie"></div>

现在,假设我们希望显示一个 20% 比例的饼图。灵活性的问题我们后面再解决。我们先给元素添加样式,让它变成一个圆,也就是我们的背景:

图1:第一步是先画一个圆(或者可以说是显示0%比例的饼图)

CSS

1

2

3

4

5

.pie {

  width: 100px; height: 100px;

  border-radius: 50%;

  background: yellowgreen;

}

 

我们的饼图是绿色(特指 yellowgreen )和棕色( #655 )显示的百分比。可能会在比例部分尝试使用 transform 中的 skew ,但是经过几次试验之后表明,这是一个非常混乱的方案。因此,我们用这两种颜色为这个饼图的左右部分分别着色,然后对于我们想要的百分比,使用旋转的伪元素来实现。

我们使用一个简单的线性渐变,给右半部分着棕色:

CSS

1

background-image: linear-gradient(to right, transparent 50%, #655 0);

图2:用一个简单的线性渐变给右半圆着棕色

如图2所示,这样就完成了。现在,我们可以继续为伪元素添加样式,让它成为一个蒙版:

CSS

1

2

3

4

5

6

.pie::before {

  content: '';

  display: block;

  margin-left: 50%;

  height: 100%;

}

图3:虚线内的内容表示伪元素将作为蒙版的区域

你可以在图3中看到我们的伪元素当前定位相对于我们的pie元素。目前,它还没有添加样式,也没有覆盖任何东西,只是一个透明的矩形。在开始添加样式之前,我们先来分析一下:

  • 因为我们希望它覆盖圆的棕色部分,我们需要给它应用一个绿色的背景,使用 background-color: inherit 来避免重复定义,因为我们本来就希望它和父元素的背景颜色保持一致。

  • 我们希望它绕着圆的中心点旋转,中心点在伪元素的左边,所以我们需要给它的 transform-origin ,应用一个 0 50% ,或者是直接一个 left 。

  • 我们不想要它是一个矩形,因为它会超过饼图的边缘,所以我们需要给 .pie 应用 overflow: hidden ,或者是一个恰当的 border-radius 让它成为一个半圆。

综上所述,伪元素的CSS样式如下:

CSS

1

2

3

4

5

6

7

8

9

.pie::before {

  content: '';

  display: block;

  margin-left: 50%;

  height: 100%;

  border-radius: 0 100% 100% 0 / 50%;

  background-color: inherit;

  transform-origin: left;

}

图4:添加样式之后的伪元素(这里用虚线表示)

注意:不要使用 background: inherit; ,要用 background-color: inherit ;,否则父元素背景图像上的渐变也会被继承

我们的饼图目前如图4所示。现在开始有趣起来了!我们可以开始旋转伪元素,给它应用一个 rotate() 变换。要显示 20% 的比例,我们可以给它一个 72deg ( 0.2 x 360 = 72 ),或 .2turn ,这个可读性更好。你可以在图5中看到不同旋转角度值的结果。

图5:分别展示不同百分比的饼图,从左到右: 10%  ( 36deg 或 .1turn ), 20%  ( 72deg 或  .2turn ), 40上一篇 下一篇