极客笔记CSS 如何创建面积图
概述
面积图用于以图形形式表示数据集。通过使用HTML和CSS，我们可以创建一个面积图。为此，我们将创建两个自定义变量作为起始和结束。可以使用符号“–”创建自定义变量，然后跟上变量名。例如，创建变量如：-width，-height和-start。
步骤
步骤1 - 创建一个HTML文件，并在文本编辑器中打开该文件。将HTML样板添加到HTML文件中。
步骤2 - 现在创建一个带有类名chart的父div容器。
<div class="chart"></div>
步骤3 - 创建一个
标签来创建图表列表项。
<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文件中，我们创建了无序列表以及其中的列表项。在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或table容器。