Linien-/Flächendiagramm-Block
Ein Trend über eine geordnete Abfolge — Wochen, Monate, Trichterstufen im Zeitverlauf — gezeichnet als gezogene Linie oder, bei aktiviertem Flächen-Schalter, als schattierte Fläche darunter. 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. Das ist dieselbe nicht verhandelbare Kombination, zu der sich jedes Diagramm dieser Familie verpflichtet, sodass der Trend auch in reinen Text-Clients, Postfächern mit blockierten Bildern und bei deaktivierten Bildern lesbar bleibt.
Die Erfassungsform ist identisch mit der des Balkendiagramms: eine Spalte Kategorie (hier meist ein Zeitraum — „Woche 1“, „Mo“, „Q1“ — kann aber jede geordnete Beschriftung sein) plus bis zu drei numerische Reihen-Spalten. Reihe 1 ist immer aktiv und übernimmt, wenn Sie keinen eigenen Namen setzen, den Titel des Diagramms als Namen. Reihe 2 und 3 aktivieren sich erst, wenn ihnen ein Name gegeben wird, sodass eine halb ausgefüllte Wertespalte ohne Reihenbeschriftung nie als unbenannte Geister-Linie erscheint. Jede aktive Reihe zeichnet sich als eigene gezogene Linie mit eigener Farbe; eine Legende erscheint erst, sobald 2 oder mehr Reihen aktiv sind.
Der Schalter Gefüllt verwandelt das Liniendiagramm in ein Flächendiagramm: Die Fläche unterhalb jeder Linie wird mit geringer Deckkraft bis zur Achse schattiert. Es ist ein Schalter und kein eigener Block, da das zugrunde liegende Datenmodell, die Achsen und die Kategorieform in beiden Fällen exakt gleich sind — nur die Art, wie die Linie gerendert wird, ändert sich. Sind mehrere Reihen gefüllt, bleiben überlappende Bereiche visuell unterscheidbar, weil jede Reihe ihre eigene Farbe mit geringer Deckkraft behält. Dieser Block verweigert weiterhin zwei Achsen, sodass mehrere gefüllte Reihen sich immer eine gemeinsame Wertskala teilen.
Punktmarkierungen (kleine gefüllte Kreise an jedem erfassten Datenwert) werden für jede Kategorie über der Linie gezeichnet, bis zu etwa 20 Kategorien. Über diesen Punkt hinaus dünnen die Markierungen aus und werden nicht mehr einzeln gezeichnet, da sie bei hoher Dichte zu einem durchgehenden Schmierstreifen entlang der Linie verschmelzen würden, statt als einzelne Punkte lesbar zu bleiben. Die gezogene Linie selbst, die gemeinsame Wertachse und die Datentabelle tragen den Trend über diese Schwelle hinaus weiterhin — das Lesen des Diagramms hängt tatsächlich in keiner Weise von den Markierungen ab.
Konfigurierbare Felder:
- Diagrammtitel — wird über dem Bild angezeigt; dient auch als Ausweich-Reihenname, wenn nur Reihe 1 aktiv ist.
- Schalter Gefüllt (Flächendiagramm-Variante).
- Daten — die Zeilenliste (Kategorie + Reihe 1/2/3), dieselbe Spaltenmenge wie beim Balkendiagramm.
- 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 Liniendiagramm kann seine Zeilen außerdem an eine verbundene Datenquelle binden, statt sie einzutippen. Ein Feld Gruppieren nach verwandelt jeden eindeutigen Wert in einen Punkt entlang der Kategorieachse, kombiniert mit bis zu 3 Reihenfeldern, jedes mit eigenem Aggregat. Ein optionaler Filter kann auf Empfänger-Merge-Tags verweisen, für eine pro Empfänger unterschiedliche Ansicht desselben Trends. Die vollständige Funktionsweise, einschließlich des Kampagnen-Antwortergebnisse-Modus, finden Sie unter Diagramme an echte Daten binden.
Beispiele
Subject
Weekly signups are trending up
Ein wöchentlicher Betriebs-Digest kann die Anzahl offener Tickets über die letzten 8 Wochen als einzelne Linie darstellen, mit bei dieser Anzahl noch sichtbaren Punktmarkierungen, was sofort erkennen lässt, ob sich der Trend verbessert. Ein Verkaufsrückblick könnte ein gefülltes Flächendiagramm für den kumulierten Umsatz über ein Quartal verwenden, eine Reihe pro Produktlinie (bis zu 3). Der Leser sieht sowohl den einzelnen Trend als auch visuell, wie sich die kombinierte Schattierung Woche für Woche aufbaut. Ein wiederkehrender Leistungsbericht kann sich direkt an eine pro Empfänger eingegrenzte Datenquelle binden, über einen Merge-Tag-Filter — „die Nutzung Ihres Kontos in diesem Monat“ —, sodass das Liniendiagramm eines Projekts jedem Empfänger desselben Versands einen anderen Trend zeigt.
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">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>
Der Alt-Text fasst jedes Kategorie-/Reihenwert-Paar zusammen, sodass der Trend auch ohne geladenes Bild lesbar ist; die Tabelle darunter enthält dieselben Zahlen als reines HTML.