十分钟教会你仅使用一个div配合css实现饼状图

1. 引言

饼状图（Pie Chart）是数据可视化中经常用到的图表类型之一。它通过圆形区域的大小比较来展示数据的比例关系。在本文中，我们将演示如何使用一个 <div> 元素并配合 CSS 来创建简单的饼状图。

2. 准备工作

2.1 空 div 元素

首先，我们需要一个空的 <div> 元素，用来作为饼状图的容器。我们可以为这个 div 元素设置一个固定的宽度和高度，并添加适当的样式来美化它。在CSS代码中，我们可以设置：

/* 添加固定宽度和高度 */
div {
  width: 200px;
  height: 200px;
}
/* 美化样式 */
div {
  border-radius: 50%;
  background-color: #e5e5e5;
  position: relative;
}

这段 CSS 代码将创建一个 200px 的圆形容器，并将容器的背景颜色设置为浅灰色，并添加圆角样式使之看上去更像一个饼状图。

2.2 创建饼状图数据

现在我们需要创建饼状图所需的数据。具体来说，我们需要确定每个数据片段所占的百分比。

在本文中，我们将使用以下数据：

苹果: 40%

香蕉: 20%

橙子: 15%

葡萄: 10%

其他: 15%

将这些数据转换为 CSS 样式，我们需要计算每个数据片段对应的圆形区域占整个圆形的比例。在本例中，我们假设所有数据之和为 100，所以每个数据片段的比例就是它所对应的百分比。

因此，我们可以为每个数据片段定义一个 CSS class，并设置每个 class 的 transform 属性来指定数据片段所对应的角度。具体来说，我们可以使用 rotate 函数来实现这一点。

在实现过程中，我们使用了 Sass 来编写 CSS。下面是 Sass 代码示例：

/* 定义数据 */
$apple: 40%;
$banana: 20%;
$orange: 15%;
$grape: 10%;
$other: 15%;
/* 定义角度 */
$apple_deg: $apple * 360;
$banana_deg: $banana * 360;
$orange_deg: $orange * 360;
$grape_deg: $grape * 360;
$other_deg: $other * 360;
/* 定义 CSS 类 */
.apple {
  transform: rotate($apple_deg*1deg);
  background-color: #F44336;
}
.banana {
  transform: rotate($banana_deg*1deg);
  background-color: #FFC107;
}
.orange {
  transform: rotate($orange_deg*1deg);
  background-color: #FF9800;
}
.grape {
  transform: rotate($grape_deg*1deg);
  background-color: #4CAF50;
}
.other {
  transform: rotate($other_deg*1deg);
  background-color: #9E9E9E;
}

这段 Sass 代码会编译成以下的 CSS 代码：

.apple {
  transform: rotate(144deg);
  background-color: #F44336;
}
.banana {
  transform: rotate(72deg);
  background-color: #FFC107;
}
.orange {
  transform: rotate(54deg);
  background-color: #FF9800;
}
.grape {
  transform: rotate(36deg);
  background-color: #4CAF50;
}
.other {
  transform: rotate(54deg);
  background-color: #9E9E9E;
}

我们可以看到，每个数据片段（如 "苹果"）都对应了一个定义好的 CSS class（如 .apple），并设置了对应的 transform 属性。这里的 rotate 属性指定了数据片段所对应的角度（如 144 度，对应 40% 的比例）。

3. 实现饼状图

现在我们已经准备好了饼状图容器和数据，接下来我们将使用 CSS 来将它们组合起来。具体来说，我们将为容器添加一个伪元素，在上面定义每个数据片段所对应的形状，并设置对应的样式。

/* 添加伪元素 */
div::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 100px, 200px, 100px); /* 裁剪区域 */
}
/* 设置每个数据片段的样式 */
.apple::before {
  background-color: #F44336;
  transform: rotate(144deg);
}
.banana::before {
  background-color: #FFC107;
  transform: rotate(72deg);
}
.orange::before {
  background-color: #FF9800;
  transform: rotate(54deg);
}
.grape::before {
  background-color: #4CAF50;
  transform: rotate(36deg);
}
.other::before {
  background-color: #9E9E9E;
  transform: rotate(54deg);
}

这段 CSS 代码会为 <div> 元素添加一个伪元素，并设置该伪元素的样式。伪元素的 content 属性设置为空，表示该元素不包含任何内容。伪元素的 position 属性设置为 absolute，使它可以相对于容器进行定位。这里我们还为伪元素设置了一个圆形边框，并通过 clip 属性将它裁剪成扇形区域。

接下来，我们针对每个数据片段定义了对应的 CSS 类，并在该类的伪元素上设置 background-color 和 transform 属性，以便为数据片段添加颜色和形状。

4. 结论

通过本文的演示，我们证明了用一个 <div> 元素和 CSS 就可以创建简单的饼状图。我们只需要设置好容器和数据，然后使用 CSS 计算每个数据片段所占的比例，并设置对应的样式即可。

这种技术可能不适用于复杂的饼状图，但它是一个简单而有效的方法，可以让我们快速地创建基本的饼状图效果。