Tutoriel pour créer un diagramme en courbe avec HTML et CSS

Les diagrammes en courbe sont des outils visuels puissants pour représenter les tendances de données sur une période donnée. Bien que de nombreuses bibliothèques JavaScript permettent de créer facilement des graphiques interactifs, il est possible de créer un diagramme en courbe en utilisant uniquement HTML et CSS.

Ce tutoriel vous guide à travers le processus de création d’un diagramme en courbe sans recourir à des bibliothèques externes ou du javascript.

Diagramme en courbe

100

Jan

Fev

Mar

Avr

Mai

Jun

Jui

Aou

Structure HTML de base du diagramme en courbe

Commençons par créer la structure HTML de base du diagramme en courbe. Nous utiliserons un élément <div> pour le conteneur principal du graphique, des éléments SVG pour dessiner la courbe et les points, et des éléments supplémentaires pour les axes.

<div class="chart-container">

    <div class="chart">

        <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="line-chart">
            
            <!-- Lignes de fond -->
            <line x1="0" y1="7.5" x2="100" y2="7.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="25" x2="100" y2="25" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="42.5" x2="100" y2="42.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="60" x2="100" y2="60" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="77.5" x2="100" y2="77.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="94.5" x2="100" y2="94.5" stroke="#f1f1f1" stroke-width="0.5"/>
            
            <!-- Courbe -->
            <polyline 
                fill="none" 
                stroke="#0077cc" 
                stroke-width="0.7" 
                points="13,70 24.5,40 36,55 47.5,35 59,45 70.5,35 81.5,50 93,20"/>
            
            <!-- Points clés -->
            <circle cx="13" cy="69.8" r="0.8" fill="#34a853" />
            <circle cx="24.5" cy="40" r="0.8" fill="#34a853" />
            <circle cx="36" cy="55" r="0.8" fill="#34a853" />
            <circle cx="47.5" cy="35" r="0.8" fill="#34a853" />
            <circle cx="59" cy="45" r="0.8" fill="#34a853" />
            <circle cx="70.5" cy="35" r="0.8" fill="#34a853" />
            <circle cx="81.5" cy="50" r="0.8" fill="#34a853" />
            <circle cx="93" cy="20" r="0.8" fill="#34a853" />
        </svg>

        <!-- Axe horizontal : Abscisse -->
        <div class="y-axis">
            <div class="y-tick">100</div>
            <div class="y-tick">80</div>
            <div class="y-tick">60</div>
            <div class="y-tick">40</div>
            <div class="y-tick">20</div>
            <div class="y-tick">0</div>
        </div>

        <!-- Axe horizontal : Ordonnée -->
        <div class="x-axis">
            <div class="x-tick">Jan</div>
            <div class="x-tick">Fev</div>
            <div class="x-tick">Mar</div>
            <div class="x-tick">Avr</div>
            <div class="x-tick">Mai</div>
            <div class="x-tick">Jun</div>
            <div class="x-tick">Jui</div>
            <div class="x-tick">Aou</div>
        </div>

    </div>

</div>

Le conteneur principal du graphique est un <div> avec la classe .chart-container.
À l’intérieur de ce conteneur, nous avons un autre <div> avec la classe .chart qui contient un élément SVG pour dessiner la courbe.
La courbe est dessinée à l’aide de la balise <polyline>, qui relie plusieurs points définis par les attributs points.
Les points clés sont marqués par des cercles verts créés avec la balise <circle>.
Les axes X et Y sont créés à l’aide de <div> supplémentaires, chacun contenant des étiquettes .y-tick et .x-tick.

Pour améliorer la lisibilité du graphique, nous pouvons ajouter des lignes de fond horizontales. Avec ces lignes de fond, votre diagramme devient plus lisible, en aidant les utilisateurs à mieux comprendre les valeurs des points clés.

Ajout du CSS

Le CSS définit les styles pour le conteneur du graphique, les axes, et le graphique SVG. La position absolue est utilisée pour placer correctement les axes et le graphique à l’intérieur du conteneur.

.chart-container {
    width: 600px;
    height: 400px;
    margin: 0 auto;
}

.chart {
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin:0 auto;
}

.line-chart {
    width: 100%;
    height: calc(100% - 20px);
}

