Balkendiagramm-Block
Vertikale oder horizontale Balken zum Vergleich von Werten über Kategorien hinweg — das Arbeitspferd unter den Diagrammen für „was ist größer“, mit bis zu 3 Reihen.
Wie es funktioniert
Das Diagramm wird als einzelnes, serverseitig erzeugtes PNG gerendert (keine clientseitige Diagramm-Bibliothek, kein JavaScript) mit einer stets sichtbaren HTML-Datentabelle direkt darunter, die jede Zahl wiederholt, die das Bild zeichnet. Die Tabelle ist kein nachträglich angeflanschter Fallback für defekte Clients — es sind dieselben Zahlen wie im Bild, in reinem HTML, und sie ist es, was das Diagramm in reinen Text-Clients, Postfächern mit blockierten Bildern und Screenreadern überhaupt nutzbar macht.
Daten werden zeilenweise erfasst: eine Spalte Kategorie plus bis zu drei numerische Reihen-Spalten. Reihe 1 ist immer aktiv — ein Balkendiagramm mit nur einer Reihe braucht keinen eigenen Reihennamen, da der Titel des Blocks sie bereits identifiziert.
Reihe 2 und 3 schalten sich erst ein, sobald Sie ihnen unter Reihe 2 – Name / Reihe 3 – Name einen Namen geben. Eine halb ausgefüllte Wertespalte ohne Reihennamen wird ignoriert, statt als unbeschrifteter Geister-Balken zu erscheinen, sodass unvollständig ausgefüllte Daten nie ins Rendering durchsickern. Jede aktive Reihe erhält ihre eigene Farbe, entweder selbst pro Reihe gewählt oder aus der kategorialen Palette des Projekts aufgelöst. Eine Legende (farbiges Symbol + Beschriftung) erscheint erst, sobald 2 oder mehr Reihen aktiv sind — eine einzelne Reihe ist bereits durch den Titel des Diagramms benannt, sodass eine Legende mit nur einem Eintrag überflüssig wäre.
Bis zu etwa 8 Kategorien erhält jeder Balken zusätzlich zur Datentabelle direkt im Bild selbst eine Wertbeschriftung, gezeichnet auf oder über ihm. Über dieser Schwelle hinaus lässt das Diagramm die Beschriftung pro Balken weg zugunsten einer gemeinsamen Wertachse mit Gitterlinien. Der Versuch, auf jedem von einem Dutzend-plus Balken eine Wertbeschriftung unterzubringen, wird schon deutlich vor diesem Punkt unleserlich. Die Achse übernimmt daher den Blick auf einen Blick, und die Datentabelle wird zur präzisen Quelle für exakte Zahlen. Das Diagramm ist auf insgesamt 24 Kategorien begrenzt; alles darüber hinaus Erfasste wird schlicht nicht gezeichnet (die Datentabelle spiegelt immer nur wider, was tatsächlich dargestellt wurde).
Horizontale Balken kehren die Kategorieachse um, sodass sie von oben nach unten statt von links nach rechts verläuft. Wählen Sie diese Option, wenn Kategorienamen lang oder zahlreich sind — horizontale Beschriftungen müssen nicht gedreht oder abgeschnitten werden, wie es bei vertikalen Achsenbeschriftungen der Fall ist.
Konfigurierbare Felder:
- Diagrammtitel — wird über dem Bild angezeigt; dient auch als Ausweich-Reihenname, wenn nur Reihe 1 aktiv ist.
- Schalter Horizontale Balken.
- Daten — die Zeilenliste (Kategorie + Reihe 1/2/3).
- Reihe 1/2/3 – Name und Reihe 1/2/3 – Farbe.
- Hintergrundfarbe, Innenabstand, Rahmen, Eckenradius der Karte.
- Unabhängige Farb-/Schriftgrößen-Paare für den Titel und den Legenden-/Tabellentext.
Ein Balkendiagramm kann seine Zeilen außerdem an eine verbundene Datenquelle binden, statt sie direkt selbst zu erfassen. Ein Feld Gruppieren nach verwandelt jeden eindeutigen Wert in eine Kategorie, kombiniert mit bis zu 3 Reihenfeldern — jedes mit eigenem Aggregat (Summe, Durchschnitt, Anzahl oder letzte Zeile) —, was dieselbe Form von bis zu 3 Reihen wie bei selbst erfassten Zeilen widerspiegelt. Ein optionaler Filter kann auf Empfänger-Merge-Tags verweisen, sodass derselbe Block jedem Empfänger seinen eigenen Ausschnitt einer gemeinsam genutzten Quelle zeigt. Die vollständige Funktionsweise, einschließlich des Kampagnen-Antwortergebnisse-Modus, finden Sie unter Diagramme an echte Daten binden.
Beispiele
Subject
Q3 revenue vs. cost breakdown
Der Projektzweck Dashboard bereitet automatisch ein Balkendiagramm vor, direkt unter einer Zeile aus drei KPI-Kennzahlkarten — ein Ein-Klick-Ausgangspunkt für einen wiederkehrenden Bericht; siehe das Dashboard-Raster-Preset. Ein wöchentlicher Verkaufs-Digest kann Umsatz nach Region als drei oder vier Kategorien mit einer einzigen Reihe darstellen, oder „diese Woche vs. letzte Woche“ als zwei Reihen pro Kategorie für einen direkten Vergleich. Ein Bericht nach einer Veranstaltung könnte horizontale Balken für „Zusagen nach Mannschaft“ verwenden, wenn ein Dutzend Teamnamen zu lang sind, um als vertikale Achsenbeschriftungen zu passen. Ein Fortschritts-Digest im Bildungsbereich könnte den durchschnittlichen Quiz-Score nach Klassenabschnitt darstellen, ein Balken pro Abschnitt, live an eine Datenquelle gebunden, sodass die Zahlen bei jedem Versand des wiederkehrenden Sendevorgangs aktuell bleiben.
So sieht der statische Fallback aus
<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>
Das <img> trägt einen beschreibenden Alt-Text, der jeden Kategorie-/Reihenwert zusammenfasst, und die Tabelle darunter wiederholt dieselben Zahlen als reines, stets sichtbares HTML.