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

html· Resultado HTMLAbrir ferramenta

Início rápido

Chame esta ferramenta a partir do seu código em três idiomas.

cURL

curl -X POST 'https://api.elysiatools.com/pt/api/tools/progress-ring-chart' \
  -H 'Content-Type: application/json' \
  -d '{"progressData":"JSON format:\n[{&quot;label&quot;: &quot;Project A&quot;, &quot;value&quot;: 75},\n{&quot;label&quot;: &quot;Project B&quot;, &quot;value&quot;: 90},\n{&quot;label&quot;: &quot;Project C&quot;, &quot;value&quot;: 45}]\n\nor text format:\nProject A:75\nProject B:90\nProject C:45\n\nor single values:\n75\n90\n45","chartTitle":"Digite o título do gráfico...","ringSize":"200","ringThickness":"15","startAngle":"-90","colorScheme":"default","customColors":"#3b82f6,#10b981,#f59e0b","animationDuration":"1000","backgroundColor":"#ffffff","showPercentage":true,"showLabel":true,"animated":true}'

Referência da API

Envie uma requisição POST com suas entradas em JSON. Parâmetros do tipo arquivo exigem upload prévio.

Endpoint

HTTP

POST https://api.elysiatools.com/pt/api/tools/progress-ring-chart

Parâmetros

Nome	Tipo	Obrigatório	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

Resultado HTML

JSON

{
  "result": "<div>Processed HTML content</div>",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

Integração MCP

Adicione esta ferramenta ao seu servidor Model Context Protocol para que agentes de IA possam listá-la e chamá-la.

Configuração do servidor

Adicione este bloco à configuração do seu cliente MCP:

mcp.json

{
  "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://api.elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Listar ferramentas disponíveis

Após conectar ao endpoint SSE, liste as ferramentas expostas:

tools/list

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Chamar esta ferramenta

Invoque a ferramenta pelo seu id; os argumentos são construídos a partir de seus parâmetros:

tools/call

{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "progress-ring-chart",
    "arguments": {
  "progressData": "JSON format:\n[{&quot;label&quot;: &quot;Project A&quot;, &quot;value&quot;: 75},\n{&quot;label&quot;: &quot;Project B&quot;, &quot;value&quot;: 90},\n{&quot;label&quot;: &quot;Project C&quot;, &quot;value&quot;: 45}]\n\nor text format:\nProject A:75\nProject B:90\nProject C:45\n\nor single values:\n75\n90\n45",
  "chartTitle": "Digite o título do gráfico...",
  "ringSize": "200",
  "ringThickness": "15",
  "startAngle": "-90",
  "colorScheme": "default",
  "customColors": "#3b82f6,#10b981,#f59e0b",
  "animationDuration": "1000",
  "backgroundColor": "#ffffff",
  "showPercentage": true,
  "showLabel": true,
  "animated": true
}
  }
}

Encadeie várias ferramentas em uma sessão com uma lista toolId separada por vírgulas, p. ex. /mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp (máx. 20).

Dúvidas ou problemas? Contate [email protected]