CSS如何制作环形百分比图表？CSS变量动态计算实现-css教程-PHP中文网

<ol><li>使用css变量和conic-gradient可高效实现环形百分比图表；2. 通过css变量--percentage动态控制渐变角度，calc(var(--percentage) * 1%)将百分比转换为角度；3. 利用flexbox布局使文本在图表中心居中，并用圆形白色背景确保可读性；4. 动画需通过javascript逐步更新css变量实现平滑过渡；5. 添加aria属性如role="progressbar"和aria-valuenow提升无障碍性，确保图表对所有用户可用。</li></ol>

CSS如何制作环形百分比图表？CSS变量动态计算实现

CSS制作环形百分比图表，利用CSS变量实现动态计算，这在前端开发中其实是个挺巧妙的技巧。它主要依赖于

conic-gradient

登录后复制

这个CSS属性，配合CSS变量的强大灵活性，能让我们构建出既美观又响应式的图表，而且更新起来非常方便。

解决方案

要实现一个环形百分比图表，核心思路是利用

conic-gradient

登录后复制

来绘制扇形区域。想象一下，一个圆环，我们希望它的一部分是代表百分比的颜色，另一部分是背景色。

conic-gradient

登录后复制

正好可以做到这一点，它能从中心点向外辐射，按照角度分配颜色。

我们首先需要一个HTML元素作为图表的容器，比如一个

div

登录后复制

。

立即学习“前端免费学习笔记（深入）”；

<div class="circle-chart" style="--percentage: 75;">
  <span class="chart-text">75%</span>
</div>

登录后复制

这里的

--percentage: 75;

登录后复制

就是我们通过CSS变量传递的百分比值。

接下来是CSS部分，这是关键：

.circle-chart {
  --size: 150px; /* 图表大小 */
  --chart-color: #4CAF50; /* 百分比颜色 */
  --bg-color: #e0e0e0; /* 背景颜色 */
  --percentage: 0; /* 默认百分比，会被行内样式覆盖 */

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  position: relative; /* 用于内部文本定位 */
  overflow: hidden; /* 确保渐变不会溢出 */

  /* 核心：使用conic-gradient绘制环形 */
  background: conic-gradient(
    var(--chart-color) 0% calc(var(--percentage) * 1%),
    var(--bg-color) calc(var(--percentage) * 1%) 100%
  );
}

