Gráfico circular
Partes de un todo con pocas categorías.
Definición
El gráfico circular reparte un círculo en porciones cuyo ángulo es proporcional a la parte de cada categoría sobre el total. Solo tiene sentido si las porciones suman el todo. Se usa para enseñar cuotas con pocas categorías, sobre todo cuando una domina o dos se reparten casi a medias.
- Datos
- category · value
- Buena para
- Mostrar qué parte del total se lleva cada una de unas pocas categorías.
- Evítala cuando
- Cuando hay más de seis categorías, valores negativos o varios repartos que comparar: los ángulos se comparan mal.
- Se lee bien
- Entre 2 y 6 elementos; dibuja hasta 2000
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
category · opcional | string | El nombre de la porción. Sin ella la pieza devuelve cero filas. |
value · opcional | number | El ÁNGULO de la porción. Un solo alias, «amount»; si ninguno casa, `findColumn` cae a la primera columna numérica. Su propia exportación escribe «Amount ($)» con el número crudo (el formato es cosa del render), y el nombre casa por `nombreSinUnidad`. Una celda con texto que NO es un número («N/A») no vale 0: la pieza falla diciendo cuántas celdas y cuáles. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Son pocas categorías que suman un todo?
Con muchas categorías o porciones parecidas, unas barras horizontales ordenadas se leen mejor.
Sí: quédate con gráfico circular
No: usa Gráfico de barras horizontales
¿Es un único reparto?
Si hay que comparar el mismo reparto entre varios grupos, unas barras apiladas los alinean.
Sí: quédate con gráfico circular
No: usa Barras apiladas
¿Te basta el círculo sin una cifra en el centro?
Si quieres poner el total o la cifra clave en el centro, el anillo deja ese hueco.
Sí: quédate con gráfico circular
No: usa Gráfico de anillo
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('pie');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Por qué no admite valores negativos?
Porque una porción negativa no forma parte de ningún todo: si las partes no suman el total, la figura miente.
¿Puedo comparar dos tartas?
No: la pieza no admite tartas comparadas. Para comparar repartos, usa barras apiladas.
¿Cuántas categorías admite?
Se lee bien entre 2 y 6.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «partes de un todo»
Anidamiento conceptualconceptos contenidos unos dentro de otros- Gráfico de anilloreparto de un total en pocas partes
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles
Árbol con sangríasjerarquía detallada con su valor