Gráfico de rayos solares
Jerarquía en anillos concéntricos.
Definición
El gráfico de rayos solares dibuja una jerarquía en anillos concéntricos: el interior son los grupos y el exterior las partes de cada grupo, con un ángulo proporcional a su valor. Una parte nunca suma más que el sector que la contiene. Se usa para presupuestos, organizaciones o catálogos con categorías y subcategorías.
- Datos
- parent · label · value
- Buena para
- Enseñar cómo se reparte un total entre grupos y subgrupos.
- Evítala cuando
- Cuando hay que comparar con precisión partes de distintos sectores: los ángulos se comparan mal.
- Se lee bien
- Entre 3 y 40 elementos; dibuja hasta 1000
- 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é |
|---|---|---|
parent · opcional | string | El sector del anillo interior al que pertenece la hoja. Sin ella la jerarquía se aplana a un solo anillo. |
label | string | El nombre de la hoja, es decir el anillo exterior. OBLIGATORIA: `requireColumn` lanza con la columna que falta y la que más se le parece. |
value · opcional | number | El ángulo de la hoja. Si no hay ninguna columna numérica, cada hoja cuenta 1 y el sunburst pasa a contar en vez de medir. |
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
¿Hay más de un nivel en la jerarquía?
Si sólo hay un nivel de partes, un gráfico de anillo es más sencillo.
Sí: quédate con gráfico de rayos solares
No: usa Gráfico de anillo
¿Basta con comparar ángulos, sin leer tamaños precisos?
Si la comparación fina importa, el gráfico de carámbanos usa longitudes rectas.
Sí: quédate con gráfico de rayos solares
No: usa Gráfico de carámbanos
¿Importan las cifras, no sólo la estructura?
Si sólo quieres enseñar quién depende de quién, un organigrama lo dibuja sin medir.
Sí: quédate con gráfico de rayos solares
No: usa Organigrama
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('sunburst');
spec.data.rows = misFilas; // label
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Y si no tengo valores numéricos?
Cada hoja cuenta como una, y el gráfico pasa a contar elementos en vez de medir.
¿Cómo se indica la jerarquía?
Con una columna que dice a qué sector pertenece cada hoja. Sin ella todo queda en un solo anillo.
¿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