mailinapp
Documentation menu

Treemap-Block

Proportionale Kacheln, deren Größe sich nach dem Wert richtet, gepackt in ein Rechteck statt in Segmente geschnitten — dieselbe Ein-Wert-pro-Kategorie-Erfassungsform wie das Kreisdiagramm, nur nach Fläche angeordnet („quadratisches Layout“, squarified) statt nach Winkel. Es ist eine andere visuelle Antwort auf dieselbe „Anteil an einem Ganzen“-Frage, die ein Kreis- oder Donut-Diagramm beantwortet.

Wie es funktioniert

Jede erfasste Zeile ist eine Kachel; die Fläche einer Kachel ist proportional zu ihrem Wert im Verhältnis zur Summe aller beibehaltenen Kacheln. Eine Treemap-Kachel ist datenmodell-identisch mit einem Kreisdiagramm-Segment: ein Wert pro Kategorie, Anteil-am-Ganzen, nur eine andere Geometrie. Deshalb übernimmt der Block die Erfassungsspalten, die Farbzuweisungslogik und das Zusammenfassungsverhalten des Kreisdiagramms direkt, statt diese Logik für einen zweiten Diagrammtyp zu duplizieren.

Diese gemeinsame Abstammung bedeutet, dass die Zusammenfassungsregel exakt der des Kreisdiagramms entspricht: Ab 8 Kategorien werden die wertmäßig kleinsten Kacheln zu einer einzigen synthetischen „Sonstige“-Kachel zusammengefasst, statt dass das Layout unlesbar fragmentiert. Die Kacheln, die die Zusammenfassung überstehen, behalten ihre ursprünglich erfasste relative Reihenfolge bei, nicht neu nach Wert sortiert. Das hält ihre Farbzuweisung stabil und vorhersehbar; „Sonstige“, sofern vorhanden, wird immer zuletzt sortiert. Zeilen mit leerer Beschriftung oder einem nicht positiven Wert werden komplett übersprungen, da eine Treemap-Kachel keinen Anteil von null oder negativ an einem Ganzen darstellen kann.

Die stets sichtbare Datentabelle unter dem Bild hat exakt die Form des Kreisdiagramms: die Spalten Kategorie, Wert und Prozent, eine Zeile pro Kachel, einschließlich der zusammengefassten „Sonstige“-Zeile, wenn sie existiert. Sie trägt die exakten Prozentsätze, die die Kachelflächen darstellen, als auswählbaren Text. Die Legende über der Tabelle listet jede Kachel mit derselben Prozentzahl auf, immer gerendert und nie an eine Reihenanzahl gekoppelt. Der eigene Titel einer Treemap kann keine einzelne Kachel benennen, wie es eine einzelne Balken-/Linien-Reihe kann, die sich den Titel des Blocks ausleiht.

Konfigurierbare Felder:

  • Diagrammtitel — optionaler Überschriftentext über dem Diagramm.
  • Daten — die Zeilenliste: eine Kategorie-Beschriftung, ein numerischer Wert und eine optionale Farbe-Überschreibung pro Kachel.
  • Hintergrundfarbe, Innenabstand, Rahmen und Eckenradius der Karte.
  • Titelfarbe/-größe und Legendenfarbe/-größe — Textgestaltung für die Überschrift und den Legenden-/Tabellentext unter dem Bild.

Wenn noch keine Zeilen erfasst wurden — oder jede Zeile eine leere Beschriftung oder einen nicht positiven Wert hat —, lässt der Block das Bild weg. Er rendert nur seinen Titel und den Kartenrahmen, stattdessen mit dem einfachen Hinweis „Fügen Sie mindestens eine Datenzeile hinzu, um dieses Diagramm zu rendern“.

Beispiele

Traffic-Anteil nach Kanal — organisch, bezahlt, Empfehlung, direkt, sozial — als Kacheln in einer monatlichen Marketing-Zusammenfassung macht die relative Größe jeder Quelle sofort ablesbar, ohne eine Prozentspalte lesen zu müssen. Eine Budgetzuteilungs-E-Mail kann Ausgaben nach Abteilung oder Projekt kacheln, um zu zeigen, wohin das Geld dieses Quartal tatsächlich geflossen ist. Ein Support-Team kann das Ticketvolumen nach Kategorie kacheln (Abrechnung, Fehler, Onboarding, Funktionswünsche), um Stakeholdern schnell zu zeigen, wo sich die Support-Last konzentriert.

So sieht der statische Fallback aus

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

Der Alt-Text buchstabiert Wert und Anteil am Gesamt jeder Kachel aus; die Tabelle darunter wiederholt dieselben Zahlen als auswählbares HTML, einschließlich einer eventuell zusammengefassten „Sonstige“-Kachel.

Siehe auch