Categorías

← View All Tools

Generador de Gráficos de Flujo

Generar gráficos de flujo suaves para visualizar el flujo de datos de series temporales, perfecto para mostrar cambios en la composición a lo largo del tiempo con formas orgánicas y fluidas

Datos de series temporales para el gráfico de flujo. Cada serie representa una capa fluida a lo largo del tiempo.

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

Colores personalizados para flujos (colores hex separados por comas). Anula el esquema de color si se proporciona.

Opacidad de las capas de flujo (0.1 a 1.0)

Suavidad de las curvas de flujo (0.1 a 1.0, más alto = más suave)

Color de fondo para el contenedor del gráfico

Color para las líneas de cuadrícula

Altura del gráfico en píxeles

Valor máximo para el eje Y (deje vacío para escala automática)

Valor mínimo para el eje Y

Etiqueta para el eje X (típicamente tiempo)

Etiqueta para el eje Y

Mostrar líneas de cuadrícula para mejor legibilidad

Mostrar valores dentro de las capas de flujo

Mostrar etiquetas de datos en puntos clave

Convertir valores a porcentajes mostrando contribución relativa a lo largo del tiempo

Mostrar una leyenda debajo del gráfico

Datos clave

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

Resumen

El Generador de Gráficos de Flujo permite crear visualizaciones orgánicas y fluidas para representar datos de series temporales, facilitando la comprensión de cómo cambia la composición de diferentes categorías a lo largo del tiempo.

Cuándo usarlo

  • •Para visualizar la evolución de la cuota de mercado de varios productos a lo largo de los meses.
  • •Para mostrar cambios en la composición de fuentes de tráfico web en un periodo determinado.
  • •Para representar el flujo de recursos o presupuestos entre diferentes departamentos durante un año fiscal.

Cómo funciona

  • •Introduce tus datos de series temporales en formato JSON, especificando las etiquetas de tiempo y las series de datos correspondientes.
  • •Personaliza la estética del gráfico ajustando la suavidad de las curvas, la opacidad de las capas y seleccionando un esquema de color profesional.
  • •Configura los ejes, etiquetas y opciones de visualización como la normalización al 100% para resaltar cambios relativos.
  • •Genera y exporta tu gráfico de flujo optimizado para presentaciones o informes de datos.

Casos de uso

Análisis de tendencias de mercado para comparar el crecimiento de competidores.
Visualización de la distribución de audiencias en plataformas de medios.
Seguimiento de la asignación de recursos en proyectos a largo plazo.

Ejemplos

1. Evolución de Tráfico Web

Analista de Marketing
Contexto
El equipo necesita presentar cómo ha cambiado la fuente de visitas (Desktop, Mobile, Tablet) durante el primer semestre del año.
Problema
Los gráficos de barras tradicionales no muestran claramente la transición fluida entre dispositivos.
Cómo usarlo
Ingresar los datos mensuales de cada dispositivo en el campo de datos y activar la opción de normalización al 100%.
Configuración de ejemplo
{"labels": ["Ene", "Feb", "Mar", "Abr", "May"], "series": [{"name": "Desktop", "data": [120, 135, 125, 140, 155]}, {"name": "Mobile", "data": [80, 95, 110, 125, 140]}, {"name": "Tablet", "data": [40, 45, 50, 48, 52]}]}
Resultado
Un gráfico de flujo suave que destaca el crecimiento dominante del tráfico móvil frente al escritorio.

Probar con muestras

data-visualization
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
keywords time,series,data
sample
Ejemplos Chart.js Library
Ejemplos completos de Chart.js incluyendo tipos de gráficos, opciones de personalización, animaciones y diseños responsivos
keywords graph,chart,data
sample
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
keywords time,data
sample
Server-Sent Events (SSE)
Ejemplos de Server-Sent Events para comunicación unidireccional en tiempo real de servidor a cliente, incluyendo actualizaciones en vivo, notificaciones y streaming de datos
keywords stream,time,data
sample

Hubs relacionados

Herramientas de Json para Generate
Explora 33 herramientas de json para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Design para Generate
Explora 19 herramientas de design para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Pdf para Generate
Explora 10 herramientas de pdf para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Audio para Generate
Explora 8 herramientas de audio para flujos de generate y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Qué formato de datos admite la herramienta?

La herramienta requiere un objeto JSON que contenga un array de etiquetas (labels) y un array de series, donde cada serie incluye un nombre y una lista de valores numéricos.

¿Puedo personalizar los colores de las capas?

Sí, puedes elegir entre esquemas de color predefinidos o ingresar tus propios códigos hexadecimales separados por comas.

¿Qué significa la opción 'Normalizar al 100%'?

Esta opción convierte los valores absolutos en porcentajes, permitiendo visualizar la contribución relativa de cada categoría al total en cada punto del tiempo.

¿Es posible ajustar la suavidad de las curvas?

Sí, puedes modificar el parámetro de suavidad de curva en una escala de 0.1 a 1.0 para obtener un aspecto más orgánico o más lineal.

¿Puedo exportar el gráfico generado?

El resultado se genera como un componente HTML interactivo que puedes integrar directamente en tus proyectos web o informes digitales.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/stream-graph

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
chartData textarea Sí Datos de series temporales para el gráfico de flujo. Cada serie representa una capa fluida a lo largo del tiempo.
chartTitle text No Título que se mostrará encima del gráfico
colorScheme select No -
streamColors text No Colores personalizados para flujos (colores hex separados por comas). Anula el esquema de color si se proporciona.
streamOpacity number No Opacidad de las capas de flujo (0.1 a 1.0)
curveSmoothness number No Suavidad de las curvas de flujo (0.1 a 1.0, más alto = más suave)
backgroundColor color No Color de fondo para el contenedor del gráfico
gridColor color No Color para las líneas de cuadrícula
chartHeight number No Altura del gráfico en píxeles
maxValue number No Valor máximo para el eje Y (deje vacío para escala automática)
minValue number No Valor mínimo para el eje Y
xAxisLabel text No Etiqueta para el eje X (típicamente tiempo)
yAxisLabel text No Etiqueta para el eje Y
showGrid checkbox No Mostrar líneas de cuadrícula para mejor legibilidad
showValues checkbox No Mostrar valores dentro de las capas de flujo
showDataLabels checkbox No Mostrar etiquetas de datos en puntos clave
normalizeData checkbox No Convertir valores a porcentajes mostrando contribución relativa a lo largo del tiempo
showLegend checkbox No Mostrar una leyenda debajo del gráfico

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-stream-graph": {
      "name": "stream-graph",
      "description": "Generar gráficos de flujo suaves para visualizar el flujo de datos de series temporales, perfecto para mostrar cambios en la composición a lo largo del tiempo con formas orgánicas y fluidas",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stream-graph",
      "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]