Indicador de relleno de forma

Cuánto de un objeto está ocupado.

Definición

El indicador de relleno de forma llena una silueta —una persona, un edificio, un depósito, una gota— hasta la fracción comprometida de cada recurso. Así se comparan recursos que se miden en unidades distintas, como camas, plazas o metros cúbicos, por su porcentaje de uso. El contorno entero vale el 100 % y el relleno se corta por área, no por altura.

Editar con tus datos SVG Spec JSON

Las habitaciones ya están vendidas; la plantilla, a medias

Datos: category · value · capacidad · silueta
Buena para: Comparar la ocupación de recursos con unidades distintas, con la figura del propio recurso.
Evítala cuando: Cuando importa el tamaño de cada recurso: dos siluetas al mismo porcentaje no dicen cuál de los dos es mayor.
Se lee bien: Entre 1 y 12 elementos; dibuja hasta 24
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`category`	string	El recurso que se llena. Una fila por recurso; su nombre se escribe bajo la silueta.
`value`	number	La parte comprometida. Con columna de capacidad se lee en las unidades del recurso; sin ella, como porcentaje de 0 a 100 — y valores todos entre 0 y 1 fallan, porque «0,92» puede ser el 92 % o el 0,92 % y las dos láminas son opuestas.
`capacidad` · opcional	number	El todo contra el que se lee el relleno: el 100 % que representa la silueta entera. Ausente o vacía, el valor se lee como porcentaje. Cero o negativa falla nombrando la fila.
`silueta` · opcional	string	La figura con la que se dibuja la fila: persona, edificio, coche, gota, botella, deposito, arbol — o una propia declarada en `shapeFill.siluetasExtra`. Un nombre que no exista FALLA con el catálogo: sustituirlo por otro publicaría un sustantivo que nadie escribió.

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.

Móvil · 468 × 630 px

Escritorio · 1008 × 720 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Los recursos se miden en unidades distintas?

Si todos comparten unidad, unas barras horizontales comparan las cantidades directamente.

Sí: quédate con indicador de relleno de forma

No: usa Gráfico de barras horizontales

¿Ayuda que la marca diga qué recurso es?

Si la figura no aporta, un anillo de progreso por recurso enseña la fracción con menos ruido.

Sí: quédate con indicador de relleno de forma

No: usa Anillo de progreso

¿Interesa la fracción usada, no las unidades sueltas?

Si hay que contar personas o plazas una a una, el pictograma las dibuja.

Sí: quédate con indicador de relleno de forma

No: usa Pictograma

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('shapefillgauge');
spec.data.rows = misFilas; // category, value
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué siluetas hay?

Persona, edificio, coche, gota, botella, depósito y árbol, además de las propias que se declaren. Un nombre que no existe hace que la pieza se niegue a dibujar en vez de sustituirlo.

¿Escribo el valor en porcentaje o en unidades?

Con columna de capacidad, en las unidades del recurso; sin ella, como porcentaje de 0 a 100. Si todos los valores están entre 0 y 1 se rechazan, porque 0,92 puede ser el 92 % o el 0,92 %.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

El motor la recompone a 420 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»

Guía para elegir: partes de un todo →