# Generador de Gráfico Escalonado Crear gráficos escalonados con visualización de datos estilo escalera, perfecto para mostrar cambios discretos a lo largo del tiempo > Página canónica: https://elysiatools.com/es/tools/step-chart-generator - **Categoría:** Data Visualization - **Palabras clave:** gráfico escalonado, gráfico escalera, datos discretos, serie temporal, cambios de precio, niveles de inventario ## Descripción general El Generador de Gráfico Escalonado permite transformar datos discretos en visualizaciones claras y precisas, ideales para representar cambios que ocurren en momentos específicos en lugar de transiciones continuas. ## Entradas - **Título del Gráfico** (text): Título que se mostrará encima del gráfico escalonado - **Puntos de Datos** (textarea): Puntos de datos como array JSON con propiedades x, y y etiqueta opcional - **Etiqueta del Eje X** (text): Etiqueta para el eje X - **Etiqueta del Eje Y** (text): Etiqueta para el eje Y - **Estilo de Escalón** (select): Seleccionar estilo de escalón - **Color de Línea** (color): Color de la línea escalonada - **Ancho de Línea** (number): Ancho de la línea escalonada en píxeles - **Color del Punto de Datos** (color): Color de los puntos de datos - **Tamaño del Punto de Datos** (number): Tamaño de los puntos de datos en píxeles - **Mostrar Puntos de Datos** (checkbox): Mostrar puntos de datos en la línea escalonada - **Mostrar Etiquetas de Datos** (checkbox): Mostrar etiquetas de valor en los puntos de datos - **Mostrar Cuadrícula** (checkbox): Mostrar líneas de cuadrícula de fondo - **Rellenar Área Bajo Línea** (checkbox): Rellenar el área bajo la línea escalonada con color - **Color de Relleno de Área** (color): Color para relleno de área (si está habilitado) - **Color de Cuadrícula** (color): Color de las líneas de cuadrícula - **Color de Fondo** (color): Color de fondo del gráfico - **Ancho del Gráfico** (number): Ancho del gráfico en píxeles - **Altura del Gráfico** (number): Altura del gráfico en píxeles - **Formato de Etiqueta de Datos** (select): Seleccionar formato - **Tamaño de Fuente** (number): Tamaño de fuente para etiquetas y texto - **Tamaño de Fuente del Título** (number): Tamaño de fuente para el título del gráfico - **Familia de Fuente** (text): Familia de fuente para elementos de texto - **Habilitar Animación** (checkbox): Animar el gráfico cuando se carga - **Duración de Animación** (number): Duración de la animación en milisegundos ## Cuándo usarlo - Para visualizar cambios de precios o tarifas que se mantienen constantes durante periodos definidos. - Para representar niveles de inventario o stock que fluctúan de forma abrupta tras cada transacción. - Para mostrar estados de sistemas o procesos que cambian de manera discreta a lo largo de una serie temporal. ## Cómo funciona - Introduce tus puntos de datos en formato JSON, especificando los valores 'x' e 'y' para cada evento. - Selecciona el estilo de escalón deseado (antes, después o medio) para definir cómo se conectan tus puntos. - Personaliza la apariencia del gráfico ajustando colores, grosores de línea y opciones de visualización como la cuadrícula o el relleno del área. - Genera el gráfico y obtén una representación visual lista para usar en tus informes o presentaciones. ## Casos de uso - Seguimiento histórico de precios de productos en un mercado volátil. - Monitoreo de niveles de existencias en almacenes tras entradas y salidas de mercancía. - Visualización de cambios en las tasas de interés o políticas de suscripción a lo largo del tiempo. ## Preguntas frecuentes ### ¿Qué formato de datos admite la herramienta? La herramienta requiere un array JSON con objetos que contengan al menos las coordenadas 'x' e 'y' para cada punto de datos. ### ¿Cuál es la diferencia entre los estilos de escalón? El estilo 'antes' traza la línea horizontal antes de subir, 'después' sube primero y luego traza la horizontal, y 'medio' centra el escalón entre los puntos. ### ¿Puedo rellenar el área bajo la línea? Sí, puedes habilitar la opción 'Rellenar Área Bajo Línea' y seleccionar el color de relleno que prefieras en la configuración. ### ¿Es posible ajustar el tamaño del gráfico generado? Sí, puedes definir el ancho y la altura en píxeles dentro de las opciones de configuración para adaptar el gráfico a tu espacio de trabajo. ### ¿Se pueden mostrar los valores exactos en el gráfico? Sí, activando la opción 'Mostrar Etiquetas de Datos' y seleccionando el formato numérico, de moneda o porcentaje adecuado. ## Herramientas relacionadas - [Generador de Gráfico de Barras de Comparación](https://elysiatools.com/es/tools/comparison-bar-chart): Generar gráficos de barras espalda con espalda para comparación de valores positivos y negativos, perfecto para contrastar conjuntos de datos - [Generador de Gráfico de Dona](https://elysiatools.com/es/tools/donut-chart-generator): Generar gráficos de dona personalizables desde datos con varias opciones de estilo, perfecto para mostrar proporciones con espacio central - [Generador de Gráfico de Embudo](https://elysiatools.com/es/tools/funnel-chart-generator): Generar gráficos de embudo personalizables desde datos, perfecto para mostrar tasas de conversión, tuberías de ventas y flujos de procesos - [Generador de Gráfico de Gantt](https://elysiatools.com/es/tools/gantt-chart-generator): Crear gráficos de Gantt profesionales con líneas de tiempo de tareas, dependencias, seguimiento de progreso y marcadores de hitos - [Generador de Gráficos de Hitos](https://elysiatools.com/es/tools/milestone-chart): Generar gráficos de hitos del proyecto con nodos de línea de tiempo y puntos clave de logro - [Generador de Gráfico Circular Multinivel](https://elysiatools.com/es/tools/multi-level-pie-chart-generator): Crear gráficos circulares multinivel concéntricos con relaciones jerárquicas y funcionalidad de exploración interactiva - [Generador de Pictogramas](https://elysiatools.com/es/tools/pictograph-generator): Crear pictogramas usando iconos/símbolos para representar cantidades con iconos personalizados, colores y diseños - [Generador de Barras de Progreso](https://elysiatools.com/es/tools/progress-bar-generator): Generar barras de progreso personalizables desde datos, perfecto para mostrar estado de finalización, rankings o valores comparativos ## Ejemplos - [Muestras Avanzadas de Grafana](https://elysiatools.com/es/samples/grafana-samples): Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins - [Muestras de Comunicación en Tiempo Real WebRTC](https://elysiatools.com/es/samples/webrtc-samples): Muestras completas de WebRTC para comunicación de audio/video P2P, canales de datos, compartir pantalla y servidor de señalización - [Ejemplos de Códigos QR](https://elysiatools.com/es/samples/qrcode-samples): Imágenes de códigos QR de muestra para probar herramientas de lectura y generación de códigos QR - [Muestras de Trazado Distribuido](https://elysiatools.com/es/samples/distributed-tracing-samples): Ejemplos completos de trazado distribuido usando Jaeger, OpenTelemetry y herramientas de observabilidad modernas