So erstellen Sie ein Flächendiagramm mit CSS

Übersicht

Ein Flächendiagramm wird verwendet, um einen Datensatz in grafischer Form darzustellen. Mithilfe von HTML und CSS können wir ein Flächendiagramm erstellen. Daher erstellen wir zwei benutzerdefinierte Variablen als Start und Ende. Benutzerdefinierte Variablen können mit dem Symbol „--“ und dem Variablennamen erstellt werden. Erstellen Sie beispielsweise Variablen wie: -width, -height und -start.

Algorithmus

Schritt 1 – Erstellen Sie eine HTML-Datei und öffnen Sie die Datei in einem Texteditor. Fügen Sie HTML-Vorlagen zu HTML-Dateien hinzu.

Schritt 2− Erstellen Sie nun einen übergeordneten Div-Container und geben Sie ihm einen Klassennamen namens „Chart“.

<div class="chart"></div>

Schritt 3 −Erstellen Sie ein UL-Tag, um Diagrammlistenelemente zu erstellen.

<ul class="areaChart"></ul>

Schritt 4−Nun verwenden Sie das li-Tag, um die Balken des Diagramms zu erstellen

<li> 80% </li>
<li> 50% </li>
<li> 60% </li>
<li> 30% </li>
<li> 100% </li>

Schritt 5− Sie können dem li-Tag auch benutzerdefinierte Variablen hinzufügen, indem Sie die Start- und Endpunkte des Diagramms definieren.

<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>

Schritt 6− Erstellen Sie nun eine style.css-Datei im selben Ordner und verknüpfen Sie die style.css-Datei mit dem HTML-Dokument.

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

Schritt 7 − Nun zum Container „areaChart“ und allen Listenelementen.

Schritt 8 − Das Flächendiagramm wurde erfolgreich erstellt.

Beispiel

In diesem Beispiel haben wir den Diagrammbereich mithilfe des Cascading Styles Sheet (CSS) erstellt. Um dies zu erreichen, haben wir die erste Datei erstellt, die HTML-Datei, und die andere ist die Styling-Datei Wir haben die ungeordnete Liste mit den Listenelementen erstellt. In der HTML-Datei haben wir das ul-Tag mit dem darin enthaltenen Datensatz erstellt

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


   

      

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

Das Bild unten zeigt die Ausgabe des obigen Beispiels. Es zeigt einen Diagrammbereich, der den Datensatz in grafischer Form enthält. Wir legen die Daten als benutzerdefinierte Variablen im li-Tag des HTML fest und legen die Start- und Endpunkte fest, die im Diagramm dargestellt werden sollen.

Fazit

Wie im obigen Beispiel haben wir ein statisches Diagramm mit HTML und CSS erstellt. Daher können wir die Bereiche des Diagramms auch dynamisch gestalten, indem wir JavaScript verwenden oder die API mit den Diagrammbeschriftungen verbinden. Bei der Verwendung des obigen Beispiels müssen wir bedenken, dass der Startpunkt des ersten Listenelements mit dem Endpunkt des nächsten Listenelements identisch sein sollte. Da wir Li-Tags verwenden, um die Balken des Diagramms zu erstellen, können wir auch einen Div- oder Tabellencontainer verwenden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Flächendiagramm mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!