如何使用CSS制作动态饼图

除此之外，我们可以使用 CSS 变量轻松调整不同的值，因此我们不必为更改 CSS 代码而烦恼。

饼图的 HTML 结构

正如我上面提到的，我们有一个单一的

60%

我们还将 CSS 变量添加为内联样式。

• --p：这个变量应该包含百分比值作为一个数字（不带%符号）。它应该与内容相同。

• --b：这个变量将定义边框的粗细。

• --c：这个变量将定义主要颜色。

为了本文和演示，我使用单字符变量来保持代码简短。但在生产环境中使用代码时，最好考虑更明确的变量。示例：--percentage、--border-thickness和--main-color。

饼图的 CSS 设置

我们首先从样式化我们的内容开始。这部分很简单，代码如下：

.pie {
  --w: 150px;
  width: var(--w);
  aspect-ratio: 1;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

我将元素定义为inline-grid使用place-content: center. 我们aspect-ratio: 1用来确保元素保持方形。我们也可以使用height: var(--w)，但学习和使用新的 CSS 属性总是好的。

你可能想知道为什么我使用变量来定义宽度而不是简单地设置  width: 150px. 我需要知道宽度的值以备将来使用，因此我将其定义为变量。

剩下的所有 CSS 都是非常基本的文本样式。随意更新它。

让我们继续讨论有趣的部分——我们组件的主要形状。为此，我们将使用具有以下样式的伪元素：

.pie:before{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

一个覆盖所有区域的伪元素，position: absolute这要归功于inset: 0. 是的，它又是一个新的 CSS 属性，它是top, right, bottom, and的简写right。

您可以在此处阅读更多信息

https://developer.mozilla.org/en-US/docs/Web/CSS/inset

然后我们把它变成一个圆圈 ( border-radius: 50%) 并应用一个conic-gradient(). 请注意我们定义为内联样式的 CSS 变量的使用（--c用于颜色和--p百分比）。

到目前为止，这将为我们提供以下结果：

我们越来越近了！这conic-gradient()是给我们一个双色渐变。从0%到p%主色，其余部分为透明色（用十六进制值定义#0000）。

为了只保留边框部分，我们将使用 amask来隐藏中间部分。这次我们将使用radial-gradient()：

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

以上作为背景应用将为我们提供以下信息：

注意定义边框粗细的变量的使用--b（在上面显示为蓝色）。

现在想象红色部分是不可见部分，蓝色部分是可见部分。如果我们对属性使用相同的渐变，这就是我们将得到的mask：

我们的饼图包含一个元素和几行 CSS 代码。

.pie {
  --w:150px;
  
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

和 HTML：

60%