Anillos concéntricos
Reparto en varios niveles.
Definición
Unos anillos concéntricos desglosan un mismo total en varios niveles: el anillo interior es el reparto principal y cada anillo exterior detalla los sectores del de dentro. Se lee de dentro afuera, con el porcentaje del anillo central en el centro. Sirve para enseñar un reparto y de qué está hecha cada parte.
- Datos
- label · ring · parent · value
- Buena para
- Enseñar un reparto y su desglose como un solo total.
- Evítala cuando
- Cuando hay que comparar sectores de tamaño parecido: los ángulos se distinguen peor que las longitudes.
- Se lee bien
- Entre 2 y 12 elementos; dibuja hasta 5000
- 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é |
|---|---|---|
label · opcional | string | Nombre del sector. Sin ella la pieza devuelve cero filas. |
ring · opcional | number | A QUÉ ANILLO va la fila (0 = el de dentro). Es lo que hace que esto sea un donut anidado y no tres donuts: las filas se agrupan por este número. Sin ella la pieza devuelve cero filas. |
parent · opcional | string | El sector del anillo interior del que cuelga éste. Opcional: sin ella los sectores del anillo se ordenan pero no se alinean con su padre. |
value · opcional | number | El ÁNGULO del sector dentro de su anillo. El porcentaje del centro sale del anillo 0, no de la suma de todos. |
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
¿Bastan dos o tres niveles?
Si la jerarquía es más profunda, los rayos solares la llevan hasta el final.
Sí: quédate con anillos concéntricos
No: usa Gráfico de rayos solares
¿Basta con ver el reparto a ojo?
Si hay que comparar sectores parecidos, las longitudes de un gráfico de carámbanos se leen mejor.
Sí: quédate con anillos concéntricos
No: usa Gráfico de carámbanos
¿Hay un desglose que enseñar?
Si es un solo nivel, un anillo simple dice lo mismo con menos ruido.
Sí: quédate con anillos concéntricos
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('nesteddonut');
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
¿Cómo indico en qué anillo va cada fila?
Con la columna «ring»: 0 es el de dentro. Sin ella, ni sin nombres de sector, la pieza no dibuja.
¿De dónde sale el porcentaje del centro?
Del anillo 0, no de la suma de todos los anillos.
¿Para qué sirve la columna «parent»?
Alinea cada sector con el del anillo interior del que cuelga. Sin ella, los sectores se ordenan pero no se alinean.
¿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