Categorias

← View All Tools

Gráfico de Anel de Progresso

Criar indicadores de progresso circulares bonitos com animações, perfeitos para exibir porcentagens, taxas de conclusão e métricas de progresso

Valores de progresso (0-100). Suporta array JSON com etiquetas, pares simples etiqueta:valor ou apenas valores

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

Tamanho de cada anel de progresso em pixels

Espessura do traço do anel de progresso

Ângulo de início em graus (-90 = topo, 0 = direita, 90 = base, 180 = esquerda)

Cores personalizadas para anéis de progresso (cores hex separadas por vírgula)

Duração da animação de progresso em milissegundos

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

Exibir valor de porcentagem no centro de cada anel

Exibir rótulo abaixo de cada anel de progresso

Animar os anéis de progresso quando carregados

Fatos principais

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

Visão geral

O Gráfico de Anel de Progresso é uma ferramenta intuitiva para criar indicadores circulares elegantes e animados, ideais para visualizar porcentagens, taxas de conclusão e métricas de desempenho de forma clara e profissional.

Quando usar

  • •Para exibir visualmente o progresso de metas ou projetos em dashboards.
  • •Para destacar taxas de conclusão de tarefas em relatórios de desempenho.
  • •Para criar elementos visuais interativos que tornam a apresentação de dados mais envolvente.

Como funciona

  • •Insira seus dados de progresso no formato JSON, lista de pares etiqueta:valor ou valores simples.
  • •Personalize a aparência ajustando o tamanho, a espessura do anel e o esquema de cores.
  • •Configure as opções de exibição, como mostrar porcentagens, rótulos e animações.
  • •Gere o gráfico e utilize o resultado visual para integrar em seus projetos ou apresentações.

Casos de uso

Monitoramento de metas de vendas mensais.
Acompanhamento de progresso de conclusão de cursos online.
Exibição de métricas de saúde ou uso de recursos em sistemas.

Exemplos

1. Dashboard de Metas de Equipe

Gerente de Projetos
Contexto
O gerente precisa apresentar o status de conclusão de três projetos principais para a diretoria.
Problema
Dados tabulares são difíceis de interpretar rapidamente em uma reunião.
Como usar
Inserir os valores de conclusão dos projetos e aplicar o esquema de cores 'Sucesso'.
Configuração de exemplo
[{"label": "Projeto A", "value": 85}, {"label": "Projeto B", "value": 60}, {"label": "Projeto C", "value": 95}]
Resultado
Um gráfico de anel claro e animado que destaca o status de cada projeto com cores verdes, facilitando a leitura imediata.

Testar com amostras

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
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 de Análise de Logs ELK Stack
Exemplos completos de ELK Stack para agregação, processamento e visualização de logs em sistemas distribuídos
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

Quais formatos de dados são aceitos?

Você pode inserir dados como um array JSON, pares de 'etiqueta:valor' ou apenas uma lista de valores numéricos de 0 a 100.

Posso personalizar as cores dos anéis?

Sim, você pode escolher entre esquemas de cores predefinidos ou definir cores personalizadas usando códigos hexadecimais.

É possível remover a animação?

Sim, basta desmarcar a opção 'Animado' nas configurações para exibir o gráfico estaticamente.

Qual é o limite de tamanho do anel?

O tamanho do anel pode ser ajustado entre 100 e 400 pixels para se adequar ao seu layout.

Posso exibir o valor percentual dentro do anel?

Sim, a opção 'Mostrar Porcentagem' permite exibir o valor centralizado automaticamente.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/progress-ring-chart

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
progressData textarea Sim Valores de progresso (0-100). Suporta array JSON com etiquetas, pares simples etiqueta:valor ou apenas valores
chartTitle text Não Título que será exibido acima do gráfico
ringSize number Não Tamanho de cada anel de progresso em pixels
ringThickness number Não Espessura do traço do anel de progresso
startAngle number Não Ângulo de início em graus (-90 = topo, 0 = direita, 90 = base, 180 = esquerda)
colorScheme select Não -
customColors text Não Cores personalizadas para anéis de progresso (cores hex separadas por vírgula)
animationDuration number Não Duração da animação de progresso em milissegundos
backgroundColor color Não Cor de fundo para o contêiner do gráfico
showPercentage checkbox Não Exibir valor de porcentagem no centro de cada anel
showLabel checkbox Não Exibir rótulo abaixo de cada anel de progresso
animated checkbox Não Animar os anéis de progresso quando carregados

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-progress-ring-chart": {
      "name": "progress-ring-chart",
      "description": "Criar indicadores de progresso circulares bonitos com animações, perfeitos para exibir porcentagens, taxas de conclusão e métricas de progresso",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-ring-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]