Kreis-/Donut-Diagramm-Block
Ein Wert pro Kategorie, dargestellt als Anteil an einem Ganzen — ein Kreis, oder im Donut-Modus ein Ring mit Platz für eine Schlagzeilen-Zahl in der Mitte.
Wie es funktioniert
Das Diagramm wird als einzelnes, serverseitig erzeugtes PNG gerendert (keine clientseitige Diagramm-Bibliothek, kein JavaScript) mit einer stets sichtbaren Legende und einer HTML-Datentabelle darunter — dieselbe nicht verhandelbare Kombination, zu der sich jedes Diagramm dieser Familie verpflichtet. Anders als die Legende des Balken-/Liniendiagramms wird die Legende eines Kreisdiagramms immer gerendert, unabhängig von der Anzahl der Segmente. Der eigene Titel eines Kreisdiagramms kann kein einzelnes Segment benennen, wie es eine einzelne Balken-/Linien-Reihe mit dem Titel des Blocks tun kann, sodass selbst ein Kreisdiagramm mit nur einem Segment seine Legende braucht, um zu sagen, was dieses Segment ist.
Jeder Legenden-Eintrag zeigt die Beschriftung des Segments zusammen mit seinem Prozentanteil am Gesamtwert. Die Datentabelle fügt eine dritte Spalte hinzu (exakter Wert, neben Kategorie und Prozent), sodass sowohl der gerundete Anteil auf einen Blick als auch die präzise Zahl immer als Text verfügbar sind.
Die Erfassungsform unterscheidet sich von den festen Reihen-Plätzen bei Balken-/Liniendiagrammen: eine Zeile pro Kategorie, jede mit einem einzelnen Wert und einer optionalen, segmentweisen Farb-Überschreibung. Es gibt keine zweite oder dritte Reihe, da ein Kreisdiagramm per Definition genau eine Kennzahl pro Kategorie hat. Zeilen mit leerer Kategorie oder einem Wert von null oder negativ werden vollständig übersprungen, statt als leeres Segment gezeichnet zu werden.
Ab 8 Segmenten werden die kleinsten zu einem einzigen synthetischen „Sonstige“-Segment zusammengefasst, statt dass das Diagramm unleserlich dünn wird. Ab etwa 8 Segmenten kann ein Kreisdiagramm nicht mehr jedes einzelne in einem unterscheidbaren Winkel zeigen, daher hält die Zusammenfassung jedes gezeichnete Segment lesbar. Die Zusammenfassung behält die 7 wertmäßig größten Segmente und fasst alles Übrige zu „Sonstige“ zusammen. Legende und Datentabelle spiegeln beide dieselbe Zusammenfassung wider, sodass das, was Sie neben dem Diagramm lesen, immer dem entspricht, was tatsächlich darin gezeichnet ist. Nichts wird still aus der Legende ausgeblendet, während es im Bild noch mitgezählt wird, oder umgekehrt.
Der Donut-Modus verwandelt den Kreis in einen Ring. Erst dann bewirken die Felder Wert in der Mitte und Beschriftung in der Mitte überhaupt etwas und geben Ihnen eine Zahl im KPI-Stil in der Mitte des Rings. Das ist ein selbst eingegebenes Paar, nicht aus den Segmentwerten abgeleitet — derselbe Präzedenzfall „selbst erfasst, nicht abgeleitet“ wie bei der eigenen Δ-Richtung der KPI-Kennzahlkarte. Ein durchgehender Kreis hat kein Loch, in das Text gesetzt werden könnte, daher sind diese Felder einfach wirkungslos, bis Donut eingeschaltet wird.
Konfigurierbare Felder:
- Diagrammtitel — wird über dem Bild angezeigt.
- Schalter Donut (hohle Mitte).
- Daten — die Zeilenliste (Kategorie + Wert + optionale Farbe).
- Wert in der Mitte / Beschriftung in der Mitte — nur im Donut-Modus.
- Hintergrundfarbe, Innenabstand, Rahmen, Eckenradius der Karte.
- Unabhängige Farb-/Schriftgrößen-Paare für den Titel und den Legenden-/Tabellentext.
Ein Kreisdiagramm kann seine Segmente außerdem an eine verbundene Datenquelle binden, statt Zeilen selbst zu erfassen — ein Feld Gruppieren nach (jeder eindeutige Wert wird zu einem Segment) plus ein Wert-Feld und Aggregat (Summe, Durchschnitt, Anzahl oder letzte Zeile). Ein optionaler Filter kann auf Empfänger-Merge-Tags verweisen, für einen pro Empfänger unterschiedlichen Ausschnitt derselben Quelle. Die vollständige Funktionsweise, einschließlich des Kampagnen-Antwortergebnisse-Modus — zum Beispiel die direkte Darstellung der Stimmenverteilung einer vergangenen Abstimmung oder Bewertung —, finden Sie unter Diagramme an echte Daten binden.
Beispiele
Subject
Where your traffic is coming from
Ein Bericht nach einer Kampagne kann die Stimmenverteilung einer Abstimmung als Kreisdiagramm darstellen, indem er direkt an die Antwortergebnisse dieser Kampagne bindet — keine Datenquelle nötig, nur die Abstimmung aus der Auswahl zu wählen —, sodass der Bericht immer die aktuelle Stimmenzahl der Abstimmung widerspiegelt. Ein Abonnement-Rückblick könnte ein Donut-Diagramm für den „Plan-Mix“ verwenden (Free/Starter/Pro/Business als Segmente), wobei die Mitte die Gesamtzahl aktiver Konten als Zahl im KPI-Stil innerhalb des Rings selbst zeigt. Ein Support-Digest mit einem Dutzend Ticket-Kategorien verlässt sich auf die automatische „Sonstige“-Zusammenfassung, um das Diagramm lesbar zu halten, und vertraut darauf, dass die Datentabelle darunter weiterhin jede einzelne Kategorie mit exakter Anzahl auflistet.
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">Plan mix</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="320"
alt="Donut chart: Free 420 (52%), Starter 210 (26%), Pro 175 (22%)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">
<span aria-hidden="true" style="display:inline-block;width:10px;height:10px;background-color:#4f46e5"></span>
Free (52%)
</span>
</div>
<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">Value</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Percent</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Free</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">420</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">52%</td>
</tr>
</table>
</div>
Legende und Tabelle enthalten für jedes Segment exakt dieselbe Beschriftung/denselben Wert/Prozentsatz — bewusst dupliziert, da die Legende zum schnellen Überblick dient und die Tabelle die präzise Quelle ist.