Categorias

← View All Tools

Gerador de Gráfico de Fluxo

Gerar gráficos de fluxo suaves para visualizar o fluxo de dados de séries temporais, perfeito para mostrar mudanças na composição ao longo do tempo com formas orgânicas e fluidas

Dados de séries temporais para o gráfico de fluxo. Cada série representa uma camada fluida ao longo do tempo.

Título que será exibido acima do gráfico

Cores personalizadas para fluxos (cores hex separadas por vírgula). Substitui o esquema de cores se fornecido.

Opacidade das camadas de fluxo (0.1 a 1.0)

Suavidade das curvas de fluxo (0.1 a 1.0, mais alto = mais suave)

Cor de fundo para o contêiner do gráfico

Cor para as linhas da grade

Altura do gráfico em pixels

Valor máximo para o eixo Y (deixe vazio para escala automática)

Valor mínimo para o eixo Y

Rótulo para o eixo X (tipicamente tempo)

Rótulo para o eixo Y

Mostrar linhas da grade para melhor legibilidade

Mostrar valores dentro das camadas de fluxo

Mostrar rótulos de dados em pontos-chave

Converter valores em porcentagens mostrando contribuição relativa ao longo do tempo

Mostrar uma legenda abaixo do gráfico

Fatos principais

Categoria
Data Visualization
Tipos de entrada
textarea, text, select, number, color, checkbox
Tipo de saída
html
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Gerador de Gráfico de Fluxo permite criar visualizações elegantes e orgânicas para dados de séries temporais, facilitando a análise de mudanças na composição de fluxos de dados ao longo do tempo com curvas suaves e fluidas.

Quando usar

  • •Para visualizar a evolução da participação de mercado de diferentes produtos ao longo de meses ou anos.
  • •Para comparar o volume de tráfego de diferentes fontes (ex: Mobile, Desktop, Tablet) em um período específico.
  • •Para apresentar mudanças na distribuição de recursos ou orçamentos de forma visualmente impactante e intuitiva.

Como funciona

  • •Insira seus dados de séries temporais no formato JSON, definindo os rótulos de tempo e as séries de dados correspondentes.
  • •Personalize a aparência do gráfico ajustando a suavidade das curvas, a opacidade das camadas e o esquema de cores.
  • •Configure as opções de eixos, legendas e grade para garantir que a visualização seja clara e profissional.
  • •Gere o gráfico final em formato HTML, pronto para ser incorporado em relatórios ou apresentações.

Casos de uso

Análise de tendências de consumo de mídia em diferentes plataformas.
Monitoramento da alocação de tempo em projetos de desenvolvimento de software.
Visualização da variação de fontes de receita de uma empresa ao longo de vários trimestres.

Exemplos

1. Distribuição de Tráfego Web

Analista de Marketing
Contexto
O analista precisa apresentar como o tráfego do site mudou entre Desktop, Mobile e Tablet ao longo do primeiro semestre.
Problema
Gráficos de barras tradicionais não transmitem bem a fluidez da mudança de comportamento do usuário.
Como usar
Insira os dados mensais de tráfego, selecione o esquema de cores 'Azuis Oceânicos' e ajuste a opacidade para 0.6.
Configuração de exemplo
{"labels": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun"], "series": [{"name": "Desktop", "data": [150, 140, 130, 120, 110, 100]}, {"name": "Mobile", "data": [80, 90, 110, 130, 150, 170]}, {"name": "Tablet", "data": [40, 42, 45, 43, 48, 50]}]}
Resultado
Um gráfico de fluxo elegante que mostra claramente a migração do tráfego de Desktop para Mobile ao longo dos meses.

Testar com amostras

data-visualization
Exemplos Avançados de Aplicação Grafana
Exemplos compreensivos de Grafana cobrindo design avançado de dashboards, configuração de alertas, integração de fontes de dados e desenvolvimento de plugins
keywords time,series,data
sample
Exemplos Chart.js Library
Exemplos abrangentes de Chart.js incluindo tipos de gráficos, opções de personalização, animações e designs responsivos
keywords graph,chart,data
sample
Exemplos de Comunicação em Tempo Real WebRTC
Exemplos completos WebRTC para comunicação áudio/vídeo P2P, canais de dados, compartilhamento de tela e servidor de sinalização
keywords time,data
sample
Server-Sent Events (SSE)
Exemplos de Server-Sent Events para comunicação unidirecional em tempo real do servidor para o cliente, incluindo atualizações ao vivo, notificações e streaming de dados
keywords stream,time,data
sample

Hubs relacionados

Ferramentas de Json para Generate
Explore 33 ferramentas de json para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Design para Generate
Explore 19 ferramentas de design para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Pdf para Generate
Explore 10 ferramentas de pdf para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Audio para Generate
Explore 8 ferramentas de audio para fluxos de generate e encontre utilitários próximos com rapidez.

FAQ

O que é um gráfico de fluxo?

É uma variação do gráfico de área empilhada onde as camadas são centralizadas em um eixo horizontal, criando formas orgânicas e fluidas que facilitam a visualização de tendências.

Qual formato de dados é necessário?

O sistema aceita um objeto JSON contendo uma lista de rótulos (labels) para o eixo X e uma lista de séries (series), cada uma com um nome e um array de valores numéricos.

Posso personalizar as cores?

Sim, você pode escolher entre esquemas de cores predefinidos ou inserir códigos hexadecimais personalizados separados por vírgula.

É possível normalizar os dados?

Sim, ao ativar a opção 'Normalizar para 100%', o gráfico converterá os valores em porcentagens, focando na contribuição relativa de cada série em vez dos valores absolutos.

Como posso ajustar a fluidez das curvas?

Utilize o campo 'Suavidade da Curva' com valores entre 0.1 e 1.0 para controlar o quão arredondadas serão as transições entre os pontos de dados.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/stream-graph

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
chartData textarea Sim Dados de séries temporais para o gráfico de fluxo. Cada série representa uma camada fluida ao longo do tempo.
chartTitle text Não Título que será exibido acima do gráfico
colorScheme select Não -
streamColors text Não Cores personalizadas para fluxos (cores hex separadas por vírgula). Substitui o esquema de cores se fornecido.
streamOpacity number Não Opacidade das camadas de fluxo (0.1 a 1.0)
curveSmoothness number Não Suavidade das curvas de fluxo (0.1 a 1.0, mais alto = mais suave)
backgroundColor color Não Cor de fundo para o contêiner do gráfico
gridColor color Não Cor para as linhas da grade
chartHeight number Não Altura do gráfico em pixels
maxValue number Não Valor máximo para o eixo Y (deixe vazio para escala automática)
minValue number Não Valor mínimo para o eixo Y
xAxisLabel text Não Rótulo para o eixo X (tipicamente tempo)
yAxisLabel text Não Rótulo para o eixo Y
showGrid checkbox Não Mostrar linhas da grade para melhor legibilidade
showValues checkbox Não Mostrar valores dentro das camadas de fluxo
showDataLabels checkbox Não Mostrar rótulos de dados em pontos-chave
normalizeData checkbox Não Converter valores em porcentagens mostrando contribuição relativa ao longo do tempo
showLegend checkbox Não Mostrar uma legenda abaixo do gráfico

Formato de resposta

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

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-stream-graph": {
      "name": "stream-graph",
      "description": "Gerar gráficos de fluxo suaves para visualizar o fluxo de dados de séries temporais, perfeito para mostrar mudanças na composição ao longo do tempo com formas orgânicas e fluidas",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stream-graph",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]