Categorias

← View All Tools

Gerador de Gráficos de Área Empilhada

Gerar gráficos de área empilhada mostrando tendências cumulativas de múltiplas séries de dados, perfeito para visualizar tendências totais e contribuições de componentes

Dados para o gráfico empilhado. Suporta JSON multi-séries para empilhamento ou array de série única

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

Cores para múltiplas áreas (cores hex separadas por vírgula). Deixe vazio para cores padrão.

Opacidade do preenchimento da área (0.1 a 1.0)

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

Cor para as linhas da grade

Largura das linhas de limite da área em pixels

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

Rótulo para o eixo Y

Mostrar linhas da grade para melhor legibilidade

Mostrar pontos de dados nas áreas

Mostrar os valores reais nos pontos de dados

Mostrar uma linha mostrando o total cumulativo

Converter valores em porcentagens mostrando contribuição relativa

Mostrar uma legenda abaixo do gráfico

Fatos principais

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

Visão geral

O Gerador de Gráficos de Área Empilhada permite transformar conjuntos de dados complexos em visualizações claras, destacando como diferentes componentes contribuem para um total acumulado ao longo do tempo.

Quando usar

  • •Para visualizar a evolução de um valor total composto por várias categorias.
  • •Ao comparar a contribuição relativa de diferentes séries de dados em um período.
  • •Para apresentar tendências de crescimento cumulativo de forma intuitiva e profissional.

Como funciona

  • •Insira seus dados no formato JSON, especificando rótulos e as séries de valores correspondentes.
  • •Personalize a aparência do gráfico ajustando o tipo de curva, cores das áreas e opacidade.
  • •Configure elementos visuais como linhas de grade, rótulos de eixos e legendas para melhorar a clareza.
  • •Gere o gráfico instantaneamente e utilize a visualização para relatórios ou apresentações.

Casos de uso

Monitoramento de receita mensal dividida por diferentes linhas de produtos.
Análise de tráfego de site segmentado por canais de aquisição ao longo do ano.
Visualização de consumo de recursos ou despesas operacionais por departamento.

Exemplos

1. Relatório de Vendas Trimestral

Analista de Negócios
Contexto
O analista precisa mostrar como três produtos diferentes contribuíram para o faturamento total da empresa nos últimos meses.
Problema
Dificuldade em visualizar a soma total e a participação individual de cada produto em um único gráfico.
Como usar
Inserir os dados de vendas mensais no formato JSON e ativar a opção 'Mostrar Linha Total'.
Configuração de exemplo
curveType: 'smooth', showTotalLine: true, showLegend: true
Resultado
Um gráfico de área suave que exibe claramente o crescimento do faturamento total e a fatia de mercado de cada produto.

2. Distribuição de Tráfego Web

Gestor de Marketing
Contexto
O gestor quer entender a eficácia de diferentes fontes de tráfego (Orgânico, Pago, Social) ao longo do tempo.
Problema
Visualizar a composição do tráfego total para identificar qual canal mais cresceu.
Como usar
Configurar os dados de tráfego e utilizar a normalização para 100% para ver a proporção de cada canal.
Configuração de exemplo
normalizeData: true, showGrid: true, areaColors: '#3b82f6,#10b981,#f59e0b'
Resultado
Um gráfico de área 100% empilhado que destaca a mudança na proporção de cada canal de tráfego, facilitando a análise de estratégia.

Testar com amostras

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 D3.js Data Visualization
Exemplos abrangentes de visualização de dados D3.js incluindo gráficos, mapas, animações e visualizações interativas
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 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

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 Json
Explore 43 ferramentas de json para fluxos de utility e encontre utilitários próximos com rapidez.
Ferramentas de Json para Format
Explore 6 ferramentas de json para fluxos de format e encontre utilitários próximos com rapidez.

FAQ

O que é um gráfico de área empilhada?

É um gráfico que mostra a mudança de valores ao longo do tempo, onde cada série é empilhada sobre a anterior, permitindo ver tanto o total quanto a parte de cada categoria.

Posso usar dados de uma única série?

Sim, a ferramenta suporta tanto dados multi-séries quanto séries únicas para visualizações mais simples.

Como personalizo as cores das áreas?

Você pode inserir códigos de cores hexadecimais separados por vírgula no campo 'Cores da Área'.

O que faz a opção 'Normalizar para 100%'?

Ela converte todos os valores em porcentagens, focando na contribuição relativa de cada série em vez dos valores absolutos.

É possível exportar o gráfico?

O gerador produz uma visualização em formato HTML pronta para ser incorporada ou capturada para seus documentos.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/stacked-area-chart

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
chartData textarea Sim Dados para o gráfico empilhado. Suporta JSON multi-séries para empilhamento ou array de série única
chartTitle text Não Título que será exibido acima do gráfico
curveType select Não -
areaColors text Não Cores para múltiplas áreas (cores hex separadas por vírgula). Deixe vazio para cores padrão.
fillOpacity text Não Opacidade do preenchimento da área (0.1 a 1.0)
backgroundColor color Não Cor de fundo para o contêiner do gráfico
gridColor color Não Cor para as linhas da grade
lineWidth number Não Largura das linhas de limite da área em pixels
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
yAxisLabel text Não Rótulo para o eixo Y
showGrid checkbox Não Mostrar linhas da grade para melhor legibilidade
showPoints checkbox Não Mostrar pontos de dados nas áreas
showValues checkbox Não Mostrar os valores reais nos pontos de dados
showTotalLine checkbox Não Mostrar uma linha mostrando o total cumulativo
normalizeData checkbox Não Converter valores em porcentagens mostrando contribuição relativa
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-stacked-area-chart": {
      "name": "stacked-area-chart",
      "description": "Gerar gráficos de área empilhada mostrando tendências cumulativas de múltiplas séries de dados, perfeito para visualizar tendências totais e contribuições de componentes",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stacked-area-chart",
      "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]