Categorias

← View All Tools

Gerador de Gráfico de Degraus

Criar gráficos de degraus com visualização de dados estilo escada, perfeito para mostrar mudanças discretas ao longo do tempo

Pontos de dados como array JSON com propriedades x, y e rótulo opcional

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

Rótulo para o eixo X

Rótulo para o eixo Y

Cor da linha de degraus

Largura da linha de degraus em pixels

Cor dos pontos de dados

Tamanho dos pontos de dados em pixels

Mostrar pontos de dados na linha de degraus

Mostrar rótulos de valor nos pontos de dados

Mostrar linhas de grade de fundo

Preencher a área abaixo da linha de degraus com cor

Cor para preenchimento de área (se habilitado)

Cor das linhas de grade

Cor de fundo do gráfico

Largura do gráfico em pixels

Altura do gráfico em pixels

Tamanho da fonte para rótulos e texto

Tamanho da fonte para o título do gráfico

Família da fonte para elementos de texto

Animar o gráfico quando carregar

Duração da animação em milissegundos

Fatos principais

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

Visão geral

O Gerador de Gráfico de Degraus permite criar visualizações precisas de dados discretos que mudam em intervalos específicos, ideal para representar séries temporais onde os valores permanecem constantes entre eventos.

Quando usar

  • •Para visualizar mudanças de preços de produtos ao longo de um período.
  • •Para monitorar níveis de estoque que sofrem alterações pontuais.
  • •Para exibir taxas de juros ou mudanças de políticas que se mantêm estáveis entre datas.

Como funciona

  • •Insira seus dados no formato JSON, definindo os valores de x (eixo horizontal) e y (eixo vertical).
  • •Escolha o estilo do degrau (antes, depois ou meio) para determinar como a transição entre os pontos é desenhada.
  • •Personalize a aparência do gráfico, incluindo cores da linha, espessura, preenchimento da área e rótulos.
  • •Gere o gráfico instantaneamente e ajuste as configurações de animação ou grade conforme necessário.

Casos de uso

Acompanhamento de histórico de preços de ações ou produtos.
Visualização de mudanças em níveis de inventário ou capacidade de armazenamento.
Representação de cronogramas de projetos com marcos de entrega discretos.

Exemplos

1. Histórico de Preços de Assinatura

Analista de Negócios
Contexto
O analista precisa apresentar como o preço de um serviço de streaming mudou ao longo de 4 anos para uma reunião de diretoria.
Problema
Gráficos de linha comuns sugerem uma mudança gradual, o que é incorreto para reajustes de preço pontuais.
Como usar
Inserir os dados de data e valor no JSON e selecionar o estilo 'step-after' para mostrar o preço vigente após cada reajuste.
Configuração de exemplo
[{"x": "2021", "y": 29.90}, {"x": "2022", "y": 34.90}, {"x": "2023", "y": 39.90}, {"x": "2024", "y": 44.90}]
Resultado
Um gráfico claro que mostra degraus precisos, evidenciando exatamente quando e quanto o preço aumentou.

2. Monitoramento de Estoque

Gerente de Logística
Contexto
O gerente controla o nível de estoque de um componente crítico que é reposto em lotes grandes.
Problema
Visualizar a queda gradual do estoque não reflete a realidade de consumo diário constante.
Como usar
Configurar os pontos de dados com o estilo 'step-before' e habilitar o preenchimento da área para destacar o volume disponível.
Configuração de exemplo
{"stepStyle": "step-before", "fillArea": true, "lineColor": "#10b981"}
Resultado
Visualização em escada que destaca os momentos de reposição e o consumo estável entre eles.

Testar com amostras

json, text
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
preferred input family json
json
Exemplos PDF
Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10
preferred input family json
json
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
preferred input family json
json
Exemplos JWT
Exemplos completos de JWT da estrutura básica de tokens às implementações de segurança avançadas
preferred input family json
json

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 Json para Convert
Explore 100 ferramentas de json para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Text para Convert
Explore 80 ferramentas de text para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Json
Explore 43 ferramentas de json para fluxos de utility e encontre utilitários próximos com rapidez.

FAQ

O que é um gráfico de degraus?

É um tipo de gráfico de linha onde os valores mudam abruptamente em intervalos, criando um efeito visual de escada em vez de linhas diagonais.

Quais formatos de dados são aceitos?

A ferramenta aceita um array JSON contendo objetos com propriedades 'x' e 'y' para definir os pontos de dados.

Posso personalizar as cores?

Sim, você pode definir cores específicas para a linha, os pontos de dados, a área preenchida e até mesmo para as linhas de grade.

Como funcionam os estilos de degrau?

O estilo 'Degrau Antes' desenha a linha horizontal antes da vertical, enquanto 'Degrau Depois' inverte essa ordem, e 'Degrau Meio' centraliza a transição.

É possível animar o gráfico?

Sim, você pode habilitar a animação e definir a duração em milissegundos para um efeito de carregamento dinâmico.

Documentação da API

Ponto final da solicitação

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

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
chartTitle text Não Título que será exibido acima do gráfico de degraus
dataPoints textarea Sim Pontos de dados como array JSON com propriedades x, y e rótulo opcional
xAxisLabel text Não Rótulo para o eixo X
yAxisLabel text Não Rótulo para o eixo Y
stepStyle select Sim -
lineColor color Não Cor da linha de degraus
lineWidth number Não Largura da linha de degraus em pixels
pointColor color Não Cor dos pontos de dados
pointSize number Não Tamanho dos pontos de dados em pixels
showDataPoints checkbox Não Mostrar pontos de dados na linha de degraus
showLabels checkbox Não Mostrar rótulos de valor nos pontos de dados
showGrid checkbox Não Mostrar linhas de grade de fundo
fillArea checkbox Não Preencher a área abaixo da linha de degraus com cor
areaColor color Não Cor para preenchimento de área (se habilitado)
gridColor color Não Cor das linhas de grade
backgroundColor color Não Cor de fundo do gráfico
chartWidth number Não Largura do gráfico em pixels
chartHeight number Não Altura do gráfico em pixels
dataLabelFormat select Não -
fontSize number Não Tamanho da fonte para rótulos e texto
titleSize number Não Tamanho da fonte para o título do gráfico
fontFamily text Não Família da fonte para elementos de texto
animationEnabled checkbox Não Animar o gráfico quando carregar
animationDuration number Não Duração da animação em milissegundos

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-step-chart-generator": {
      "name": "step-chart-generator",
      "description": "Criar gráficos de degraus com visualização de dados estilo escada, perfeito para mostrar mudanças discretas ao longo do tempo",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=step-chart-generator",
      "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]