HTML制作饼图教程：百分比环形图实现方法

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《HTML如何制作饼图？百分比环形图教程》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

HTML本身不能直接绘制饼图或环形图，必须借助SVG或Canvas并结合JavaScript实现；1. 使用SVG时通过绘制扇形、挖空中心，并用JavaScript动态计算角度与路径；2. 手动计算路径复杂，实际开发中推荐使用Chart.js、ECharts等库，它们封装了绘图逻辑，提供交互、动画和兼容性支持；3. 优化视觉与体验需注意颜色对比、扇区数量控制、标签清晰、合理排序、使用“其他”分类、添加悬停提示与点击交互；4. 环形图因可展示中心文本且更易比较弧长，在信息密度和可读性上优于传统饼图。

HTML本身并不能直接绘制饼图或环形图。它更像是一个骨架，负责内容的结构和语义。要制作饼图或百分比环形图，我们需要借助它的“画笔”——SVG（可缩放矢量图形）或Canvas（画布），再结合JavaScript来处理数据和绘制逻辑。百分比环形图说白了，就是中间挖了个洞的饼图，实现方式大同小异。

解决方案

要用HTML来“制作”饼图或环形图，我们通常会选择SVG或Canvas，并辅以JavaScript。我个人更倾向于SVG，因为它基于XML，图形元素可以直接在DOM中操作，对于静态或交互不那么复杂的图表来说，调试和样式控制都相对直观。

使用SVG制作一个基础的百分比环形图：

核心思路是利用SVG的元素来绘制扇形，然后用一个元素在中间挖个洞。计算每个扇形的起始和结束角度，并将其转换为SVG路径所需的坐标，是整个过程最“烧脑”的部分。

<div class="chart-container">
  <svg width="200" height="200" viewBox="0 0 100 100">
    <!-- 背景圆，可选，用于环形图底色 -->
    <circle cx="50" cy="50" r="40" fill="#eee"></circle>

    <!-- 扇形1：假设数据为30% -->
    <path d="M 50 50 L 50 10 A 40 40 0 0 1 79.27 20.73 Z" fill="#4CAF50"></path>
    <!-- M 50 50 (移动到圆心) L 50 10 (画线到圆上边缘) A 40 40 0 0 1 79.27 20.73 (画弧到30%位置) Z (闭合路径) -->

    <!-- 扇形2：假设数据为40% (从上一个扇形结束位置开始) -->
    <path d="M 50 50 L 79.27 20.73 A 40 40 0 0 1 79.27 79.27 Z" fill="#2196F3"></path>

    <!-- 扇形3：假设数据为30% (从上一个扇形结束位置开始) -->
    <path d="M 50 50 L 79.27 79.27 A 40 40 0 0 1 50 10 Z" fill="#FFC107"></path>

    <!-- 中间的白色圆，用于制作环形效果 -->
    <circle cx="50" cy="50" r="25" fill="white"></circle>

    <!-- 中心文本，显示总计或某个百分比 -->
    <text x="50" y="55" text-anchor="middle" font-size="12" fill="#333">100%</text>
  </svg>
</div>

<style>
  .chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
</style>

注意： 上述SVG路径的d属性是手动计算的，这在实际项目中是不可取的。对于动态数据，你需要用JavaScript来计算每个扇形的起始角度、结束角度，并将其转换为SVG路径的M（移动）、L（画线）、A（弧线）命令。这涉及到一些三角函数和坐标转换，比如从极坐标（角度和半径）到笛卡尔坐标（x, y）的转换。

// 伪代码，展示JavaScript如何计算扇形路径
function getSlicePath(centerX, centerY, radius, startAngle, endAngle) {
  const startX = centerX + radius * Math.cos(startAngle * Math.PI / 180);
  const startY = centerY + radius * Math.sin(startAngle * Math.PI / 180);
  const endX = centerX + radius * Math.cos(endAngle * Math.PI / 180);
  const endY = centerY + radius * Math.sin(endAngle * Math.PI / 180);

  const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1; // 判断是否为大弧
  const sweepFlag = 1; // 顺时针方向

  return `M ${centerX} ${centerY} L ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY} Z`;
}

// 实际应用中，你会遍历数据数组，计算每个百分比对应的角度范围，然后调用此函数生成路径。
// 例如：
// const data = [{value: 30, color: '#4CAF50'}, {value: 40, color: '#2196F3'}, {value: 30, color: '#FFC107'}];
// let currentAngle = 0;
// data.forEach(item => {
//   const sliceAngle = item.value / 100 * 360;
//   const pathD = getSlicePath(50, 50, 40, currentAngle, currentAngle + sliceAngle);
//   // 创建 <path> 元素并设置 d 和 fill 属性
//   currentAngle += sliceAngle;
// });

看到这，你可能已经感受到了，手动计算和绘制这些图形是件挺麻烦的事。这也就是为什么在实际开发中，我们很少直接手写SVG路径来画图表。

为什么不直接用HTML标签制作饼图？

这其实是个很基础的问题，但很多初学者会困惑。说白了，HTML的本职工作是“结构化内容”，它负责定义页面上有标题、段落、图片、链接等等。它并没有内置“画图”的能力，就像你不能指望一本字典能帮你画出蒙娜丽莎一样。

HTML标签，比如

Symfony获取MP3标签信息转数组方法

上一篇

Symfony获取MP3标签信息转数组方法

下一篇

嵌入式HTML文件是什么？怎么编辑？