数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 创建面积图
概述
面积图用于将数据集以图形形式表示。 使用 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 或表格容器。
浏览量 242
