Barras radiales
Comparar niveles en formato circular.
Definición
Las barras radiales dibujan cada valor como un arco concéntrico que recorre parte de un círculo. Cada anillo es una categoría, y la fracción del círculo que cubre su arco dice su nivel. Se usa para un puñado de puntuaciones en la misma escala cuando el formato circular encaja con la lámina.
- Datos
- category · value
- Buena para
- Mostrar unos pocos niveles de la misma escala frente a su máximo.
- Evítala cuando
- Cuando hay que comparar barras entre sí con precisión: cada arco empieza en un radio distinto, así que arcos iguales no miden lo mismo.
- Se lee bien
- Entre 3 y 12 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é |
|---|---|---|
category · opcional | string | El anillo. Un solo alias, «skill»; si no casa, `findColumn` cae a la PRIMERA columna de texto. Sin ninguna, la pieza devuelve cero filas. |
value · opcional | number | La longitud del arco. Un solo alias, «score»; si no casa, cae a la primera columna numérica. |
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
¿Basta con comparar cada valor con el círculo completo?
Si hay que comparar categorías entre sí, unas barras horizontales comparten base y se leen sin engaño.
Sí: quédate con barras radiales
No: usa Gráfico de barras horizontales
¿Son pocas categorías?
Con muchas, un gráfico de piruleta ordenado las lee mejor que anillos cada vez más pequeños.
Sí: quédate con barras radiales
No: usa Gráfico de piruleta
¿Todas las categorías comparten la misma escala?
Si cada métrica tiene su propio objetivo y unidad, el anillo de progreso compara cada una consigo misma.
Sí: quédate con barras radiales
No: usa Anillo de progreso
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('radialbar');
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é los arcos exteriores parecen más largos?
Porque recorren un círculo mayor. Lo que se compara es la fracción del círculo que cubre cada arco, no su longitud en la lámina.
¿Qué columnas lee?
La primera columna de texto como nombre del anillo y la primera numérica como valor. Sin columna de texto no hay anillos.
¿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 «comparar cifras»
Análisis de accretion/dilutionefecto de una operación en el beneficio por acción
Gráfico de flechascambio con dirección entre dos momentos
Gráfico de barras verticalescomparar valores entre pocas categorías
Serie con banda de referenciatu serie frente al rango de sus pares
Comparativa con parestu resultado frente al de otras empresas
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición