Elysia Tools Docs
ES
Idioma
ZHESPTRUFRDEEN
Volver al sitio
Explorar herramientas

Data Visualization

Gráfico de Anillo de Progreso

Crear indicadores de progreso circulares hermosos con animaciones, perfectos para mostrar porcentajes, tasas de finalización y métricas de progreso

html· Resultado HTMLAbrir herramienta

Inicio rápido

Llama a esta herramienta desde tu código en tres lenguajes.

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

© 2026 Elysia Tools. Documentación para desarrolladores.

Volver al sitioExplorar herramientas

Referencia de la API

Envía una petición POST con tus entradas en JSON. Los parámetros de tipo archivo requieren una subida previa.

Endpoint

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

Parámetros

NombreTipoObligatorioDescripción
progressDatatextareaSíValores de progreso (0-100). Soporta array JSON con etiquetas, pares simples etiqueta:valor o solo valores
chartTitletextNoTítulo que se mostrará encima del gráfico
ringSizenumberNoTamaño de cada anillo de progreso en píxeles
ringThicknessnumberNoGrosor del trazo del anillo de progreso
startAnglenumberNoÁngulo de inicio en grados (-90 = arriba, 0 = derecha, 90 = abajo, 180 = izquierda)
colorSchemeselectNo—
customColorstextNoColores personalizados para anillos de progreso (colores hex separados por comas)
animationDurationnumberNoDuración de la animación de progreso en milisegundos
backgroundColorcolorNoColor de fondo para el contenedor del gráfico
showPercentagecheckboxNoMostrar valor de porcentaje en el centro de cada anillo
showLabelcheckboxNoMostrar etiqueta debajo de cada anillo de progreso
animatedcheckboxNoAnimar los anillos de progreso cuando se cargan

Formato de respuesta

Resultado HTML

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

Integración MCP

Añade esta herramienta a tu servidor Model Context Protocol para que los agentes de IA puedan listarla y llamarla.

Configuración del servidor

Añade este bloque a la configuración de tu cliente MCP:

mcp.json
{
  "mcpServers": {
    "elysiatools-progress-ring-chart": {
      "name": "progress-ring-chart",
      "description": "Crear indicadores de progreso circulares hermosos con animaciones, perfectos para mostrar porcentajes, tasas de finalización y métricas de progreso",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Listar herramientas disponibles

Tras conectar al endpoint SSE, lista las herramientas expuestas:

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

Llamar a esta herramienta

Invoca la herramienta por su id; los argumentos se construyen a partir de sus 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": "Ingrese el título del gráfico...",
  "ringSize": "200",
  "ringThickness": "15",
  "startAngle": "-90",
  "colorScheme": "default",
  "customColors": "#3b82f6,#10b981,#f59e0b",
  "animationDuration": "1000",
  "backgroundColor": "#ffffff",
  "showPercentage": true,
  "showLabel": true,
  "animated": true
}
  }
}
Encadena varias herramientas en una sesión con una lista toolId separada por comas, p. ej. /mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp (máx. 20).

¿Dudas o problemas? Contacta con [email protected]

Explorar herramientas
Abrir herramienta