Bloque de gráfico circular / de dona
Un valor por categoría, mostrado como proporción de un todo — un gráfico circular, o en modo dona un anillo con espacio para un número destacado en el centro.
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 leyenda siempre visible y una tabla de datos HTML debajo — el mismo emparejamiento innegociable que asume cada gráfico de esta familia. A diferencia de la leyenda del gráfico de barras/líneas, la leyenda de un gráfico circular siempre se renderiza sin importar el número de porciones. El propio título de un gráfico circular no puede nombrar una porción individual como puede hacerlo una única serie de barras/líneas tomando prestado el título del bloque, así que incluso un gráfico circular de una sola porción necesita su leyenda para decir qué es esa porción.
Cada entrada de la leyenda muestra la etiqueta de la porción junto a su porcentaje del total. La tabla de datos agrega una tercera columna (valor exacto, junto a categoría y porcentaje), así que tanto la proporción redondeada de un vistazo como el número preciso siempre están disponibles como texto.
La forma de creación difiere de los slots de serie fijos de barras/líneas: una fila por categoría, cada una con un único Valor y un Color por porción opcional. No hay una segunda o tercera serie, ya que un gráfico circular tiene exactamente una medida por categoría por definición. Las filas con categoría en blanco o un valor cero/negativo se omiten por completo en lugar de dibujarse como una cuña vacía.
Pasadas 8 porciones, las más pequeñas se agrupan en una única cuña sintética "Otros", en lugar de que el gráfico se vuelva ilegiblemente delgado. Pasadas aproximadamente 8 porciones, un gráfico circular deja de poder mostrar cada una en un ángulo distinguible, así que el agrupamiento mantiene legible cada cuña dibujada. El agrupamiento conserva las 7 porciones más grandes por valor y combina todo lo demás en "Otros". La leyenda y la tabla de datos reflejan ambas el mismo agrupamiento, así que lo que lees junto al gráfico siempre coincide con lo que realmente se dibuja en él. Nada se oculta silenciosamente de la leyenda mientras se sigue contando en la imagen, ni viceversa.
El modo dona convierte el gráfico circular en un anillo. Solo entonces los campos Valor central y Etiqueta central hacen algo, dándote un número estilo indicador clave en el medio del anillo. Es un par escrito por el autor, no derivado de los valores de las porciones — el mismo precedente de "escrito a mano, no inferido" que la propia Δ de la tarjeta de indicador clave. Un gráfico circular sólido no tiene un hueco donde poner texto, así que estos campos simplemente están inertes hasta que se activa Dona.
Campos configurables:
- Título del gráfico — mostrado sobre la imagen.
- Interruptor Dona (centro hueco).
- Datos — la lista de filas (Categoría + Valor + Color opcional).
- Valor central / Etiqueta central — solo modo dona.
- Color de fondo, relleno, borde, radio de borde en la tarjeta.
- Pares independientes de color/tamaño de fuente para el título y el texto de la leyenda/tabla.
Un gráfico circular también puede vincular sus porciones a una fuente de datos conectada en lugar de escribir filas — un campo Agrupar por (cada valor distinto se convierte en una porción) más un campo Valor y un agregado (Suma, Promedio, Conteo, o Fila más reciente). Un filtro opcional puede referenciar etiquetas de combinación del destinatario para una porción por destinatario de la misma fuente. Mira Vincular gráficos a datos reales para la mecánica completa, incluido el modo de resultados de respuesta de campaña — graficando directamente, por ejemplo, la distribución de votos de una encuesta o calificación pasada.
Ejemplos
Subject
Where your traffic is coming from
Un informe posterior a una campaña puede graficar en circular la distribución de votos de una encuesta vinculándose directamente a los resultados de respuesta de esa campaña — sin necesitar una fuente de datos, solo eligiendo la encuesta desde el selector — así el informe siempre refleja el conteo actual de la encuesta. Un resumen de suscripción podría usar un gráfico de dona para el "mix de planes" (Free/Starter/Pro/Business como porciones) con el centro mostrando el total de cuentas activas como un número estilo indicador clave dentro del propio anillo. Un resumen de soporte con una docena de categorías de tickets se apoya en el agrupamiento automático de "Otros" para mantener legible el gráfico, confiando en que la tabla de datos debajo siga listando cada categoría individual por conteo exacto.
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">Plan mix</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="320"
alt="Donut chart: Free 420 (52%), Starter 210 (26%), Pro 175 (22%)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">
<span aria-hidden="true" style="display:inline-block;width:10px;height:10px;background-color:#4f46e5"></span>
Free (52%)
</span>
</div>
<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">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Percent</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Free</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">420</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">52%</td>
</tr>
</table>
</div>
La leyenda y la tabla llevan ambas la misma etiqueta/valor/porcentaje exactos para cada porción — deliberadamente duplicados, ya que la leyenda es para un vistazo rápido y la tabla es la fuente precisa.