Documentation menu

Graphiques et blocs d'analytique

Cette page est un résumé rapide des treize blocs de graphique et de KPI — chacun a aussi sa propre page dédiée avec la liste complète des champs et des exemples travaillés, liée à la fin de sa section ci-dessous.

Treize blocs de graphique et de KPI pour raconter une histoire de données à l'intérieur même de l'email — un digest hebdomadaire, un récapitulatif de ventes, un rapport que vos destinataires n'ont pas à cliquer pour lire. Ils vivent dans la même section Contenu de la palette Insérer que tout autre bloc ; il n'y a pas de catégorie « Analytique » séparée.

Quelques éléments sont vrais pour chaque graphique de cette famille, donc énoncés une fois ici plutôt que treize fois ci-dessous :

  • Chaque graphique se rend comme une seule image générée côté serveur — aucune bibliothèque de graphiques côté client, aucun JavaScript — avec un tableau de données visible juste à côté. Le tableau n'est pas une note de bas de page ni une réflexion après coup d'accessibilité : 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. Ce n'est jamais facultatif.
  • Les chiffres d'un graphique sont figés au moment de l'envoi ou de l'export — la même convention « exact au moment de l'envoi » que l'échéance du minuteur de compte à rebours ou le badge de stock d'un bloc produit, pas un widget qui se met à jour en direct. (La seule exception : un graphique lié aux propres résultats de réponse d'une campagne se lit en direct au moment du rendu — voir Lier des graphiques à de vraies données.)
  • Jamais de graphique à double axe. Deux mesures d'échelles différentes font deux blocs de graphique côte à côte, pas un graphique qui prétend avoir deux axes des ordonnées.

Carte de score KPI

Un grand chiffre pour un indicateur principal — revenu, inscriptions, ce sur quoi l'email fait un rapport.

  • Champs : un libellé, une valeur avec un format (nombre simple, devise, ou pourcentage), une valeur précédente facultative pour montrer un Δ, et un mini-graphique facultatif.
  • La direction du Δ (haut/bas/stable) est quelque chose que vous définissez vous-même, pas déduit du fait que les chiffres aient augmenté — donc vous gardez le contrôle de ce qui compte comme une bonne nouvelle.
  • Le mini-graphique est une petite image de tendance ; le libellé/la valeur/le Δ en dessous sont toujours du vrai texte HTML, jamais dépendants du rendu de l'image.

Guide complet et exemples

Graphique à barres

Barres verticales ou horizontales, jusqu'à 3 séries saisies.

  • Au-delà d'environ 8 catégories, le graphique abandonne les étiquettes de valeur directes sur chaque barre au profit d'un axe partagé avec des lignes de grille — lire des chiffres exacts sur une douzaine de barres étiquetées cesse d'être lisible avant ce seuil, donc le tableau de données prend le relais comme source précise.

Guide complet et exemples

Graphique en courbes / aires

Même forme de saisie ligne par ligne que le graphique à barres — les catégories en lignes, jusqu'à 3 séries en colonnes — plus un bouton filled pour la variante en aires.

  • Les marqueurs de points sur chaque valeur de données commencent à s'espacer au-delà d'environ 20 points afin que la ligne ne se transforme pas en une rangée solide de points ; la ligne tracée, l'axe partagé, et le tableau de données continuent de porter la tendance au-delà.

Guide complet et exemples

Graphique en camembert / anneau

Une valeur par catégorie, dessinée comme un camembert ou (en mode anneau) un anneau avec un libellé central facultatif pour un chiffre de type KPI au milieu.

  • Au-delà de 8 parts, les plus petites se replient en une seule part « Autre » plutôt que de rendre le graphique illisiblement fin — la légende et le tableau de données montrent tous deux le même repliement.

Guide complet et exemples

Nuage de points / bulles

Des points X/Y, avec une colonne series facultative pour regrouper les points en plusieurs couleurs et une colonne size facultative pour en faire un graphique à bulles.

  • L'identité de série provient de ce que vous tapez dans la colonne Série — laissez-la vide et chaque point partage le titre propre du bloc comme sa seule série.

Guide complet et exemples

Histogramme

Regroupe automatiquement une colonne de valeurs brutes en plages — donnez-lui des chiffres individuels, pas des paniers déjà comptés, et il fait le regroupement pour vous.

  • Vous contrôlez approximativement combien de paniers viser ; si chaque valeur que vous avez tapée est identique, il se réduit à un seul panier au lieu d'en dessiner dix-neuf vides.

Guide complet et exemples

Carte de chaleur

Une grille lignes × colonnes de valeurs, teintée sur une rampe de couleur séquentielle de clair à foncé.

  • Les cellules affichent leur valeur exacte en texte uniquement tant que la grille reste assez petite pour être lue d'un coup d'œil — au-delà, la rampe elle-même (plus le tableau de données toujours visible) porte les chiffres plutôt que d'entasser du texte dans de minuscules cellules. Une véritable combinaison manquante (aucune ligne pour cette paire ligne/colonne) se rend comme un gris distinct de « pas de données » plutôt que de ressembler à un zéro.

Guide complet et exemples

Entonnoir

Des valeurs d'étape ordonnées — visites → inscriptions → achats, ce genre de séquence — chacune montrée comme un pourcentage de la première étape.

  • Comme le sens d'un entonnoir dépend entièrement de l'ordre dans lequel vous avez tapé les étapes, il n'y a pas de repliement d'une étape en surplus dans un panier « Autre » comme le font le camembert/treemap — une étape au-delà du plafond n'est simplement pas dessinée. Le tableau de données ajoute à la fois le « pourcentage de la première étape » et le « pourcentage de l'étape précédente » (la baisse étape par étape), que l'image seule ne montre pas.

Guide complet et exemples

Cascade

Un graphique à total cumulé — une valeur de départ, puis une séquence de barres d'augmentation/diminution, atterrissant éventuellement sur une barre de « total » saisie à mi-parcours ou à la fin.

  • Les barres d'augmentation/diminution/total utilisent toujours les trois mêmes couleurs réservées, afin qu'une cascade se lise de façon cohérente d'un email à l'autre plutôt que selon les couleurs choisies la dernière fois. Comme l'entonnoir, une barre en surplus est abandonnée plutôt que repliée, puisque le calcul du total cumulé dépend de l'ordre saisi.

Guide complet et exemples

Jauge

Une seule métrique montrée par rapport à des bandes de seuil bon/avertissement/grave que vous définissez — un cadran de type aiguille, pas un graphique en lignes.

  • Le seul bloc de cette famille sans tableau de données en dessous, pour la même raison que la carte de score KPI : la valeur et son statut sont déjà du vrai texte HTML à côté de l'image, pas des chiffres enfermés dans une image.

Guide complet et exemples

Radar

Une comparaison multi-axes — jusqu'à 3 séries tracées sur des axes partagés, utile pour comparer des catégories sur plusieurs dimensions à la fois (par ex. un produit noté sur prix/qualité/rapidité/support).

  • A besoin d'au moins 3 axes pour se dessiner comme un polygone du tout — moins que cela affiche le même espace réservé « ajoutez plus de données » qu'un graphique vide. Contrairement au reste de la famille, c'est un plancher autant qu'un plafond (limité à 8 axes).

Guide complet et exemples

Treemap

Des tuiles proportionnelles dimensionnées par valeur, disposées pour remplir un rectangle (une mise en page « squarifiée ») plutôt que les angles d'un camembert — même forme de saisie une-valeur-par-catégorie que le graphique en camembert, juste une forme différente pour comparer une part d'un tout.

  • Suit la même règle de repliement au-delà de 8 parts que le graphique en camembert, puisqu'il partage la même préparation de données sous-jacente.

Guide complet et exemples

Sankey

Un flux proportionnel entre des nœuds nommés — des lignes De, Vers, et Valeur, par ex. source de trafic → page d'atterrissage → conversion.

  • Les nœuds ne sont pas saisis directement ; ils sont dérivés de tous les libellés qui se répètent dans vos lignes De/Vers, et leur position de gauche à droite est déduite automatiquement de la direction du flux.
  • Au-delà du plafond de nœuds ou de liens, un nœud en surplus est abandonné, pas replié — fusionner deux points de terminaison de flux distincts en un seul déformerait ce que montre le diagramme, contrairement à la part « Autre » d'un camembert. Le tableau de données liste toujours chaque ligne que vous avez saisie, qu'elle soit ou non parvenue dans le diagramme dessiné, afin que rien de ce que vous avez tapé ne disparaisse silencieusement de la vue.

Guide complet et exemples

Lier à de vraies données

Carte de score KPI, graphique à barres, graphique en courbes, et graphique en camembert — et seulement ces quatre-là — peuvent se lier à une source de données connectée ou aux propres résultats de réponse d'une campagne passée au lieu de chiffres que vous tapez à la main. Il y a aussi un démarreur de projet Tableau de bord en un clic qui amorce ensemble une rangée de KPI et un graphique à barres. Voir Lier des graphiques à de vraies données pour savoir comment.