¿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.

Elysia Tools

Navegación

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

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Entradas

Las opciones están agrupadas para que los formularios largos sean más fáciles de revisar.

12 opciones

ContenidoPega o escribe los valores principales.3

Datos de ProgresotextareaObligatorioValores de progreso (0-100). Soporta array JSON con etiquetas, pares simples etiqueta:valor o solo valoresTítulo del GráficotextOpcionalTítulo que se mostrará encima del gráficoColores PersonalizadostextOpcionalColores personalizados para anillos de progreso (colores hex separados por comas)

AjustesAjusta formatos, rangos, números y modos.6

Tamaño del AnillonumberOpcionalTamaño de cada anillo de progreso en píxelesGrosor del AnillonumberOpcionalGrosor del trazo del anillo de progresoÁngulo de InicionumberOpcionalÁngulo de inicio en grados (-90 = arriba, 0 = derecha, 90 = abajo, 180 = izquierda)Esquema de ColorselectOpcionalDuración de AnimaciónnumberOpcionalDuración de la animación de progreso en milisegundosColor de FondocolorOpcionalColor de fondo para el contenedor del gráfico

InterruptoresActiva o desactiva comportamientos opcionales.3

Mostrar PorcentajecheckboxOpcionalActivado si está marcadoMostrar valor de porcentaje en el centro de cada anilloMostrar EtiquetacheckboxOpcionalActivado si está marcadoMostrar etiqueta debajo de cada anillo de progresoAnimadocheckboxOpcionalActivado si está marcadoAnimar los anillos de progreso cuando se cargan

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Gráfico de Anillo de Progreso

Ejecutar esta herramienta

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Seguimiento de Metas de Ventas

2. Estado de Tareas de Proyecto

Preguntas frecuentes

Muestras Avanzadas de Grafana

Ejemplos de Códigos QR

Ejemplos D3.js Data Visualization

Ejemplos de Rome Toolchain JavaScript

Gráfico de Estrellas de Calificación

Generador de Gráfico Rosa

Stream Graph Generator

Generador de Línea de Tiempo

Generadores de Gráficos y Diagramas

Generadores de esquemas JSON, datos mock y fixtures de API

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

Herramientas de intercambio JSON y traduccion de formatos