当前位置：首页 > 前端开发 > 正文

如何仅用HTML和CSS制作饼图？

使用CSS的 conic-gradient函数创建圆锥渐变是最简洁的方法，结合 border-radius:50%形成圆形，也可通过SVG或 CSS变换旋转多个元素实现，但需注意浏览器兼容性。

在网页设计中，使用HTML和CSS创建饼图是一种轻量级、无需JavaScript的解决方案，以下是三种专业实现方法,兼顾视觉效果和代码质量：

方法1：CSS圆锥渐变（现代浏览器首选）

<div class="pie-chart" style="--value: 65; --color: #4e73df;"></div>
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color) 0% calc(var(--value) * 1%),
    #e0e0e0 calc(var(--value) * 1%) 100%
  );
  position: relative;
}
.pie-chart::after {
  content: attr(data-value)'%';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

优势：

  • 单元素实现，代码简洁
  • 通过CSS变量动态控制比例
  • 支持动画过渡效果

方法2：SVG矢量图形（最佳兼容性）

<svg viewBox="0 0 100 100" class="svg-pie">
  <circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="10"/>
  <path d="M50 5 A45 45 0 1 1 50 95 A45 45 0 1 1 50 5" 
        fill="none" 
        stroke="#4e73df" 
        stroke-width="10"
        stroke-dasharray="calc(65 * 2.8274) 282.74"/>
  <text x="50" y="55" text-anchor="middle" font-weight="bold">65%</text>
</svg>

关键技术：

如何仅用HTML和CSS制作饼图？ 第1张

  1. stroke-dasharray控制弧长（计算：周长=2πr≈282.74）
  2. 公式：dasharray = (百分比 * 周长) 周长
  3. 使用text-anchor居中文本

方法3：CSS变换技巧（兼容旧浏览器）

<div class="classic-pie">
  <div class="segment"></div>
  <div class="cover"></div>
  <span>65%</span>
</div>
.classic-pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background: #e0e0e0;
  overflow: hidden;
}
.segment {
  position: absolute;
  width: 100%; height: 100%;
  background: #4e73df;
  transform: rotate(90deg); /* 起点调整 */
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transform: rotate(calc(65 * 3.6deg));
}
.cover {
  position: absolute;
  width: 80%; height: 80%;
  background: white;
  border-radius: 50%;
  top: 10%; left: 10%;
}
.classic-pie > span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

原理说明：

  • 使用clip-path裁剪半圆
  • 通过rotate旋转角度（公式：角度=百分比×3.6）
  • 内圆覆盖实现空心效果

专业建议

  1. 响应式适配：

    如何仅用HTML和CSS制作饼图？ 第2张

    .pie-chart {
  aspect-ratio: 1/1; /* 保持正方形 */
  width: min(90vw, 300px); 
}

  2. 动画效果：

    .segment {
  transition: transform 1s ease-out;
}

  3. 多段饼图：

    如何仅用HTML和CSS制作饼图？ 第3张

    .multi-pie {
  background: conic-gradient(
    #4e73df 0 30%, 
    #1cc88a 30% 70%,
    #36b9cc 70% 100%
  );
}

  4. 无障碍优化：

    <div role="img" aria-label="饼图：销售占比65%">
  <!-- 图表代码 -->
</div>

方法选择指南

方法 兼容性 复杂度 交互性 适用场景
圆锥渐变 IE不支持 中等 现代浏览器项目
SVG 全浏览器 高 数据可视化、动态内容
CSS变换 IE10+ 低 兼容旧系统

注意事项

  1. 圆锥渐变在Safari 12+需添加-webkit-前缀
  2. 精确计算时使用Sass/Less变量管理比例
  3. 移动端使用vw/vh单位确保可读性
  4. 颜色对比度需满足WCAG 2.0标准（建议4.5:1）

引用说明：本文技术方案参考MDN Web Docs的CSS渐变指南、W3C SVG规范及CSS-Tricks响应式设计实践，数据可视化原则遵循Google Material Design设计规范。

CSSHTML前端开发饼图
0

相关文章