如何使用 CSS 创建面积图

cssweb developmentfront end technology更新于 2024/6/16 13:32:17

概述

面积图用于将数据集以图形形式呈现。我们可以利用 HTML 和 CSS 创建面积图。为此，我们将创建两个自定义变量作为起始和结束。自定义变量可以使用符号"--"加上变量名来创建。例如，创建以下变量:–width、–height 和 –start。

算法

步骤 1 − 创建一个 HTML 文件并在文本编辑器中打开该文件。将 HTML 样板添加到 HTML 文件中。

步骤 2 − 现在创建一个父 div 容器，并将类名设置为 chart。

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

步骤 3 − 创建一个 ul 标签来创建图表列表项。

<ul class="areaChart"></ul>

步骤 4 − 现在使用 li 标签创建图表的条形图

<li> 80% </li>
<li> 50% </li>
<li> 60% </li>
<li> 30% </li>
<li> 100% </li>

步骤 5 − 同时，通过定义图表的起点和终点，将自定义变量添加到 li 标签。

<li style="--start: 0.6; --end: 0.4;"> 80% </li>
<li style="--start: 0.4; --end: 0.5;"> 50% </li>
<li style="--start: 0.5; --end: 0.3;"> 60% </li>
<li style="--start: 0.3; --end: 0.7;"> 30% </li>
<li style="--start: 0.7; --end: 0.3;"> 100% </li>

步骤 6 − 现在在同一文件夹中创建一个 style.css 文件，并将该 style.css 文件链接到 HTML 文档。

<link rel="stylesheet" href="style.css">

步骤 7 − 现在将目标设为"areaChart"容器及其所有列表项。

步骤 8 − 面积图已成功创建。

示例

在此示例中，我们使用层叠样式表 (CSS) 创建了图表的区域。为此，我们创建了两个文件:第一个文件是 HTML 文件，另一个是样式文件。为此，我们创建了包含列表项的无序列表。在 HTML 文件中，我们创建了 ul 标签，其中包含一组数据。

<html>
<head>
   <title>Area chart using css</title>
   <link rel="stylesheet" href="style.css">
   <style>
      body {
         display: flex;
         flex-direction: column;
         place-items: center;
         justify-content: center;
         height: 100vh;
         margin: 0;
      }

      .chart {
         margin: auto;
         display: contents;
      }
      
      .areaChart {
         margin: 0;
         padding: 1rem;
         border: 0;
         width: 100%;
         max-width: 600px;
         height: 15rem;
         display: flex;
         box-shadow: 0 0 5px black;
         border-radius: 5px;
      }
      
      li {
         border: 0.1px solid rgb(255, 255, 255);
         list-style: none;
      }
      
      .areaChart>* {
         flex-grow: 1;
         background: rgb(11, 235, 11);
         clip-path: polygon(0% 0%,0 calc(100% * (1 - var(--start))),100%   calc(100% * (1 - var(--end))),100% 100%,0 100%);
      
      }
      
      p {
         font-size: 2rem;
         font-family: 'Segoe UI';
         text-align: center;
      }
   </style>
</head>
<body>
   <div class="chart" style="width: 100%;">
      <ul class="areaChart">
         <li style="--start: 0.6; --end: 0.4;"> 80% </li>
         <li style="--start: 0.4; --end: 0.5;"> 50% </li>
         <li style="--start: 0.5; --end: 0.3;"> 60% </li>
         <li style="--start: 0.3; --end: 0.7;"> 30% </li>
         <li style="--start: 0.7; --end: 0.3;"> 100% </li>
      </ul>
      <p>Area chart using CSS<br><span style="color: green;">tutorialspoint.com</span></p>
   </div>
</body>
</html>

下图展示了上述示例的输出，它显示了一个带有图形的图表区域，该图形以图形形式呈现数据集。我们将 HTML li 标签中的数据设置为自定义变量，并设置了图表中显示的起点和终点。

结论

与上述示例一样，我们使用 HTML 和 CSS 构建了一个静态图表。因此，我们也可以使用 JavaScript 或将 API 连接到图表标签来使图表区域动态化。在使用上述示例时，我们必须记住一点:第一个列表项的起点应该与下一个列表项的终点相同。由于我们使用 li 标签创建了图表的条形，因此我们也可以使用 div 或表格容器。