# 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 > Página canônica: https://elysiatools.com/pt/tools/step-chart-generator - **Categoria:** Data Visualization - **Palavras-chave:** gráfico de degraus, gráfico escada, dados discretos, série temporal, mudanças de preço, níveis de estoque ## 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. ## Entradas - **Título do Gráfico** (text): Título que será exibido acima do gráfico de degraus - **Pontos de Dados** (textarea): Pontos de dados como array JSON com propriedades x, y e rótulo opcional - **Rótulo do Eixo X** (text): Rótulo para o eixo X - **Rótulo do Eixo Y** (text): Rótulo para o eixo Y - **Estilo do Degrau** (select): Selecione o estilo do degrau - **Cor da Linha** (color): Cor da linha de degraus - **Largura da Linha** (number): Largura da linha de degraus em pixels - **Cor do Ponto de Dados** (color): Cor dos pontos de dados - **Tamanho do Ponto de Dados** (number): Tamanho dos pontos de dados em pixels - **Mostrar Pontos de Dados** (checkbox): Mostrar pontos de dados na linha de degraus - **Mostrar Rótulos de Dados** (checkbox): Mostrar rótulos de valor nos pontos de dados - **Mostrar Grade** (checkbox): Mostrar linhas de grade de fundo - **Preencher Área Abaixo da Linha** (checkbox): Preencher a área abaixo da linha de degraus com cor - **Cor de Preenchimento de Área** (color): Cor para preenchimento de área (se habilitado) - **Cor da Grade** (color): Cor das linhas de grade - **Cor de Fundo** (color): Cor de fundo do gráfico - **Largura do Gráfico** (number): Largura do gráfico em pixels - **Altura do Gráfico** (number): Altura do gráfico em pixels - **Formato do Rótulo de Dados** (select): Selecione o formato - **Tamanho da Fonte** (number): Tamanho da fonte para rótulos e texto - **Tamanho da Fonte do Título** (number): Tamanho da fonte para o título do gráfico - **Família da Fonte** (text): Família da fonte para elementos de texto - **Habilitar Animação** (checkbox): Animar o gráfico quando carregar - **Duração da Animação** (number): Duração da animação em milissegundos ## 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. ## Perguntas frequentes ### 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. ## Ferramentas relacionadas - [Gerador de Gráfico de Barras de Comparação](https://elysiatools.com/pt/tools/comparison-bar-chart): Gerar gráficos de barras costas com costas para comparação de valores positivos e negativos, perfeito para contrastar conjuntos de dados - [Gerador de Gráfico de Donut](https://elysiatools.com/pt/tools/donut-chart-generator): Gerar gráficos de donut personalizáveis a partir de dados com várias opções de estilo, perfeito para mostrar proporções com espaço central - [Gerador de Gráfico de Funil](https://elysiatools.com/pt/tools/funnel-chart-generator): Gerar gráficos de funil personalizáveis a partir de dados, perfeito para mostrar taxas de conversão, pipelines de vendas e fluxos de processos - [Gerador de Gráfico de Gantt](https://elysiatools.com/pt/tools/gantt-chart-generator): Criar gráficos de Gantt profissionais com linhas de tempo de tarefas, dependências, acompanhamento de progresso e marcadores de marcos - [Gerador de Gráficos de Marcos](https://elysiatools.com/pt/tools/milestone-chart): Gerar gráficos de marcos do projeto com nós de linha do tempo e pontos chave de conquista - [Gerador de Gráfico Circular Multinível](https://elysiatools.com/pt/tools/multi-level-pie-chart-generator): Criar gráficos circulares multiníveis concêntricos com relações hierárquicas e funcionalidade de drill-down interativa - [Gerador de Pictograma](https://elysiatools.com/pt/tools/pictograph-generator): Crie pictogramas usando ícones/símbolos para representar quantidades com ícones, cores e layouts personalizáveis - [Gerador de Barra de Progresso](https://elysiatools.com/pt/tools/progress-bar-generator): Gerar barras de progresso personalizáveis a partir de dados, perfeito para mostrar status de conclusão, rankings ou valores comparativos ## Exemplos - [Exemplos Avançados de Aplicação Grafana](https://elysiatools.com/pt/samples/grafana-samples): Exemplos compreensivos de Grafana cobrindo design avançado de dashboards, configuração de alertas, integração de fontes de dados e desenvolvimento de plugins - [Exemplos de Comunicação em Tempo Real WebRTC](https://elysiatools.com/pt/samples/webrtc-samples): Exemplos completos WebRTC para comunicação áudio/vídeo P2P, canais de dados, compartilhamento de tela e servidor de sinalização - [Exemplos de Códigos QR](https://elysiatools.com/pt/samples/qrcode-samples): Imagens de código QR de exemplo para testar ferramentas de leitura e geração de código QR - [Exemplos de Rastreamento Distribuído](https://elysiatools.com/pt/samples/distributed-tracing-samples): Exemplos completos de rastreamento distribuído usando Jaeger, OpenTelemetry e ferramentas modernas de observabilidade ## Conteúdo relacionado - [Geradores de Gráficos e Diagramas](https://elysiatools.com/pt/hubs/chart-diagram-generators): Gere gráficos de barras, linhas, pizza, rosca, dispersão, radar, Gantt, Sankey, mapa de calor, funil, treemap e muitas outras visualizações a partir dos seus próprios dados em um único hub. - [Geradores de schema JSON, dados mock e fixtures de API](https://elysiatools.com/pt/hubs/json-generate): Ferramentas reunidas para geracao de schema JSON, construcao de payloads mock e preparacao de fixtures de API em um unico hub. - [Geradores de código tipado a partir de JSON (TypeScript, Go, Rust, Kotlin, Java, C#)](https://elysiatools.com/pt/hubs/json-to-typed-code-generators): Cole JSON e obtenha tipos prontos para uso: interfaces TypeScript, structs Go, structs Rust com serde, data classes Kotlin, classes Java, classes C#, esquemas Zod e JSON Schema inferido. - [Ferramentas de intercambio JSON e traducao de formatos](https://elysiatools.com/pt/hubs/json-convert): Compare ferramentas de conversao JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN e outros formatos estruturados em um unico hub.