mailinapp
Documentation menu

Bloque de radar

Una comparación multieje — hasta 3 series trazadas en un conjunto de ejes compartidos, dibujadas como un polígono superpuesto (o "telaraña") en lugar de barras o una línea. Es la forma indicada para comparar categorías en varias dimensiones a la vez: un producto puntuado en precio, calidad, velocidad y soporte, o un nivel de plan comparado con otro según el mismo conjunto de criterios.

Cómo funciona

Cada fila definida es un eje. Su posición alrededor del círculo proviene exclusivamente del orden en que se definió (el ángulo equivale al índice de la fila dividido entre el número de filas), nunca se reordena ni se ordena por valor. Hasta 3 series trazan su propio valor en cada eje, compartiendo una única escala de 0 al máximo: el mismo modelo de "un solo eje de valor compartido" que ya usan los gráficos de barras y de líneas, solo que dispuesto de forma radial en lugar de a lo largo de una línea recta. Por eso una lista de filas de radar reutiliza exactamente las mismas columnas de autoría que barras/líneas — un eje de radar es idéntico en su modelo de datos a una categoría de gráfico de barras.

Un polígono necesita al menos 3 vértices para tener una forma con sentido — 2 puntos dibujan una línea, 1 punto no dibuja nada — así que radar es el único gráfico de esta familia con un piso además de un techo. Menos de 3 ejes definidos (incluido cero) renderiza el mismo marcador de posición de "agrega más datos" que recibe un gráfico vacío en cualquier otro lugar de la familia. En el otro extremo, radar está limitado a 8 ejes; pasado eso, los radios se amontonan y las etiquetas de los ejes empiezan a superponerse, el mismo techo de "demasiadas marcas" que todos los demás tipos de gráfico de esta familia aplican en 8 categorías/porciones/series.

La tabla de datos siempre visible debajo de la imagen enumera cada eje como una fila, con una columna por cada serie activa — la misma forma de categoría × serie que ya usan las tablas de los gráficos de barras y de líneas. Una leyenda solo aparece una vez que hay 2 o más series en juego; la identidad de una sola serie ya queda nombrada por el propio título del bloque, la misma convención que siguen los gráficos de barras/líneas.

La identidad de una serie depende de si le has dado un nombre. La serie 1 siempre se renderiza, recurriendo al propio título del bloque si se deja sin nombre, mientras que las series 2 y 3 solo aparecen una vez que escribes un nombre en su campo de etiqueta. Una columna de valores parcialmente completada sin nombre de serie nunca aparece como una serie fantasma sin etiqueta.

Campos configurables:

  • Título del gráfico — texto de encabezado opcional sobre el gráfico.
  • Datos (al menos 3 filas) — la lista de filas: una etiqueta de Categoría del eje más hasta 3 valores numéricos de serie por fila.
  • Nombre de serie 1/2/3 y Color de serie 1/2/3 — la serie 1 se renderiza incondicionalmente; las series 2 y 3 solo se renderizan una vez nombradas.
  • 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 — estilos de texto para el encabezado y el texto de la leyenda/tabla debajo de la imagen.

Ejemplos

Comparar dos niveles de producto según criterios compartidos — precio, profundidad de funciones, capacidad de respuesta del soporte, facilidad de configuración — como dos series superpuestas en un solo radar le da a un correo de ventas o marketing una sola imagen visual en lugar de una tabla comparativa de funciones. Un resumen interno de operaciones puede puntuar varios proveedores o contratistas según la misma rúbrica (costo, calidad, confiabilidad, comunicación) para justificar de un vistazo una decisión de renovación. Un equipo de producto que realiza una encuesta de clientes con varias dimensiones calificadas (usabilidad, valor, soporte, confiabilidad, diseño) puede graficar la puntuación promedio por dimensión como una serie, con las puntuaciones del trimestre anterior como segunda serie para mostrar la evolución.

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">Vendor scorecard</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="360" height="360"
       alt="Radar chart: Speed (Vendor A 8); Reliability (Vendor A 6); Design (Vendor A 9); Price (Vendor A 5); Support (Vendor A 7)" />
  <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">Vendor A</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Speed</td>
      <td style="padding:4px 8px">8</td>
    </tr>
  </table>
</div>

Con una sola serie nombrada, la leyenda se omite (el título ya la nombra), pero la tabla de datos sigue enumerando cada eje y valor.

Relacionado