如何使用CSS创建面积图

百变鹏仔 3个月前 (09-20) #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.

   Area chart using css   <link rel="stylesheet" href="style.css">         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;      }             80% 
          50% 
          60% 
          30% 
          100% 
      
Area chart using CSS
tutorialspoint.com

下面给出的图像显示了上面示例的输出，它显示了一个包含以图形形式表示的数据集的图表区域。我们将数据设置在HTML的li标签中作为自定义变量，并设置了在图表中表示的起始点和结束点。

结论

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

文章推荐

如何使用CSS创建面积图

概述

算法

Example

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写