資料結構
網路
關係型資料庫管理系統 (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
