Diagrama de flujo acumulado
Trabajo en cada estado a lo largo del tiempo.
Definición
Un diagrama de flujo acumulado apila, periodo a periodo, cuánto trabajo hay en cada estado de un proceso. El grosor vertical de cada banda es el trabajo parado en ese estado y la pendiente del techo de lo entregado es el ritmo de entrega. Se usa en equipos ágiles y operaciones para localizar cuellos de botella.
- Datos
- x · value
- Buena para
- Ver dónde se acumula el trabajo y si el ritmo de entrega acompaña al de entrada.
- Evítala cuando
- Cuando quieres seguir cada tarea por separado: la pieza sólo enseña cuánto hay en cada estado.
- Se lee bien
- Entre 10 y 200 elementos; dibuja hasta 500
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x · opcional | string | El eje temporal, como rótulo (no se parsea a fecha). Si no aparece, la pieza numera los periodos «Period 1, 2, 3…». |
value · opcional | number | Por POSICIÓN, no por nombre: cada columna numérica llena una banda del apilado, en el orden en que llegan y en el orden de los estados declarados por la pieza. Las columnas que sobran no se dibujan. |
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
¿Las bandas son estados de un flujo de trabajo?
Si son partes de un total que no avanzan de una a otra, usa áreas apiladas.
Sí: quédate con diagrama de flujo acumulado
No: usa Áreas apiladas
¿Te importa el trabajo parado en cada estado?
Si basta con lo hecho frente al alcance total, el burnup es más sencillo.
Sí: quédate con diagrama de flujo acumulado
No: usa Burnup
¿Te interesa el flujo continuo y no lo entregado en cada iteración?
Si mides por iteraciones cerradas, usa la velocidad del equipo.
Sí: quédate con diagrama de flujo acumulado
No: usa Velocidad del equipo
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('cumulativeflow');
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é significa una banda que se ensancha?
Que entra más trabajo en ese estado del que sale: se está acumulando ahí.
¿Cómo asigna las columnas a las bandas?
Por posición, no por nombre: cada columna numérica llena una banda, en el orden en que llega y en el orden de los estados que fija la pieza. Las columnas que sobran no se dibujan.
¿El eje temporal tiene que ser una fecha?
No: se usa como rótulo, sin interpretarlo como fecha. Si no hay columna de tiempo, la pieza numera los periodos.
¿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 «cómo cambia en el tiempo»
- Áreas apiladascómo cambia la composición de un total
Gráfico de áreasuna medida en el tiempo con el volumen destacado
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Barras y línea combinadasuna cifra absoluta junto a su tasa
Bandas de Bollingerprecio frente a su rango habitual de variación
Gráfico con selector de rangoexplorar un tramo de una serie larga