Categorías

← View All Tools

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

Puntos de datos como array JSON con propiedades x, y y etiqueta opcional

Título que se mostrará encima del gráfico escalonado

Etiqueta para el eje X

Etiqueta para el eje Y

Color de la línea escalonada

Ancho de la línea escalonada en píxeles

Color de los puntos de datos

Tamaño de los puntos de datos en píxeles

Mostrar puntos de datos en la línea escalonada

Mostrar etiquetas de valor en los puntos de datos

Mostrar líneas de cuadrícula de fondo

Rellenar el área bajo la línea escalonada con color

Color para relleno de área (si está habilitado)

Color de las líneas de cuadrícula

Color de fondo del gráfico

Ancho del gráfico en píxeles

Altura del gráfico en píxeles

Tamaño de fuente para etiquetas y texto

Tamaño de fuente para el título del gráfico

Familia de fuente para elementos de texto

Animar el gráfico cuando se carga

Duración de la animación en milisegundos

Datos clave

Categoría
Data Visualization
Tipos de entrada
text, textarea, select, color, number, checkbox
Tipo de salida
html
Cobertura de muestras
4
API disponible
Yes

Resumen

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.

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.

Ejemplos

1. Evolución de Precios de Suscripción

Analista de Producto
Contexto
El equipo necesita presentar cómo han cambiado los precios de los planes de suscripción durante los últimos 12 meses.
Problema
Un gráfico de líneas tradicional suaviza los cambios, ocultando los periodos exactos de vigencia de cada tarifa.
Cómo usarlo
Ingresar los cambios de precio como puntos de datos y seleccionar el estilo 'step-after' para mostrar la duración de cada tarifa.
Configuración de ejemplo
[{"x": "Ene", "y": 10}, {"x": "Mar", "y": 15}, {"x": "Jun", "y": 20}]
Resultado
Un gráfico claro que muestra visualmente los escalones de precio, facilitando la comprensión de cuándo se aplicaron los ajustes.

Probar con muestras

json, text
Muestras de Comunicación en Tiempo Real WebRTC
Muestras completas de WebRTC para comunicación de audio/video P2P, canales de datos, compartir pantalla y servidor de señalización
preferred input family json
json
Muestras PDF
Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10
preferred input family json
json
Muestras Avanzadas de Grafana
Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins
preferred input family json
json
Muestras JWT
Ejemplos completos de JWT desde la estructura básica de tokens hasta implementaciones de seguridad avanzadas
preferred input family json
json

Hubs relacionados

Herramientas de Json para Generate
Explora 33 herramientas de json para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Json para Convert
Explora 100 herramientas de json para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Text para Convert
Explora 80 herramientas de text para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Json
Explora 43 herramientas de json para flujos de utility y encuentra utilidades cercanas con rapidez.

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.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/step-chart-generator

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
chartTitle text No Título que se mostrará encima del gráfico escalonado
dataPoints textarea Sí Puntos de datos como array JSON con propiedades x, y y etiqueta opcional
xAxisLabel text No Etiqueta para el eje X
yAxisLabel text No Etiqueta para el eje Y
stepStyle select Sí -
lineColor color No Color de la línea escalonada
lineWidth number No Ancho de la línea escalonada en píxeles
pointColor color No Color de los puntos de datos
pointSize number No Tamaño de los puntos de datos en píxeles
showDataPoints checkbox No Mostrar puntos de datos en la línea escalonada
showLabels checkbox No Mostrar etiquetas de valor en los puntos de datos
showGrid checkbox No Mostrar líneas de cuadrícula de fondo
fillArea checkbox No Rellenar el área bajo la línea escalonada con color
areaColor color No Color para relleno de área (si está habilitado)
gridColor color No Color de las líneas de cuadrícula
backgroundColor color No Color de fondo del gráfico
chartWidth number No Ancho del gráfico en píxeles
chartHeight number No Altura del gráfico en píxeles
dataLabelFormat select No -
fontSize number No Tamaño de fuente para etiquetas y texto
titleSize number No Tamaño de fuente para el título del gráfico
fontFamily text No Familia de fuente para elementos de texto
animationEnabled checkbox No Animar el gráfico cuando se carga
animationDuration number No Duración de la animación en milisegundos

Formato de respuesta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-step-chart-generator": {
      "name": "step-chart-generator",
      "description": "Crear gráficos escalonados con visualización de datos estilo escalera, perfecto para mostrar cambios discretos a lo largo del tiempo",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=step-chart-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]