Indicador de aguja
Un valor dentro de un rango.
Definición
Un indicador de aguja sitúa un único valor sobre un recorrido en arco partido en zonas. Se lee en qué zona cae la aguja, no la cifra en sí. Se usa para un indicador suelto que se juzga contra umbrales: ocupación, satisfacción, cumplimiento.
- Datos
- value · high
- Buena para
- Decir en qué zona de un recorrido cae un único valor.
- Evítala cuando
- Cuando hay más de un valor o importa la distancia exacta a un objetivo.
- Se lee bien
- Entre 1 y 1 elementos; dibuja hasta 1
- 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é |
|---|---|---|
value · opcional | number | PRIMERA columna numérica de la ÚNICA fila: la aguja. Un spec con dos o más filas ya no dibuja la primera y calla — LANZA con las dos cifras (cuántas trae y cuántas se descartaban); sin ninguna columna numérica, lanza también en vez de poner la aguja en 0. |
high · opcional | number | SEGUNDA columna numérica: el máximo de la escala. Ausente vale 100, y eso sí es un defecto declarado: la escala 0–100 es la del ejemplo. |
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
¿Es un único indicador?
Si comparas varios valores, unas barras los ponen sobre el mismo eje.
Sí: quédate con indicador de aguja
No: usa Gráfico de barras verticales
¿Importa la zona en la que cae y no la diferencia exacta?
Si hay que leer cuánto falta para un objetivo, una barra bala lo mide sobre un eje recto.
Sí: quédate con indicador de aguja
No: usa Gráfico de bala
¿El valor se juzga contra umbrales?
Si el número se entiende solo, una tarjeta con la cifra lo dice sin arco.
Sí: quédate con indicador de aguja
No: usa Mosaico de cifras
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('gauge');
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
¿Qué escala usa?
De 0 al máximo que traigas en la segunda columna numérica. Si no lo traes, el máximo es 100.
¿Puedo poner varios valores?
No. Lee una sola fila; con dos o más se detiene y dice cuántas trae.
¿Por qué las zonas?
Porque un valor suelto no significa nada hasta que alguien decide dónde empieza «bien»: la aguja se lee contra esa partición.
¿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