HTML如何制作饼图？百分比环形图怎么画？

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

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

解决方案

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

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

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

核心思路是利用SVG的

<path>

<circle>

<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如何计算扇形路径
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标签，比如

<div>

<span>

所以，当我们说“HTML如何制作饼图”时，我们其实是在问“如何在HTML页面中利用其他技术来制作饼图”。HTML在这里扮演的角色，仅仅是提供一个容器，一个“舞台”，让SVG或Canvas这些“演员”来表演。

使用JavaScript库制作交互式饼图有哪些优势？

如果你尝试过手写SVG路径来制作一个动态的、响应式的、带交互的饼图，你就会明白JavaScript图表库的价值了。这简直是解放生产力！

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

65

查看详情

最大的优势是抽象化复杂性。想想看，计算每个扇形的角度、起始点、结束点，还要考虑大弧小弧，这本身就够让人头疼的了。更别提还要处理鼠标悬停时的动画、点击事件、数据更新时的平滑过渡、图例、提示框等等。这些库把这些繁琐的数学计算和DOM操作都封装好了，你只需要提供数据和一些配置项，剩下的它们都帮你搞定。

具体来说，它们的优势体现在：

1. 开发效率极高： 你不需要关心底层的SVG或Canvas绘图细节，直接传入数据，几行代码就能生成一个漂亮的图表。
2. 丰富的交互性： 鼠标悬停显示详细数据（tooltip）、点击切片高亮、数据筛选、钻取（drill-down）等功能，库都内置了，或者提供了简单的API让你实现。
3. 动画效果： 数据加载、更新或用户交互时，图表可以平滑地过渡和动画，极大地提升了用户体验。
4. 强大的定制能力： 虽然是库，但它们通常提供大量的配置选项，让你能控制图表的颜色、字体、布局、样式等方方面面，满足品牌或设计要求。
5. 跨浏览器兼容性： 不同的浏览器对SVG或Canvas的支持可能存在细微差异，但这些库会处理这些兼容性问题，确保你的图表在各种环境下都能正常显示。
6. 社区支持和生态： 像Chart.js、ECharts、D3.js（虽然D3更像一个底层工具库，但功能强大）这些流行的库都有庞大的社区，遇到问题很容易找到解决方案，也有很多插件和扩展可用。
7. 数据可视化最佳实践： 很多库在设计时就考虑了数据可视化的最佳实践，比如颜色搭配、标签排布、可读性等，帮助你创建更有效的数据展示。

我个人在项目中，如果不是特别定制化的需求，基本都会选择Chart.js或ECharts。它们开箱即用，功能强大，能满足绝大多数的图表需求。

如何优化饼图的视觉呈现和用户体验？

制作出图表只是第一步，如何让它“好用”且“好看”才是关键。一个设计糟糕的饼图，反而可能误导读者。

1. 颜色选择：

   • 对比度： 确保不同扇区之间有足够的颜色对比，方便区分。
   • 数量限制： 扇区太多时，颜色会变得混乱，难以区分。通常建议饼图的扇区不超过6-8个。如果数据分类过多，考虑将小比例的项合并为“其他”类别。
   • 语义化： 如果某些扇区有特定含义（比如“成功”、“失败”），可以考虑使用有语义的颜色（绿色、红色）。
   • 无障碍： 考虑色盲用户，避免使用只有颜色差异的图例，可以结合图案或文字标签。

2. 标签与图例：

   • 清晰度： 标签应清晰可见，避免重叠。可以直接在扇区上显示百分比或数值，或者使用图例。
   • 位置： 如果空间允许，将百分比直接放在扇区内部是最好的，因为这样用户一眼就能看到数据和对应的区域。否则，使用外部标签线连接到扇区，或使用图例。
   • 信息量： 标签应简洁明了，避免冗余信息。

3. 排序与“其他”分类：

   • 排序： 通常将扇区按大小降序排列（从最大到最小），从12点钟方向或某个固定点开始顺时针排列，这样可以帮助用户更快地比较不同部分的大小。
   • “其他”： 当有许多小比例的数据项时，将它们归类为“其他”或“剩余”是一个很好的策略，避免图表过于拥挤和碎片化。这个“其他”通常放在图表的最后。

4. 交互性：

   • 悬停提示（Tooltip）： 当鼠标悬停在某个扇区上时，显示详细的数值、百分比和类别信息，这是提升用户体验最常用的方式。
   • 点击事件： 允许用户点击扇区，可以触发更详细的数据展示、跳转链接或筛选功能。
   • 动画： 适当的加载动画或数据更新动画，能让图表看起来更生动，提升视觉吸引力。但要避免过度动画，以免分散注意力。

5. 环形图 vs. 饼图：

   • 环形图（Donut Chart）中间的空白区域可以用来显示总计、平均值或其他关键指标，这在某些场景下比纯粹的饼图更有信息密度。而且，从视觉上讲，环形图有时比饼图更容易比较不同扇区的大小，因为人眼更擅长比较弧长而不是面积。

总的来说，一个好的饼图或环形图，不仅仅是把数据画出来，更是要让数据“说话”，让用户能快速、准确地理解信息。

以上就是HTML如何制作饼图？百分比环形图怎么画？的详细内容，更多请关注php中文网其它相关文章！