Bloc Graphique à barres
Des barres verticales ou horizontales pour comparer des valeurs entre catégories — le graphique de référence pour « lequel de ces éléments est le plus grand », 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. Le tableau n'est pas un repli greffé pour les clients défaillants — ce sont les mêmes chiffres que l'image, en HTML brut, et c'est ce qui rend le graphique réellement utilisable dans les clients en texte seul, les boîtes de réception à images bloquées, et les lecteurs d'écran.
Les données sont saisies en lignes : une colonne Catégorie plus jusqu'à trois colonnes de série numériques. La série 1 est toujours active — un graphique à barres à une seule série n'a besoin d'aucun nom de série propre, puisque le titre même du bloc l'identifie déjà.
Les séries 2 et 3 ne s'activent qu'une fois que vous leur donnez un nom dans Nom de la série 2 / Nom de la série 3. Une colonne de valeurs partiellement remplie sans nom de série est ignorée plutôt que de s'afficher comme une barre fantôme sans étiquette, de sorte que des données partiellement saisies ne se glissent jamais dans le rendu. Chaque série active reçoit sa propre couleur, soit choisie par l'auteur pour chaque série, soit résolue depuis la palette catégorielle du projet. Une légende (pastille de couleur + libellé) n'apparaît qu'une fois qu'il y a 2 séries actives ou plus — une série isolée est déjà nommée par le titre même du graphique, donc une légende à un seul élément serait redondante.
Jusqu'à environ 8 catégories, chaque barre reçoit une étiquette de valeur directe dessinée sur ou au-dessus d'elle dans l'image même, en plus du tableau de données. Au-delà de ce seuil, le graphique abandonne les étiquettes par barre au profit d'un axe de valeurs partagé avec des lignes de grille. Faire tenir une étiquette de valeur sur chacune d'une douzaine de barres et plus cesse d'être lisible bien avant ce point. L'axe prend donc le relais comme lecture d'un coup d'œil, et le tableau de données devient la source précise pour les chiffres exacts. Le graphique est plafonné à 24 catégories au total ; tout ce qui est saisi au-delà n'est simplement pas dessiné (le tableau de données ne reflète jamais que ce qui a réellement été tracé).
Les barres horizontales font pivoter l'axe des catégories pour qu'il aille de haut en bas plutôt que de gauche à droite. Choisissez cette option lorsque les noms de catégories sont longs ou nombreux — les libellés horizontaux n'ont pas besoin d'être pivotés ou tronqués comme le seraient les libellés d'un axe vertical.
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 Barres horizontales.
- Données — la liste de lignes (Catégorie + Série 1/2/3).
- 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 à barres peut aussi lier ses lignes à une source de données connectée au lieu de les saisir directement. Un champ Regrouper par transforme chaque valeur distincte en catégorie, associé à jusqu'à 3 champs de série — chacun avec son propre agrégat (Somme, Moyenne, Compte, ou Dernière ligne) — reprenant la même forme jusqu'à 3 séries que les lignes saisies. Un filtre facultatif peut référencer les balises de fusion du destinataire, de sorte que le même bloc montre à chaque destinataire sa propre tranche d'une source partagée. 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
Q3 revenue vs. cost breakdown
L'objectif de projet Tableau de bord amorce automatiquement un graphique à barres, juste sous une rangée de trois cartes de score KPI — un point de départ en un clic pour un rapport récurrent ; voir le préréglage de grille Tableau de bord. Un digest de ventes hebdomadaire peut représenter le revenu par région en trois ou quatre catégories avec une seule série, ou « cette semaine contre la semaine dernière » comme deux séries par catégorie pour une comparaison directe. Un rapport post-événement pourrait utiliser des barres horizontales pour « RSVP par équipe » lorsqu'il y a une douzaine de noms d'équipe trop longs pour tenir comme libellés d'axe vertical. Un digest de progression du secteur éducation pourrait représenter la note moyenne d'un quiz par section de classe, une barre par section, liée en direct à une source de données afin que les chiffres restent à jour à chaque envoi récurrent.
À 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">Revenue by region</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
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">Revenue</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
</tr>
</table>
</div>
L'<img> porte un texte alternatif descriptif résumant chaque valeur catégorie/série, et le tableau en dessous répète les mêmes chiffres en HTML brut toujours visible.