.y-axis {
    position: absolute;
    top: 20px;
    bottom: 30px;
    left: 0;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.y-tick {
    text-align: right;
    font-size: 12px;
    padding-right: 5px;
    font-weight: bold;
    color: #999;
}

.x-axis {
    position: absolute;
    bottom: 5px;
    left: 70px;
    right: 40px;
    height: 20px;
    display: flex;
    justify-content: space-between;
}

.x-tick {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    color: #999;
}

Le conteneur principal et le conteneur du graphique sont stylisés pour avoir une largeur et une hauteur spécifiques.
L’élément SVG occupe toute la largeur et hauteur disponibles, à l’exception d’une petite marge pour les axes.
Les axes Y et X sont stylisés avec flexbox pour un alignement et un espacement uniforme des étiquettes.

Créer un diagramme en courbes avec uniquement HTML et CSS est un excellent exercice pour comprendre les bases des graphiques SVG et du positionnement en CSS. Pour des applications plus complexes, il est recommandé d’utiliser des bibliothèques externes, mais cette approche simple peut suffire pour des besoins basiques.

Un diagramme en courbe dynamique grâce au PHP

Imaginons que vous devez représenter un tableau de valeurs sous forme d’un diagramme en courbe. Voici comment faire avec PHP :

Janv	Févr	Mars	Avri	Mai	Juin	Juil	Aout
15%	55%	40%	60%	52%	65%	58%	85%

Définition du Tableau de Données

<?php
    $array = array(15, 55, 40, 60, 52, 65, 58, 85);
?>

Un tableau $array est défini avec des valeurs représentant les données à afficher sur le graphique.

Génération de la courbe

<polyline 
    fill="none" 
    stroke="#0077cc" 
    stroke-width="0.7"
    points="<?php
        $i = 1.5; 
        $j = 89 / 100;

        foreach($array as $item) {
            $i += 11.5;
            $k = 96 - ($j * $item);
            echo $i.",".round($k, 1)." ";
        }
    ?>"/>

L’élément <polyline> est utilisé pour dessiner la courbe. Les attributs fill et stroke définissent l’apparence de la courbe.

L’attribut points est généré dynamiquement par PHP :

$i est initialisé à 1.5 et représente la position x initiale.
$j est calculé comme 89/100, ce qui est utilisé pour normaliser les valeurs de y. Soit 1%.

Pour chaque élément du tableau $array :

La position x via $i est incrémentée de 11.5 pour espacer les points horizontalement.
La position y via $k est calculée en normalisant la valeur de l’élément et en l’inversant (car les valeurs de y augmentent de haut en bas dans SVG).
Les coordonnées x,y sont ajoutées à la chaîne points et affichées.

Génération des points clés (cercle verts)

<?php
    $i = 1.5; 
    $j = 89 / 100;

    foreach($array as $item) {
        $i += 11.5;
        $k = 96 - ($j * $item);
        echo '<circle cx="'.$i.'" cy="'.$k.'" r="0.8" fill="#34a853" />';
    }
?>

Pour chaque point dans le tableau $array, un élément <circle> est généré pour marquer le point clé sur la courbe.

Les coordonnées cx, cy des cercles sont calculées de la même manière que pour les points de la courbe.

Le rayon r et la couleur de remplissage fill sont définis pour chaque cercle.

Code complet

<div class="chart-container top30">
    <div class="chart">

        <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="line-chart">
            <!-- Lignes de fond -->
            <line x1="0" y1="7" x2="100" y2="7" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="24.5" x2="100" y2="24.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="42.5" x2="100" y2="42.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="60" x2="100" y2="60" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="77.5" x2="100" y2="77.5" stroke="#f1f1f1" stroke-width="0.5"/>
            <line x1="0" y1="95.5" x2="100" y2="95.5" stroke="#f1f1f1" stroke-width="0.5"/>

            <?php

                $array = array(15, 55, 40, 60, 52, 65, 58, 85);

            ?>

            <!-- Courbe -->
            <polyline 
                fill="none" 
                stroke="#0077cc" 
                stroke-width="0.7"
                points="<?php

                    $i = 1.5; 
                    $j = 89 / 100;
                    // echo round($j, 1);

                    // Boucle pour la courbe
                    foreach($array as $item) {
                        $i += 11.5;
                        $k = 96 - ($j * $item);
                        echo $i.",".round($k, 1)." ";
                    }

                ?>"/>


            <!-- Points clés -->
            <?php

                $i = 1.5; 
                $j = 89 / 100;

                foreach($array as $item) {
                    $i += 11.5;
                    $k = 96 - ($j * $item);
                    echo '<circle cx="'.$i.'" cy="'.$k.'" r="0.8" fill="#34a853" />';
                }

            ?>
        </svg>

        <div class="y-axis">
            <div class="y-tick">100</div>
            <div class="y-tick">80</div>
            <div class="y-tick">60</div>
            <div class="y-tick">40</div>
            <div class="y-tick">20</div>
            <div class="y-tick">0</div>
        </div>

        <div class="x-axis">
            <div class="x-tick">Jan</div>
            <div class="x-tick">Fev</div>
            <div class="x-tick">Mar</div>
            <div class="x-tick">Avr</div>
            <div class="x-tick">Mai</div>
            <div class="x-tick">Jun</div>
            <div class="x-tick">Jui</div>
            <div class="x-tick">Aou</div>
        </div>

    </div>
</div>