如何使用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 fileave. For this file and other is the styling file. 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.

   
   <link rel="stylesheet" href="style.css">
   


   

      

         
 80% 
         
 50% 
         
 60% 
         
 30% 
         
 100% 
      
      
Area chart using CSS
tutorialspoint.com
   

下面給出的圖像顯示了上面範例的輸出，它顯示了一個包含以圖形形式表示的資料集的圖表區域。我們將資料設定在HTML的li標籤中作為自訂變量，並設定了在圖表中表示的起始點和結束點。

結論

就像上面的例子一樣，我們使用HTML和CSS建立了一個靜態圖表。因此，我們也可以透過使用JavaScript或將API連接到圖表標籤來使圖表的區域變得動態。在使用上述範例時，我們必須記住第一個清單項目的起始點應與下一個清單項目的終點相同。由於我們使用li標籤來建立圖表的長條圖，我們也可以使用div或table容器。

以上是如何使用CSS建立面積圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！