mailinapp
Documentation menu

Blocco Treemap

Riquadri proporzionali dimensionati in base al valore, disposti per riempire un rettangolo anziché tagliati in spicchi — la stessa forma di inserimento un-valore-per-categoria del grafico a torta, solo disposta per area ("squarified", ossia ottimizzata per riquadri il più possibile quadrati) invece che per angolo. È una risposta visiva diversa alla stessa domanda "quota di un totale" a cui risponde un grafico a torta o ad anello.

Come funziona

Ogni riga inserita è un riquadro; l'area di un riquadro è proporzionale al suo valore rispetto al totale di ogni riquadro mantenuto. Un riquadro del treemap è identico, dal punto di vista del modello dati, a uno spicchio di torta: un valore per categoria, quota sul totale, solo una geometria diversa. Per questo il blocco riutilizza direttamente le colonne di inserimento, la logica di assegnazione dei colori e il comportamento di accorpamento del grafico a torta, invece di duplicare quella logica per un secondo tipo di grafico.

Questa eredità condivisa significa che la regola di accorpamento è esattamente quella della torta: oltre le 8 categorie, i riquadri più piccoli per valore si accorpano in un unico riquadro sintetico "Altro", invece di rendere la disposizione illeggibilmente frammentata. I riquadri che sopravvivono all'accorpamento mantengono il loro ordine relativo originale di inserimento, non riordinati per valore. Questo mantiene stabile e prevedibile l'assegnazione dei colori; "Altro", quando presente, viene sempre ordinato per ultimo. Le righe con un'etichetta vuota o un valore non positivo vengono scartate del tutto, poiché un riquadro del treemap non può rappresentare una quota nulla o negativa di un totale.

La tabella dei dati sempre visibile sotto l'immagine è la stessa forma della torta: colonne Categoria, Valore e Percentuale, una riga per riquadro, inclusa la riga "Altro" accorpata quando esiste. Riporta le percentuali esatte che le aree dei riquadri rappresentano, come testo selezionabile. La legenda sopra la tabella elenca ogni riquadro con la stessa cifra percentuale, sempre renderizzata e mai subordinata a un conteggio di serie. Il titolo di un treemap non può nominare un singolo riquadro nel modo in cui una serie isolata di un grafico a barre/linee può prendere in prestito il titolo del blocco.

Campi configurabili:

  • Titolo del grafico — testo di intestazione facoltativo sopra il grafico.
  • Dati — l'elenco righe: un'etichetta Categoria, un Valore numerico e un Colore facoltativo per riquadro.
  • Colore di sfondo, padding, bordo e raggio del bordo della card.
  • Colore/dimensione del titolo e colore/dimensione della legenda — stile del testo per l'intestazione e per il testo di legenda/tabella sotto l'immagine.

Se non è ancora stata inserita nessuna riga — o ogni riga ha un'etichetta vuota o un valore non positivo — il blocco salta l'immagine. Renderizza solo il suo titolo e il contorno della card, con un semplice avviso "Aggiungi almeno una riga di dati per visualizzare questo grafico" al suo posto.

Esempi

La quota di traffico per canale — organico, a pagamento, referral, diretto, social — come riquadri in un riepilogo marketing mensile rende immediatamente leggibile la dimensione relativa di ogni fonte senza leggere una colonna di percentuali. Un'email sull'allocazione del budget può disporre in riquadri la spesa per reparto o progetto per mostrare dove è effettivamente andato il denaro questo trimestre. Un team di supporto può disporre in riquadri il volume dei ticket per categoria (fatturazione, bug, onboarding, richieste di funzionalità) per dare agli stakeholder una lettura rapida di dove si concentra il carico di supporto.

Come appare il fallback statico

<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>

Il testo alt riporta il valore e la quota sul totale di ogni riquadro; la tabella sottostante ripete le stesse cifre come HTML selezionabile, incluso qualunque riquadro "Altro" accorpato.

Vedi anche