如何使用CSS创建面积图

王林转载: 2023-09-03 18:05:02 739浏览

如何使用CSS创建面积图

概述

一个区域图表用于将数据集以图形形式表示。通过使用HTML和CSS，我们可以创建一个区域图表。因此，我们将创建两个自定义变量作为起始和结束。可以使用符号“--”和变量名称来创建自定义变量。例如，创建变量如：-width，-height和-start。

算法

第一步 - 创建一个HTML文件并在文本编辑器中打开该文件。将HTML模板添加到HTML文件中。

第二步 − 现在创建一个父级 div 容器，并给它一个名为 chart 的类名。

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

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

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

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

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

第五步 − 还可以通过定义图表的起始和结束点，将自定义变量添加到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步 − 面积图创建成功。

Example

In this example we have created the area of chart using the Cascading Styles Sheet (CSS). To achieve this we have created the two files for this first file is the HTML file and other is the styling file. For this we have created the unordered list with the list items. In the HTML file we have created the ul tag with the set of data in it.

<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或table容器。

以上就是如何使用CSS创建面积图的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：使用 CSS 翻转 X 动画效果下一条：使用 CSS3 添加阴影到图像