/* 文本居中显示 */
.circle-chart .chart-text {
  /* 可以选择不使用绝对定位，直接让flexbox居中 */
  /* 或者如果需要更精细的控制，可以这样 */
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  background-color: white; /* 确保文本背景是白色，覆盖下面的渐变 */
  border-radius: 50%; /* 让文本区域也呈圆形 */
  width: calc(var(--size) * 0.7); /* 文本区域大小 */
  height: calc(var(--size) * 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* 给文本区域加点阴影，增加层次感 */
}

登录后复制

这里面，

calc(var(--percentage) * 1%)

登录后复制

是魔术所在。

conic-gradient

登录后复制

的语法是

color angle1 angle2, color angle3 angle4

登录后复制

... 我们的百分比，比如75%，需要转换成角度。整个圆是360度，所以75%就是360 0.75 = 270度。但
conic-gradient
登录后复制
可以直接使用百分比作为角度单位，所以`calc(var(--percentage) 1%)

就直接把我们的百分比值转换成了

登录后复制

conic-gradient`能理解的百分比角度。

var(--chart-color) 0% calc(var(--percentage) * 1%)

登录后复制

意味着从0度（顶部中间）开始，到我们计算出的百分比角度，都是

--chart-color

登录后复制

。

var(--bg-color) calc(var(--percentage) * 1%) 100%

登录后复制

则表示从那个百分比角度开始，到100%（即360度），都是

--bg-color

登录后复制

。

这样，一个简单的环形百分比图表就构建出来了。通过JavaScript，你只需要更新

div

登录后复制

元素的

style.setProperty('--percentage', newPercentageValue)

登录后复制

，图表就会实时更新，非常方便。

为什么选择CSS变量来实现动态百分比图表？

说实话，刚开始接触前端的时候，遇到这种动态图表的需求，我的第一反应可能是直接用JavaScript去操作DOM元素的

style

登录后复制

属性，或者更复杂一点，用SVG。但自从CSS变量（Custom Properties）普及之后，我个人觉得它简直是为这种场景量身定制的。

选择CSS变量，核心原因在于它带来的开发效率和代码整洁度上的巨大提升。

首先，解耦了JavaScript和CSS的职责。以前，JS可能需要知道具体的CSS属性名（比如

background-image

登录后复制

或者

transform

登录后复制

）以及复杂的CSS值字符串。现在，JS只需要负责更新一个简单的数字变量，比如

--percentage

登录后复制

，而所有的视觉计算和样式逻辑都封装在CSS内部。这让JS代码变得更轻量、更专注于数据和交互逻辑，CSS则专注于呈现。

其次，提升了性能。虽然微观层面可能差异不大，但从宏观来看，直接操作CSS变量通常比频繁地修改多个CSS属性（特别是那些可能触发重绘或回流的属性）要高效一些。浏览器对CSS变量的解析和更新有很好的优化。

再者，极大地简化了维护和主题化。如果你需要修改图表的颜色、大小或者背景色，只需要在CSS中调整对应的变量定义即可，而不是在JS代码里寻找并修改硬编码的样式。更棒的是，如果你有多个这样的图表，或者需要根据用户偏好切换主题，只需改变全局或父级元素上的CSS变量值，所有相关的图表都会自动更新，这简直是太方便了。

最后，它让代码更具可读性和语义化。

--percentage

登录后复制

这个变量名本身就清晰地表达了它的用途，比一堆复杂的

calc()

登录后复制

表达式要直观得多。这对于团队协作和未来的代码维护都非常有益。

如何处理图表中的文本显示和居中？

图表中间的百分比文本是必不可少的，它直接告诉用户当前的值。处理文本显示和居中，有几种常见的策略，我个人比较偏爱使用Flexbox或Grid，因为它在响应式布局中表现出色，并且能让内容无论大小都能完美居中。

在上面的HTML结构中，我们已经有一个

<span class="chart-text">

登录后复制

放在了图表容器

<div class="circle-chart">

登录后复制

内部。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

最直接且推荐的方法，就是利用父容器的Flexbox布局能力：

.circle-chart {
  /* ...其他样式... */
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中子项 */
  justify-content: center; /* 水平居中子项 */
  /* ... */
}

.circle-chart .chart-text {
  /* 文本样式，如字体大小、颜色等 */
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  /* 确保文本内容不会被背景渐变覆盖，可以给它一个白色背景 */
  background-color: white;
  border-radius: 50%; /* 让文本区域也呈圆形，增加视觉效果 */
  /* 根据需要调整文本区域的大小，确保能覆盖中心部分 */
  width: calc(var(--size) * 0.7); /* 文本区域大小，比图表小一点 */
  height: calc(var(--size) * 0.7);
  display: flex; /* 再次启用Flexbox，确保文本本身在其中央 */
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* 加点阴影，让它浮起来 */
}

登录后复制

这里，父容器

.circle-chart

登录后复制

被设置为

display: flex;

登录后复制

并使用了

align-items: center;

登录后复制

和

justify-content: center;

登录后复制

，这会将其唯一的子元素（即

.chart-text

登录后复制

）完美地放置在容器的中心。

同时，

.chart-text

登录后复制

自身也被设置为

display: flex;

登录后复制

并居中其内容，这确保了百分比数字本身在

chart-text

登录后复制

这个小圆圈里也是居中的。给

chart-text

登录后复制

一个

background-color: white;

登录后复制

和

border-radius: 50%;

登录后复制

非常关键，它能创建一个白色的圆形区域，覆盖掉

conic-gradient

登录后复制

的中心部分，让百分比数字清晰可见，同时保持了整体的圆形美感。

这种方法的好处是，无论图表大小如何变化，或者文本内容是两位数还是三位数，它都能自动适应并保持居中，非常健壮。

动画效果与无障碍性：提升用户体验的额外考量

一个静态的百分比图表已经很棒了，但如果能加入一些动画，或者确保它对所有用户都可用，那才是真正提升用户体验的关键。

动画效果：

坦白说，直接对

conic-gradient

登录后复制

的

background

登录后复制

属性进行

transition

登录后复制

动画，效果通常不尽如人意，因为

conic-gradient

登录后复制

本身是图像属性，它的渐变变化通常是跳跃式的，而不是平滑的。如果你尝试直接对

--percentage

登录后复制

这个CSS变量进行

transition

登录后复制

，你会发现它并不能让

conic-gradient

登录后复制

平滑过渡。这是CSS动画的一个限制。

不过，我们并非没有办法。一种常见的“欺骗”方式是：

分层动画：使用两个伪元素（
```
::before
```
登录后复制
和
```
::after
```
登录后复制
）或者两个背景层。一个伪元素作为底部的背景圆，另一个作为百分比圆，然后通过
```
transform: rotate()
```
登录后复制
来旋转它们。但这种方法对于百分比图表来说，实现起来会比
```
conic-gradient
```
登录后复制
复杂很多，尤其是在处理百分比小于50%和大于50%时的逻辑。
JavaScript驱动：这是最可靠也最平滑的动画方式。通过JavaScript，我们可以编写一个函数，在设定的时间内，逐步增加或减少
```
--percentage
```
登录后复制
变量的值。例如，从0%到目标百分比，每隔几十毫秒更新一次
```
--percentage
```
登录后复制
。

// 示例：JavaScript驱动的动画
function animatePercentage(element, targetPercentage, duration = 1000) {
  let startPercentage = parseFloat(element.style.getPropertyValue('--percentage')) || 0;
  let startTime = null;

  function animate(currentTime) {
    if (!startTime) startTime = currentTime;
    const progress = (currentTime - startTime) / duration;

    if (progress < 1) {
      const currentPercentage = startPercentage + (targetPercentage - startPercentage) * progress;
      element.style.setProperty('--percentage', currentPercentage.toFixed(2));
      requestAnimationFrame(animate);
    } else {
      element.style.setProperty('--percentage', targetPercentage);
    }
  }
  requestAnimationFrame(animate);
}

// 使用示例：
// const chart = document.querySelector('.circle-chart');
// animatePercentage(chart, 90, 1500); // 动画到90%，持续1.5秒

登录后复制

这种JS驱动的方式虽然增加了JS代码量，但能提供非常流畅且可控的动画效果，用户体验会好很多。

无障碍性（Accessibility）：

确保你的图表对所有用户，包括使用屏幕阅读器或有视觉障碍的用户，都是可访问的，这非常重要。仅仅依靠视觉效果是不够的。

语义化HTML：虽然我们用
```
div
```
登录后复制
和
```
span
```
登录后复制
，但可以给它们添加ARIA属性，让屏幕阅读器理解它们的含义。
- 给图表容器添加
```
role="progressbar"
```
  登录后复制
  ：这告诉屏幕阅读器这是一个进度条。
- 使用
```
aria-valuenow
```
  登录后复制
  、
```
aria-valuemin
```
  登录后复制
  和
```
aria-valuemax
```
  登录后复制
  ：分别表示当前值、最小值和最大值。
```
<div class="circle-chart" style="--percentage: 75;"
     role="progressbar"
     aria-valuenow="75"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-label="任务完成进度">
  <span class="chart-text">75%</span>
</div>
```
登录后复制
当百分比更新时，记得同时用JavaScript更新
```
aria-valuenow
```
登录后复制
的值。
视觉替代文本：即使有文本显示在图表中心，也可以考虑在图表外部提供一个屏幕阅读器可见但视觉上隐藏的文本，或者确保中心显示的文本是可读的。
颜色对比度：确保百分比颜色和背景颜色之间有足够的对比度，以便色盲或视力不佳的用户也能清晰地区分。可以使用WCAG（Web Content Accessibility Guidelines）推荐的对比度工具来检查。