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.

Elysia Tools

Navegação

Data Visualization

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

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Entradas

As opções estão agrupadas para deixar formulários longos mais fáceis de revisar.

12 opções

ConteúdoCole ou digite os valores principais.3

Dados de ProgressotextareaObrigatórioValores de progresso (0-100). Suporta array JSON com etiquetas, pares simples etiqueta:valor ou apenas valoresTítulo do GráficotextOpcionalTítulo que será exibido acima do gráficoCores PersonalizadastextOpcionalCores personalizadas para anéis de progresso (cores hex separadas por vírgula)

ConfiguraçõesAjuste formatos, intervalos, números e modos.6

Tamanho do AnelnumberOpcionalTamanho de cada anel de progresso em pixelsEspessura do AnelnumberOpcionalEspessura do traço do anel de progressoÂngulo de InícionumberOpcionalÂngulo de início em graus (-90 = topo, 0 = direita, 90 = base, 180 = esquerda)Esquema de CoresselectOpcionalDuração da AnimaçãonumberOpcionalDuração da animação de progresso em milissegundosCor de FundocolorOpcionalCor de fundo para o contêiner do gráfico

AlternânciasAtive ou desative comportamentos opcionais.3

Mostrar PorcentagemcheckboxOpcionalAtivo quando marcadoExibir valor de porcentagem no centro de cada anelMostrar RótulocheckboxOpcionalAtivo quando marcadoExibir rótulo abaixo de cada anel de progressoAnimadocheckboxOpcionalAtivo quando marcadoAnimar os anéis de progresso quando carregados

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Gráfico de Anel de Progresso

Executar esta ferramenta

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Dashboard de Metas de Equipe

Perguntas frequentes

Exemplos Avançados de Aplicação Grafana

Exemplos de Códigos QR

Exemplos D3.js Data Visualization

Exemplos Rome JavaScript Toolchain

Gráfico de Estrelas de Avaliação

Gerador de Gráfico Rosa

Gerador de Gráfico de Fluxo

Gerador de Linha do Tempo

Geradores de Gráficos e Diagramas

Geradores de schema JSON, dados mock e fixtures de API

Geradores de código tipado a partir de JSON (TypeScript, Go, Rust, Kotlin, Java, C#)

Ferramentas de intercambio JSON e traducao de formatos