如何使用 CSS 制作动画气泡图

我们介绍了大量使用 css 或/和 javascript开发不同类型图表的技术。今天，我将向您展示如何使用 CSS 制作气泡图。

我们正在建设什么

这是我们将要处理的气泡图（点击重新加载以查看动画，将鼠标悬停在气泡上以显示工具提示）：

See the Pen How to Make an Animated Bubble Chart With CSS by Envato Tuts+ (@tutsplus) on CodePen.

什么是气泡图？

气泡图是一种图表类型，被认为是散点图的近亲，其主要目标是可视化三个不同维度/变量之间的关系：一个由 X 轴表示，一个由 Y 轴表示，一个由气泡大小。

这种图表可以为历年趋势、历史数据对比、销售对比等提供有用的信息。

您可以使用不同的 JavaScript 库（例如Highcharts.js和ApexCharts.js ）构建复杂的动态气泡图。

1. 从数据开始

对于这个演示，我们将从之前的图表教程中借用一些数据并对其进行一些详细说明。因此，假设我们想要在气泡图中可视化以下描述慈善组织多年来资金的数据：

年	资金	在职员工人数
2018	95,000 欧	12
2016年	72,000 欧	10
2015年	50,000 欧	8个
2012	35,000 欧	6个
2010	15,000 欧	4个

每个表行将对应一个点（气泡）。前两列将描述气泡沿 X 和 Y 轴的位置，而第三列将指示其大小。

2. 指定页面标记

我们将指定一个包含两个列表的包装器元素：

第一个列表设置 y 轴范围。如果您仔细查看上面的表数据，您会发现第二列包含高达 95,000 的值。牢记这一点，我们将定义从 0 到 100,000 的六个值，步长为 20,000。因此，y 轴的值将为 0、20,000、40,000、60,000、80,000 和 100,000。
第二个列表设置 x 轴数据。这些数字是从我们表格的第一列中提取的，从最低到最高。请注意，在下面的标记中，列表项包含两次相同的年份。我们可以省略将年份设置为项目的文本节点。但将此值存储在data-year属性中很重要。正如我们稍后将看到的，我们会将此属性的值传递给相关的 ::before伪元素。还要考虑data-details属性。它的值将作为相应气泡的工具提示。在此值中存在多个外观，
即换行符的十六进制格式的 html 表示形式。我们将把它放在我们想要强制换行的每一位文本之后。稍后会详细介绍。

这是必需的标记：

<div class="chart-wrapper">
  <ul class="chart-y">
    <li>€100,000</li>
    ...
  </ul>
  <ul class="chart-x">
    <li data-year="2010">
      <span data-details="UK:72%&#xa;USA:24%&#xa;Sweden:3%">2010</span>
    </li>
    ...
  </ul>
</div>

3. 设计图表样式

为简单起见，我将跳过一些重置/基本样式。您可以通过单击演示项目的CSS选项卡来检查其余部分。

我没有优化样式，让你更容易看到发生了什么

最后，我为标题嵌入了从 Envato Elements中提取的优质Cheddar Gothic字体。

图表包装器将是一个弹性容器，最大宽度为 700 像素，内容水平居中。 y 轴将是 x 轴的三倍。

x轴

包含 x 轴数据的第二个列表也将是一个 flex 容器。它的项目将有 12% 的宽度，均匀分布在主轴上，并位于容器的底部。借助此工具，我们将使列表看起来像一个 neumorphic 元素。

此外，每个列表项的高度取决于相关的资金价值（见上表）。例如，值 15,000 对应于height: 15%.

以下是相关样式：

.chart-wrapper .chart-x {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  border-radius: 48px;
  background: #f0f0f0;
  box-shadow: -8px 8px 20px #b4b4b4, 8px -8px 20px #ffffff;
}
.chart-wrapper .chart-x li {
  position: relative;
  width: 12%;
}
.chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
}
.chart-wrapper .chart-x li:nth-child(2) {
  height: 35%; /*represents €35,000*/
}
.chart-wrapper .chart-x li:nth-child(3) {
  height: 50%; /*represents €50,000*/
}
.chart-wrapper .chart-x li:nth-child(4) {
  height: 72%; /*represents €72,000*/
}
.chart-wrapper .chart-x li:nth-child(5) {
  height: 95%; /*represents €95,000*/
}

接下来，我们将使用::before每个项目的伪元素来输出 x 轴的标签。

关联的 CSS：

.chart-wrapper .chart-x li::before {
  content: attr(data-year);
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  text-align: center;
  transform: translate(-50%, 40px) rotate(45deg);
}

气泡

每个span元素将对应一个气泡（点）。每个气泡都有不同的颜色和大小。

气泡大小将取决于相关的第三个表列的值（见表）。假设最小（第一个）气泡的宽度和高度为 15px，我们将相应地计算其余气泡的大小。

我们要做的另一件事是防止默认显示气泡，而是用淡入淡出和缩放动画来显示它们。在您自己的 dom 可能包含更多元素的页面中，为了获得更准确的结果，您可以等到页面加载后再显示气泡，就像我们在温度计图表中所做的那样。

以下是相关样式：

/*CUSTOM VARIABLES HERE*/
.chart-wrapper .chart-x li:nth-child(1) span {
  width: 15px; /*represents 4 employees*/
  height: 15px; /*represents 4 employees*/
  background-color: var(--bubble-color1);
}
.chart-wrapper .chart-x li:nth-child(2) span {
  width: 22.5px; /*represents 6 employees*/
  height: 22.5px; /*represents 6 employees*/
  background-color: var(--bubble-color2);
}
.chart-wrapper .chart-x li:nth-child(3) span {
  width: 30px; /*represents 8 employees*/
  height: 30px; /*represents 8 employees*/
  background-color: var(--bubble-color3);
}
.chart-wrapper .chart-x li:nth-child(4) span {
  width: 37.5px;  /*represents 10 employees*/
  height: 37.5px; /*represents 10 employees*/
  background-color: var(--bubble-color4);
}
.chart-wrapper .chart-x li:nth-child(5) span {
  width: 45px; /*represents 12 employees*/
  height: 45px; /*represents 12 employees*/
  background-color: var(--bubble-color5);
}
.chart-wrapper .chart-x span {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-radius: 50%;
  font-size: 0;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.001);
  animation: fade-in 0.8s linear forwards;
}
@keyframes fade-in {
  100% {
    opacity: 1;
    transform: scale(1) translateX(-50%);
  }
}