如何使用 HTML 和 CSS 创建饼图？

饼图是一种常见的数据可视化形式，可以直观地展示各个数据项所占比例。使用 HTML 和 CSS 可以轻松地创建简单的饼图。

HTML 部分

首先，在 HTML 页面中定义一个容器，用于包含饼图，可以使用 <div> 标签：

<div class="chart"></div>

然后，我们需要定义饼图中的各个部分，使用嵌套的 <div> 标签，并给每个部分添加一个类名和一个数据属性来表示其比例大小：

<div class="chart">
  <div class="slice" data-value="30"></div>
  <div class="slice" data-value="40"></div>
  <div class="slice" data-value="20"></div>
  <div class="slice" data-value="10"></div>
</div>

其中，比例大小可以根据实际情况自行调整。

CSS 部分

接下来，我们使用 CSS 来实现饼图的效果。首先，设置容器的样式：

.chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #eee;
  transform: rotate(-90deg);
}

其中，border-radius 属性将容器设置为圆形，background-color 属性设置背景色，transform 属性将容器逆时针旋转 90 度，使第一个部分从正上方开始。

接着，设置每个部分的样式，包括具体的比例大小、颜色和位置。我们可以使用 ::before 伪元素来绘制每个部分的饼片：

.slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  border-radius: 50%;
  transform-origin: 100px 100px;
}

.slice:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  border-radius: 50%;
  transform: rotate(0deg);
  transform-origin: top;
}

.slice:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  border-radius: 50%;
  transform: rotate(30deg);
  transform-origin: top;
}

.slice:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
  border-radius: 50%;
  transform: rotate(70deg);
  transform-origin: top;
}

.slice:nth-child(4)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
  border-radius: 50%;
  transform: rotate(110deg);
  transform-origin: top;
}

其中，clip 属性将 <div> 元素剪裁为一个扇形，transform-origin 属性将变换的中心点设置为饼图的中心。

JavaScript 部分

最后，我们可以使用 JavaScript 来动态生成每个部分的比例大小。首先，为每个 slice 元素添加一个唯一的 ID：

<div class="chart">
  <div class="slice" id="slice1"></div>
  <div class="slice" id="slice2"></div>
  <div class="slice" id="slice3"></div>
  <div class="slice" id="slice4"></div>
</div>

然后，在 JavaScript 中获取每个 slice 元素，并设置其宽度为对应的比例大小：

const slices = document.querySelectorAll(".slice");
const data = [30, 40, 20, 10];

slices.forEach((slice, i) => {
  slice.style.width = `${data[i]}%`;
});

这样就完成了饼图的动态生成。

完整代码如下：

<div class="chart">
  <div class="slice" id="slice1"></div>
  <div class="slice" id="slice2"></div>
  <div class="slice" id="slice3"></div>
  <div class="slice" id="slice4"></div>
</div>

<style>
  .chart {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #eee;
    transform: rotate(-90deg);
  }

  .slice {
    position: absolute;
    width: 200px;
    height: 200px;
    clip: rect(0, 100px, 200px, 0);
    border-radius: 50%;
    transform-origin: 100px 100px;
  }

  .slice:nth-child(1)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    border-radius: 50%;
    transform: rotate(0deg);
    transform-origin: top;
  }

  .slice:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: blue;
    border-radius: 50%;
    transform: rotate(30deg);
    transform-origin: top;
  }

  .slice:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: green;
    border-radius: 50%;
    transform: rotate(70deg);
    transform-origin: top;
  }

  .slice:nth-child(4)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: yellow;
    border-radius: 50%;
    transform: rotate(110deg);
    transform-origin: top;
  }
</style>

<script>
  const slices = document.querySelectorAll(".slice");
  const data = [30, 40, 20, 10];

  slices.forEach((slice, i) => {
    slice.style.width = `${data[i]}%`;
  });
</script>