Comment créer un graphique en aires en utilisant CSS

Vue d'ensemble

Un graphique en aires est utilisé pour représenter un ensemble de données sous forme graphique. En utilisant HTML et CSS, nous pouvons créer un graphique en aires. Par conséquent, nous allons créer deux variables personnalisées comme début et fin. Des variables personnalisées peuvent être créées à l'aide du symbole "--" et du nom de la variable. Par exemple, créez des variables telles que : -width, -height et -start.

Algorithme

Étape 1 - Créez un fichier HTML et ouvrez le fichier dans un éditeur de texte. Ajoutez des modèles HTML aux fichiers HTML.

Étape 2−Créez maintenant un conteneur div parent et donnez-lui un nom de classe appelé chart.

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

Étape 3 −Créez une balise ul pour créer des éléments de liste de graphiques.

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

Étape 4−Utilisez maintenant la balise li pour créer les barres du graphique

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

Étape 5− Vous pouvez également ajouter des variables personnalisées à la balise li en définissant les points de début et de fin du graphique.

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

Étape 6− Créez maintenant un fichier style.css dans le même dossier et liez le fichier style.css au document HTML.

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

Étape 7 − Passons maintenant au conteneur « areaChart » et à tous les éléments de la liste.

Étape 8 − Le graphique en aires est créé avec succès.

Exemple

Dans cet exemple, nous avons créé la zone de graphique à l'aide de la feuille de styles en cascade (CSS). Pour y parvenir, nous avons créé les deux fichiers pour ce premier fichier : le fichier HTML et l'autre pour le fichier de style. créé la liste non ordonnée avec les éléments de la liste. Dans le fichier HTML, nous avons créé la balise ul contenant l'ensemble des données.

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


   

      

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

L'image ci-dessous montre la sortie de l'exemple ci-dessus, elle montre une zone de graphique contenant l'ensemble de données représenté sous forme graphique. Nous définissons les données en tant que variables personnalisées dans la balise li du HTML et définissons les points de début et de fin à représenter dans le graphique.

Conclusion

Comme dans l'exemple ci-dessus, nous avons construit un graphique statique en utilisant HTML et CSS. Par conséquent, nous pouvons également rendre dynamiques les zones du graphique en utilisant JavaScript ou en connectant l’API aux étiquettes du graphique. En utilisant l'exemple ci-dessus, nous devons nous rappeler que le point de départ du premier élément de liste doit être le même que le point final de l'élément de liste suivant. Puisque nous utilisons des balises li pour créer les barres du graphique, nous pouvons également utiliser un conteneur div ou table.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!