Anillo de progreso
Avance hacia un objetivo.
Definición
El anillo de progreso dibuja un arco que se completa según la fracción del objetivo que lleva cubierta una métrica. Cada anillo se compara consigo mismo, así que pueden convivir métricas en unidades distintas. Se usa en cuadros de mando para seguir el avance hacia metas.
- Datos
- label · value · target
- Buena para
- Mostrar qué parte de su objetivo lleva cubierta cada métrica.
- Evítala cuando
- Cuando hay muchas métricas o el lector tiene que reconocerlas por su nombre: en la lámina cada anillo se identifica sólo por su color.
- Se lee bien
- Entre 1 y 5 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é |
|---|---|---|
label · opcional | string | El nombre de la métrica. NO se dibuja: sólo viaja al tooltip, así que en la lámina un anillo se identifica sólo por su color. |
value · opcional | number | POSICIONAL: la 1.ª columna numérica. Lo conseguido. |
target · opcional | number | POSICIONAL: la 2.ª columna numérica. El objetivo, el denominador del porcentaje. Con menos de dos columnas numéricas la pieza devuelve cero filas. |
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
¿Te basta el porcentaje del objetivo?
Si además hay que ver lo conseguido frente a tramos de bueno, regular y malo, el gráfico de bala lo cuenta en una barra.
Sí: quédate con anillo de progreso
No: usa Gráfico de bala
¿Cuenta más el avance que la cifra?
Si lo que hay que leer es el número en sí, un mosaico de cifras lo escribe sin rodeos.
Sí: quédate con anillo de progreso
No: usa Mosaico de cifras
¿Son cinco métricas o menos?
Con más métricas, unas barras horizontales con su nombre se comparan mejor que una fila de anillos.
Sí: quédate con anillo de progreso
No: usa Gráfico de barras horizontales
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('progress');
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 identifico cada anillo?
Por su color: el nombre de la métrica no se escribe en la lámina. Si hace falta nombrarlas, acompáñalo de texto.
¿Qué columnas necesita?
Dos numéricas: la primera es lo conseguido y la segunda el objetivo. Con menos de dos 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