Categorías

← View All Tools

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

Valores de progreso (0-100). Soporta array JSON con etiquetas, pares simples etiqueta:valor o solo valores

Título que se mostrará encima del gráfico

Tamaño de cada anillo de progreso en píxeles

Grosor del trazo del anillo de progreso

Ángulo de inicio en grados (-90 = arriba, 0 = derecha, 90 = abajo, 180 = izquierda)

Colores personalizados para anillos de progreso (colores hex separados por comas)

Duración de la animación de progreso en milisegundos

Color de fondo para el contenedor del gráfico

Mostrar valor de porcentaje en el centro de cada anillo

Mostrar etiqueta debajo de cada anillo de progreso

Animar los anillos de progreso cuando se cargan

Datos clave

Categoría
Data Visualization
Tipos de entrada
textarea, text, number, select, color, checkbox
Tipo de salida
html
Cobertura de muestras
4
API disponible
Yes

Resumen

El Gráfico de Anillo de Progreso es una herramienta visual intuitiva diseñada para generar indicadores circulares dinámicos, ideales para representar porcentajes, tasas de finalización y métricas de rendimiento con un diseño limpio y profesional.

Cuándo usarlo

  • •Para visualizar el avance de proyectos o tareas en presentaciones y reportes.
  • •Para mostrar métricas de cumplimiento de objetivos de forma clara y atractiva.
  • •Para integrar indicadores de estado en paneles de control o interfaces de usuario.

Cómo funciona

  • •Ingresa tus valores de progreso (0-100) en formato JSON, lista simple o texto.
  • •Personaliza el estilo ajustando el grosor del anillo, el tamaño y el esquema de colores.
  • •Configura las opciones de visualización, como mostrar el porcentaje central o etiquetas descriptivas.
  • •Genera el gráfico con animaciones fluidas para una presentación impactante.

Casos de uso

Monitoreo de KPIs de ventas en tiempo real para equipos comerciales.
Visualización del progreso de hitos en la gestión de proyectos.
Indicadores de salud o estado de sistemas en dashboards técnicos.

Ejemplos

1. Seguimiento de Metas de Ventas

Gerente de Ventas
Contexto
El equipo necesita visualizar el porcentaje de cumplimiento de la cuota mensual de tres regiones diferentes.
Problema
Los reportes en texto plano no permiten ver rápidamente qué regiones están cerca de su objetivo.
Cómo usarlo
Ingresar los datos de cumplimiento de cada región y seleccionar el esquema de color 'success' para resaltar el progreso.
Configuración de ejemplo
[{"label": "Norte", "value": 85}, {"label": "Sur", "value": 60}, {"label": "Este", "value": 95}]
Resultado
Un gráfico de tres anillos que muestra claramente el desempeño regional con animaciones al cargar.

2. Estado de Tareas de Proyecto

Project Manager
Contexto
Se requiere presentar el avance de las fases de desarrollo de un software a los interesados.
Problema
La falta de una representación visual hace que el progreso parezca estancado en los reportes escritos.
Cómo usarlo
Utilizar la opción de colores personalizados para asignar un color específico a cada fase del proyecto.
Configuración de ejemplo
{"ringThickness": 20, "showPercentage": true, "colorScheme": "purple"}
Resultado
Un indicador circular elegante que comunica el avance del 75% en la fase de desarrollo de forma inmediata.

Probar con muestras

json
Muestras PDF
Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10
preferred input family json
json
Muestras de Comunicación en Tiempo Real WebRTC
Muestras completas de WebRTC para comunicación de audio/video P2P, canales de datos, compartir pantalla y servidor de señalización
preferred input family json
json
Muestras Avanzadas de Grafana
Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins
preferred input family json
json
Muestras de Análisis de Logs ELK Stack
Muestras completas de ELK Stack para agregación, procesamiento y visualización de logs en sistemas distribuidos
preferred input family json
json

Hubs relacionados

Herramientas de Json para Generate
Explora 33 herramientas de json para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Json para Convert
Explora 100 herramientas de json para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Json
Explora 43 herramientas de json para flujos de utility y encuentra utilidades cercanas con rapidez.
Herramientas de Json para Format
Explora 6 herramientas de json para flujos de format y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Qué formatos de datos acepta la herramienta?

Puedes ingresar los datos como un array JSON con etiquetas y valores, una lista simple de texto (etiqueta:valor) o simplemente una serie de números.

¿Puedo personalizar los colores de los anillos?

Sí, puedes elegir entre esquemas predefinidos (como éxito, advertencia o degradado) o ingresar tus propios códigos de color hexadecimales.

¿Es posible desactivar la animación?

Sí, puedes desmarcar la opción 'Animado' en la configuración si prefieres que el gráfico se muestre de forma estática.

¿Cuál es el rango de valores permitido?

La herramienta está diseñada para valores de progreso entre 0 y 100, representando porcentajes de completitud.

¿Puedo mostrar el porcentaje dentro del anillo?

Sí, la opción 'Mostrar Porcentaje' permite visualizar el valor numérico exacto en el centro del gráfico.

Documentación de la API

Punto final de la solicitud

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

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
progressData textarea Sí Valores de progreso (0-100). Soporta array JSON con etiquetas, pares simples etiqueta:valor o solo valores
chartTitle text No Título que se mostrará encima del gráfico
ringSize number No Tamaño de cada anillo de progreso en píxeles
ringThickness number No Grosor del trazo del anillo de progreso
startAngle number No Ángulo de inicio en grados (-90 = arriba, 0 = derecha, 90 = abajo, 180 = izquierda)
colorScheme select No -
customColors text No Colores personalizados para anillos de progreso (colores hex separados por comas)
animationDuration number No Duración de la animación de progreso en milisegundos
backgroundColor color No Color de fondo para el contenedor del gráfico
showPercentage checkbox No Mostrar valor de porcentaje en el centro de cada anillo
showLabel checkbox No Mostrar etiqueta debajo de cada anillo de progreso
animated checkbox No Animar los anillos de progreso cuando se cargan

Formato de respuesta

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

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

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

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]