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

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

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

conic-gradient

解决方案

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

conic-gradient

conic-gradient

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

div

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

  75%

这里的

--percentage: 75;

接下来是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

conic-gradient

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

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

--chart-color

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

--bg-color

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

div

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

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

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

style

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

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

background-image

transform

--percentage

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

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

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

--percentage

calc()

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

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

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

Ideogram

Ideogram是一个全新的文本转图像AI绘画生成平台，擅长于生成带有文本的图像，如LOGO上的字母、数字等。

下载

最直接且推荐的方法，就是利用父容器的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

transition

conic-gradient

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

1. 分层动画：使用两个伪元素（

   ::before

   和

   ::after

   ）或者两个背景层。一个伪元素作为底部的背景圆，另一个作为百分比圆，然后通过

   transform: rotate()

   来旋转它们。但这种方法对于百分比图表来说，实现起来会比

   conic-gradient

   复杂很多，尤其是在处理百分比小于50%和大于50%时的逻辑。
2. 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）：

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

1. 语义化HTML：虽然我们用

   div

   和

   span

   ，但可以给它们添加ARIA属性，让屏幕阅读器理解它们的含义。
   • 给图表容器添加

     role="progressbar"

     ：这告诉屏幕阅读器这是一个进度条。
   • 使用

     aria-valuenow

     、

     aria-valuemin

     和

     aria-valuemax

     ：分别表示当前值、最小值和最大值。

   
     75%
   

   当百分比更新时，记得同时用JavaScript更新

   aria-valuenow

   的值。

2. 视觉替代文本：即使有文本显示在图表中心，也可以考虑在图表外部提供一个屏幕阅读器可见但视觉上隐藏的文本，或者确保中心显示的文本是可读的。

3. 颜色对比度：确保百分比颜色和背景颜色之间有足够的对比度，以便色盲或视力不佳的用户也能清晰地区分。可以使用WCAG（Web Content Accessibility Guidelines）推荐的对比度工具来检查。

通过这些额外的考量，我们不仅创建了一个功能强大的动态图表，也确保了它能够为更广泛的用户群体提供良好的体验。