Documentation menu

Bloque de gráfico de dispersión / burbujas

Puntos X/Y para mostrar la relación entre dos medidas numéricas — con una tercera dimensión opcional (tamaño del marcador) para una variante de gráfico de burbujas.

Cómo funciona

El gráfico se renderiza como un único PNG generado en el servidor (sin biblioteca de gráficos del lado del cliente, sin JavaScript) con una tabla de datos HTML siempre visible debajo, que enumera cada punto que dibuja la imagen. A diferencia de la tabla de categoría compartida del gráfico de barras/líneas o la tabla de porcentaje del total del gráfico circular, la forma de alternativa de un gráfico de dispersión es propia. Ni un eje de categoría ni una porción de un total se aplican a un conjunto de puntos independientes, así que la tabla es simplemente una fila por punto: Serie, X, Y y (solo en modo burbuja) Tamaño. Una leyenda encima de ella, organizada por serie, muestra la muestra de color y el conteo de puntos de cada serie, ya que "cuántos puntos" es el único número resumen que una serie tiene naturalmente.

Las filas se definen con un nombre de Serie opcional, un valor de X, un valor de Y, y un valor de Tamaño opcional (solo relevante en modo burbuja). La identidad de la serie proviene por completo de lo que escribas en la columna Serie — las filas que comparten el mismo nombre de serie se agrupan y colorean juntas, en orden de primera aparición. Deja Serie en blanco en todas las filas y cada punto comparte una serie implícita, nombrada según el propio título del bloque (o "Serie 1" si el bloque no tiene título). Escribe en cambio nombres de serie distintos, y la misma lista de filas produce un gráfico de dispersión genuinamente multicolor sin ningún ajuste separado de "número de series" en ningún lugar — los propios datos de las filas son la única fuente de verdad sobre cuántas series existen. A una fila a la que le falte X o Y se la omite en lugar de graficarla en (0, 0), ya que una celda en blanco no es lo mismo que un cero definido.

El interruptor de Gráfico de burbujas activa la columna Tamaño: el radio del marcador de cada punto se escala según su valor de Tamaño en lugar de ser un punto fijo. Desactivar el modo burbuja no elimina nada de lo escrito en la columna Tamaño — simplemente se ignora hasta que el interruptor se vuelva a activar. La columna Tamaño de la tabla de datos solo aparece mientras el modo burbuja está activo, así que la tabla de un gráfico de dispersión simple nunca muestra una columna vacía.

El gráfico tiene un límite de 120 puntos en total combinando todas las series, y 8 series, coincidiendo con la longitud propia de la paleta de colores categórica. Una fila definida más allá del límite de puntos se descarta, en el orden en que se definió — un gráfico de dispersión no tiene un bucket natural de "Otros" en el que agrupar el desbordamiento como sí lo tiene un gráfico circular.

Este bloque solo admite filas escritas manualmente — no tiene un modo de vinculación a fuente de datos ni de vinculación a resultados de respuesta de campaña. Mira Vincular gráficos a datos reales para saber cuáles cuatro tipos de gráfico sí admiten vinculación.

Campos configurables:

  • Título del gráfico — se muestra encima de la imagen.
  • Interruptor de Gráfico de burbujas (la columna Tamaño determina el tamaño del marcador).
  • Datos — la lista de filas (Serie + X + Y + Tamaño).
  • Color de fondo, relleno, borde, radio de borde de la tarjeta.
  • Pares independientes de color/tamaño de fuente para el título y el texto de la leyenda/tabla.

Ejemplos

Subject

Signups vs. activation, by plan

Un resumen semanal de operaciones podría graficar el tiempo de respuesta (X) contra el volumen de tickets (Y) por agente de soporte, un punto por agente sin agrupación de series — una lectura visual rápida de quién está manejando más volumen sin ralentizarse. Un informe de uso de producto podría agrupar puntos en 2-3 series por nivel de plan (Free/Pro/Business), cada una de un color distinto, graficando la puntuación de interacción contra la antigüedad de la cuenta para ver si la relación difiere según el nivel. Un informe de ventas puede usar la variante de burbujas para graficar el tamaño del trato (X) contra los días hasta el cierre (Y), con la columna Tamaño definida según el número de partes interesadas involucradas. Eso son tres dimensiones numéricas en un solo gráfico sin un cuarto eje, algo que esta familia de bloques nunca agrega.

Cómo se ve la alternativa estática

<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">Response time vs. ticket volume</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Scatter chart: Agent A (1 point), Agent B (1 point), Agent C (1 point)"
       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">Series</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">X</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Y</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Agent A</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">4.2</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">38</td>
    </tr>
  </table>
</div>

La tabla de un gráfico de dispersión simple (sin burbujas) no tiene columna Tamaño en absoluto; solo aparece una vez que el interruptor de Gráfico de burbujas está activo.

Relacionado