Bloc Graphique en courbes / aires
Une tendance sur une séquence ordonnée — semaines, mois, étapes d'un entonnoir dans le temps — tracée comme une ligne pleine ou, avec la bascule remplissage activée, une aire teintée en dessous. Jusqu'à 3 séries.
Comment ça fonctionne
Le graphique se rend comme un seul PNG généré côté serveur — aucune bibliothèque de graphiques côté client, aucun JavaScript — avec un tableau de données HTML toujours visible juste en dessous, répétant chaque chiffre que dessine l'image. C'est le même engagement non négociable que prend chaque graphique de cette famille, afin que la tendance reste lisible dans les clients en texte seul, les boîtes de réception à images bloquées, et avec les images désactivées.
La forme de saisie est identique à celle du graphique à barres : une colonne Catégorie (ici, généralement une période — « Semaine 1 », « Lun », « T1 » — bien qu'il puisse s'agir de n'importe quel libellé ordonné) plus jusqu'à trois colonnes de série numériques. La série 1 est toujours active, empruntant le titre même du graphique comme nom quand vous n'en définissez pas. Les séries 2 et 3 ne s'activent qu'une fois qu'on leur donne un nom, de sorte qu'une colonne de valeurs partiellement remplie sans libellé de série ne se transforme jamais en ligne fantôme sans nom. Chaque série active se trace comme sa propre ligne pleine avec sa propre couleur ; une légende n'apparaît qu'une fois que 2 séries ou plus sont actives.
La bascule Remplie transforme le graphique en courbes en graphique en aires : la zone sous chaque ligne est teintée à faible opacité jusqu'à l'axe. C'est une bascule plutôt qu'un bloc séparé, puisque le modèle de données sous-jacent, les axes, et la forme des catégories sont exactement les mêmes dans les deux cas — seule la façon dont la ligne est rendue change. Avec plusieurs séries remplies, les zones qui se chevauchent restent visuellement distinctes, car chacune conserve sa propre couleur de série à faible opacité. Ce bloc refuse toujours les doubles axes, donc plusieurs séries remplies partagent toujours une seule échelle de valeurs.
Les marqueurs de points (petits cercles pleins à chaque valeur de donnée saisie) se dessinent par-dessus la ligne pour chaque catégorie, jusqu'à environ 20 catégories. Au-delà de ce point, les marqueurs s'espacent et cessent de se dessiner individuellement, car à haute densité ils se chevaucheraient en une traînée compacte le long de la ligne plutôt que de se lire comme des points distincts. La ligne pleine elle-même, l'axe de valeurs partagé, et le tableau de données continuent tous de porter la tendance au-delà de ce seuil — rien dans la lecture du graphique ne dépend réellement des marqueurs.
Champs configurables :
- Titre du graphique — affiché au-dessus de l'image ; sert aussi de nom de série de secours quand seule la Série 1 est active.
- Bascule Remplie (variante graphique en aires).
- Données — la liste de lignes (Catégorie + Série 1/2/3), le même jeu de colonnes que le graphique à barres.
- Nom et couleur de la Série 1/2/3.
- Couleur de fond, marge intérieure, bordure, rayon de bordure sur la carte.
- Paires indépendantes de couleur/taille de police pour le titre et le texte de la légende/du tableau.
Un graphique en courbes peut aussi lier ses lignes à une source de données connectée au lieu de les saisir. Un champ Regrouper par transforme chaque valeur distincte en point le long de l'axe des catégories, associé à jusqu'à 3 champs de série, chacun avec son propre agrégat. Un filtre facultatif peut référencer les balises de fusion du destinataire pour une vue par destinataire de la même tendance. Voir Lier des graphiques à de vraies données pour la mécanique complète, y compris le mode résultats de réponse de campagne.
Exemples
Subject
Weekly signups are trending up
Un digest hebdomadaire d'exploitation peut représenter le nombre de tickets ouverts sur les 8 dernières semaines comme une seule ligne, avec les marqueurs de points encore visibles à ce nombre, donnant une lecture immédiate de l'amélioration ou non de la tendance. Un récapitulatif de ventes pourrait utiliser un graphique en aires remplies pour le revenu cumulé sur un trimestre, une série par gamme de produits (jusqu'à 3). Le lecteur voit à la fois la tendance individuelle et, visuellement, l'accumulation de la teinte combinée semaine après semaine. Un rapport de performance récurrent peut se lier directement à une source de données restreinte par destinataire via un filtre de balise de fusion — « l'usage de votre compte ce mois-ci » — de sorte que le graphique en courbes d'un même projet montre une tendance différente à chaque destinataire d'un même envoi.
À quoi ressemble l'alternative statique
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Open tickets</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Open tickets</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
</tr>
</table>
</div>
Le texte alternatif résume chaque paire valeur catégorie/série de sorte que la tendance reste lisible même sans charger l'image ; le tableau en dessous reprend les mêmes chiffres en HTML brut.