如何使用纯CSS制作面积图？

你可能知道几种使用纯CSS创建图表的方法。但是我还没有看到“面积图”（想象一下填充有底部区域的折线图）的许多示例，尤其是HTML中的任何示例。和CSS。在本文中，我们将使用语义和可访问的HTML基础来做到这一点。

 

让我们从HTML开始

为简化起见，我们将使用<ul>标签作为<li>各个数据项的包装和元素。您可以根据需要在项目中使用任何其他HTML标记。

<ul class="area-chart">
  <li> 40% </li>
  <li> 80% </li>
  <li> 60% </li>
  <li> 100% </li>
  <li> 30% </li>
</ul>

CSS无法检索内部HTML文本，这就是为什么我们将使用CSS自定义属性将数据传递到CSS的原因。每个数据项将具有--start和的--end自定义属性。

<ul class="area-chart">
  <li style="--start: 0.1; --end: 0.4;"> 40% </li>
  <li style="--start: 0.4; --end: 0.8;"> 80% </li>
  <li style="--start: 0.8; --end: 0.6;"> 60% </li>
  <li style="--start: 0.6; --end: 1.0;"> 100% </li>
  <li style="--start: 1.0; --end: 0.3;"> 30% </li>
</ul>

需要考虑一下几点

在进入样式之前，我们应考虑以下几个设计原则：

• 单位的数据：我们将在我们的HTML中使用无单位的数据（即无px，em，rem，%或任何其他单位）。的--start和--end自定义属性将是0和1之间的数字。
• 列宽：我们不会width为每个<li>元素设置一个固定值。我们不会使用%任何一个，因为我们不知道有多少个项目。每个列的宽度将基于主包装器的宽度除以数据项的总数。在我们的例子中，这就是<ul>元素的宽度除以<li>元素的数量。
• 可访问性：每个属性中的值<li>都是可选的，并且仅需要--start和--end属性。尽管如此，还是最好为屏幕阅读器和其他辅助技术包括某种文本或值来描述内容。

现在，让我们开始造型吧！

让我们先从一般布局样式开始。图表包装器元素是一个flex容器，可连续显示项目，并拉伸每个子元素，以便填充整个区域。

.area-chart {
  /* Reset */
  margin: 0;
  padding: 0;
  border: 0;

  /* Dimensions */
  width: 100%;
  max-width: var(--chart-width, 100%);
  height: var(--chart-height, 300px);

  /* Layout */
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex-direction: row;
}

如果面积图包装器是列表，则应删除列表样式，以使我们更具样式灵活性。

ul.area-chart,
ol.area-chart {
  list-style: none;
}

此代码为整个图表中的所有列设置样式。使用条形图很简单：我们为每一列使用background-color和height。随着地区焦炭TS，我们将使用clip-path属性设置应显示的区域。

首先，我们设置每一列：

.area-chart > * {
  /* Even size items */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

  /* Color */
  background: var(--color, rgba(240, 50, 50, .75));
}

要创建一个覆盖整个区域的矩形，我们将到达clip-path属性，并使用polygon()包含该区域坐标的函数。目前，这基本上什么也不做，因为多边形覆盖了所有内容：

.area-chart > * {
  clip-path: polygon(
    0% 0%,     /* top left */
    100% 0%,   /* top right */
    100% 100%, /* bottom right */
    0% 100%    /* bottom left */
  );
}

现在最好的部分！

为了仅显示该列的一部分，我们将其裁剪以创建类似于面积图的效果。为了只显示我们想要的区域，我们在多边形内使用--start和--end自定义属性clip-path：

.area-chart > * {
  clip-path: polygon(
    0% calc(100% * (1 - var(--start))),
    100% calc(100% * (1 - var(--end))),
    100% 100%,
    0% 100%
  );
}

认真地讲，CSS的这一部分完成了所有工作。这是我们得到的：

 

处理多个数据集

现在我们已经了解了基础知识，让我们创建一个包含多个数据集的面积图。面积图通常可以测量一组以上的数据，其效果是对数据进行分层比较。

 

这种图表需要几个子元素，因此我们将用代替我们的<ul>方法<table>。

<table class="area-chart">
  <tbody>
    <tr>
      <td> 40% </td>
      <td> 80% </td>
    </tr>
    <tr>
      <td> 60% </td>
      <td> 100% </td>
    </tr>
  </tbody>
</table>

表是可访问的，并且对搜索引擎友好。而且，如果由于某种原因未加载样式表，则所有数据仍在标记中可见。

同样，我们将使用--start和--end自定义属性，其数字介于0和1之间。

<table class="area-chart">
  <tbody>
    <tr>
      <td style="--start: 0; --end: 0.4;"> 40% </td>
      <td style="--start: 0; --end: 0.8;"> 80% </td>
    </tr>
    <tr>
      <td style="--start: 0.4; --end: 0.6;"> 60% </td>
      <td style="--start: 0.8; --end: 1.0;"> 100% </td>
    </tr>
  </tbody>
</table>

因此，首先，我们将为包装元素（即表格）的总体布局设置样式，并为其提供了一个.area-chart类：

.area-chart {
  /* Reset */
  margin: 0;
  padding: 0;
  border: 0;

  /* Dimensions */
  width: 100%;
  max-width: var(--chart-width, 600px);
  height: var(--chart-height, 300px);
}

接下来，我们将使<tbody>元素成为flex容器，<tr>连续显示项目并按大小均匀显示：

.area-chart tbody {
  width: 100%;
  height: var(--chart-height, 300px);

  /* Layout */
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex-direction: row;
}
.area-chart tr {
  /* Even size items */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

现在，我们需要使<td>元素相互覆盖，一个元素彼此重叠，以便获得分层效果。每个都<td>覆盖<tr>包含它的元素的整个区域。

.area-chart tr {
  position: relative;
}
.area-chart td {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

让我们clip-path: polygon()使用神奇的力量！我们仅显示--start和--end自定义属性之间的区域，该区域的值再次为0到1：

.area-chart td {
  clip-path: polygon(
    0% calc(100% * (1 - var(--start))),
    100% calc(100% * (1 - var(--end))),
    100% 100%,
    0% 100%
  );
}

现在让我们为每个颜色添加颜色：

.area-chart td {
  background: var(--color);
}
.area-chart td:nth-of-type(1) {
  --color: rgba(240, 50, 50, 0.75);
}
.area-chart td:nth-of-type(2) {
  --color: rgba(255, 180, 50, 0.75);
}
.area-chart td:nth-of-type(3) {
  --color: rgba(255, 220, 90, 0.75);
}

重要的是使用具有不透明度的颜色以获得更好的效果，这就是为什么我们使用rgba()值。hsla()如果那是您滚动的方式，则可以在这里使用。

而且，就像这样：

 

包起来

不管我们向图表中添加多少HTML元素，基于flex的布局都可以确保所有项目的大小均相等。这样，我们只需要设置包装图元素的宽度，项目就会根据响应布局进行相应调整。

我们已经介绍了一种使用纯CSS创建面积图的技术。如果你觉得这篇文章还可以的话，请给我点个赞