Elysia Tools Docs
ES
Idioma
ZHESPTRUFRDEEN
Volver al sitio
Explorar herramientas

Data Visualization

Generador de Barras de Progreso

Generar barras de progreso personalizables desde datos, perfecto para mostrar estado de finalización, rankings o valores comparativos

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-bar-generator' \
  -H 'Content-Type: application/json' \
  -d '{"chartData":"JSON format:\n[{"label": "Task A", "value": 75},\n{"label": "Task B", "value": 60},\n{"label": "Task C", "value": 90},\n{"label": "Task D", "value": 45}]\n\nor text format:\nTask A:75\nTask B:60\nTask C:90\nTask D:45","chartTitle":"Ingrese el título del gráfico...","orientation":"horizontal","barStyle":"solid","barColors":"#3b82f6,#ef4444,#10b981","barHeight":"30","maxValue":0,"minValue":0,"targetValue":0,"backgroundColor":"#ffffff","showPercentage":true,"showValues":true,"animated":true,"rounded":true,"showTarget":false}'

© 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-bar-generator

Parámetros

NombreTipoObligatorioDescripción
chartDatatextareaSíDatos para las barras de progreso. Soporta array JSON o formato de texto simple etiqueta:valor
chartTitletextNoTítulo que se mostrará encima del gráfico
orientationselectNo—
barStyleselectNo—
barColorstextNoColores para las barras de progreso (colores hex separados por comas). Deje vacío para colores predeterminados.
barHeightnumberNoAltura de barras horizontales o ancho de barras verticales en píxeles
maxValuenumberNoValor máximo para la escala de progreso (deje vacío para escala automática)
minValuenumberNoValor mínimo para la escala de progreso
targetValuenumberNoValor objetivo para mostrar como línea de referencia
backgroundColorcolorNoColor de fondo para el contenedor del gráfico
showPercentagecheckboxNoMostrar valores de porcentaje en las barras de progreso
showValuescheckboxNoMostrar valores reales en las barras de progreso
animatedcheckboxNoAnimar las barras de progreso cuando se cargan
roundedcheckboxNoUsar esquinas redondeadas para las barras de progreso
showTargetcheckboxNoMostrar una línea de referencia para el valor objetivo

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-bar-generator": {
      "name": "progress-bar-generator",
      "description": "Generar barras de progreso personalizables desde datos, perfecto para mostrar estado de finalización, rankings o valores comparativos",
      "baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=progress-bar-generator",
      "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-bar-generator",
    "arguments": {
  "chartData": "JSON format:\n[{&quot;label&quot;: &quot;Task A&quot;, &quot;value&quot;: 75},\n{&quot;label&quot;: &quot;Task B&quot;, &quot;value&quot;: 60},\n{&quot;label&quot;: &quot;Task C&quot;, &quot;value&quot;: 90},\n{&quot;label&quot;: &quot;Task D&quot;, &quot;value&quot;: 45}]\n\nor text format:\nTask A:75\nTask B:60\nTask C:90\nTask D:45",
  "chartTitle": "Ingrese el título del gráfico...",
  "orientation": "horizontal",
  "barStyle": "solid",
  "barColors": "#3b82f6,#ef4444,#10b981",
  "barHeight": "30",
  "maxValue": 0,
  "minValue": 0,
  "targetValue": 0,
  "backgroundColor": "#ffffff",
  "showPercentage": true,
  "showValues": true,
  "animated": true,
  "rounded": true,
  "showTarget": false
}
  }
}
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