mailinapp
Documentation menu

Bloque de mapa de árbol

Mosaicos proporcionales dimensionados por valor, dispuestos para llenar un rectángulo en lugar de cortarse en porciones — la misma forma de creación de un valor por categoría que el gráfico circular, solo que dispuesta por área ("squarified") en lugar de por ángulo. Es una respuesta visual distinta a la misma pregunta de "proporción de un todo" que responde un gráfico circular o de dona.

Cómo funciona

Cada fila escrita es un mosaico; el área de un mosaico es proporcional a su valor contra el total de cada mosaico conservado. Un mosaico de mapa de árbol es idéntico en su modelo de datos a una porción de gráfico circular: un valor por categoría, proporción del total, solo que con una geometría distinta. Por eso, el bloque reutiliza directamente las columnas de creación, la lógica de asignación de color, y el comportamiento de agrupamiento del gráfico circular, en lugar de duplicar esa lógica para un segundo tipo de gráfico.

Esa herencia compartida significa que la regla de agrupamiento es exactamente la del gráfico circular: pasadas 8 categorías, los mosaicos más pequeños por valor se agrupan en un único mosaico sintético "Otros", en lugar de que el diseño se vuelva ilegiblemente fragmentado. Los mosaicos que sobreviven al agrupamiento conservan su orden relativo originalmente escrito, sin reordenarse por valor. Eso mantiene su asignación de color estable y predecible; "Otros", cuando está presente, siempre se ordena al final. Las filas con una etiqueta en blanco o un valor no positivo se omiten directamente, ya que un mosaico de mapa de árbol no puede representar una proporción cero o negativa de un todo.

La tabla de datos siempre visible debajo de la imagen es la misma forma del gráfico circular: columnas Categoría, Valor, y Porcentaje, una fila por mosaico, incluida la fila agrupada "Otros" cuando existe. Lleva los porcentajes exactos que representan las áreas de los mosaicos, como texto seleccionable. La leyenda sobre la tabla enumera cada mosaico con la misma cifra de porcentaje, siempre renderizada y nunca condicionada a un conteo de series. El propio título de un mapa de árbol no puede nombrar un mosaico individual de la forma en que una sola serie de barra/línea puede tomar prestado el título del bloque.

Campos configurables:

  • Título del gráfico — texto de encabezado opcional sobre el gráfico.
  • Datos — la lista de filas: una etiqueta de Categoría, un Valor numérico, y un color de mosaico opcional que lo sobrescribe.
  • Color de fondo, relleno, borde y radio de borde de la tarjeta.
  • Color/tamaño del título y color/tamaño de la leyenda — estilo de texto para el encabezado y el texto de la leyenda/tabla debajo de la imagen.

Si aún no se ha escrito ninguna fila — o cada fila tiene una etiqueta en blanco o un valor no positivo — el bloque omite la imagen. Renderiza solo su título y el marco de la tarjeta, con un simple aviso de "Agrega al menos una fila de datos para renderizar este gráfico" en su lugar.

Ejemplos

La proporción de tráfico por canal — orgánico, pago, referido, directo, social — como mosaicos en un resumen mensual de marketing hace que el tamaño relativo de cada fuente sea legible de inmediato sin leer una columna de porcentajes. Un correo de asignación de presupuesto puede mostrar en mosaicos el gasto por departamento o proyecto para mostrar a dónde fue realmente el dinero este trimestre. Un equipo de soporte puede mostrar en mosaicos el volumen de tickets por categoría (facturación, errores, incorporación, solicitudes de funciones) para dar a las partes interesadas una lectura rápida de dónde se concentra la carga de soporte.

Cómo se ve la alternativa estática

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

El texto alternativo detalla el valor y la proporción del total de cada mosaico; la tabla debajo repite las mismas cifras como HTML seleccionable, incluido cualquier mosaico "Otros" agrupado.

Relacionado