Categorías

Generador de Indicador

Generar indicadores personalizables desde datos, perfecto para mostrar KPIs, métricas e indicadores de rendimiento

Datos para el gráfico indicador. Soporta valor único, múltiples valores o formato de array JSON

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

Colores para zonas del indicador (colores hex separados por comas, típicamente 3 colores para verde-amarillo-rojo)

Tamaño de cada indicador en píxeles (para múltiples indicadores, afecta el tamaño individual)

Valor mínimo para la escala del indicador

Valor máximo para la escala del indicador

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

Ángulo de fin en grados

Color de fondo para el contenedor del gráfico

Mostrar el valor real en el centro del indicador

Mostrar la etiqueta debajo del indicador

Mostrar marcas y valores de escala alrededor del indicador

Mostrar zonas de color (verde-amarillo-rojo) en el indicador

Animar el movimiento de la aguja cuando el gráfico se carga

Mostrar valor de porcentaje junto con el valor real

Datos clave

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

Resumen

El Generador de Indicador permite crear gráficos de estilo velocímetro altamente personalizables a partir de tus datos, facilitando la visualización clara de KPIs, métricas de rendimiento y objetivos en tiempo real.

Cuándo usarlo

  • Para presentar el progreso de objetivos clave de rendimiento (KPIs) en informes ejecutivos.
  • Cuando necesites visualizar métricas de estado actual frente a un rango mínimo y máximo definido.
  • Para crear paneles de control (dashboards) visuales que requieran una lectura rápida del desempeño.

Cómo funciona

  • Ingresa tus datos en el campo de texto, ya sea como un valor único, una lista o en formato JSON.
  • Ajusta los parámetros de configuración como el rango de valores, los colores de las zonas y el estilo de la aguja.
  • Personaliza la apariencia activando o desactivando elementos como etiquetas, marcas de escala y animaciones.
  • Genera el gráfico y obtén una representación visual precisa de tus métricas.

Casos de uso

Visualización de metas de ventas mensuales para equipos comerciales.
Monitoreo de métricas de rendimiento de servidores o infraestructura técnica.
Seguimiento de progreso en encuestas de satisfacción del cliente o NPS.

Ejemplos

1. Dashboard de Ventas Mensuales

Gerente de Ventas
Contexto
El gerente necesita presentar el cumplimiento de la cuota de ventas del equipo frente al objetivo mensual de 100,000 unidades.
Problema
Los datos en una tabla son difíciles de interpretar rápidamente durante una reunión de equipo.
Cómo usarlo
Ingresar el valor actual de ventas y configurar el rango máximo en 100,000 con zonas de color para identificar el cumplimiento.
Configuración de ejemplo
chartData: 'Ventas:85000', minValue: 0, maxValue: 100000, gaugeColors: '#10b981,#f59e0b,#ef4444'
Resultado
Un gráfico de velocímetro claro que muestra el progreso del 85% con una aguja posicionada en la zona verde.

2. Monitoreo de Carga de Servidor

Contexto
Un administrador de sistemas debe vigilar el uso de CPU de un servidor crítico para evitar sobrecargas.
Problema
Necesita una alerta visual inmediata si el uso de CPU supera el 90%.
Cómo usarlo
Configurar el indicador con un rango de 0 a 100 y ajustar los colores para que el segmento final sea rojo intenso.
Configuración de ejemplo
chartData: 'Uso CPU:92', showTicks: true, needleStyle: 'arrow', gaugeColors: '#10b981,#f59e0b,#ef4444'
Resultado
Un indicador visual que muestra la aguja en la zona roja, permitiendo una acción correctiva inmediata.

Probar con muestras

json, video

Hubs relacionados

Preguntas frecuentes

¿Qué formatos de datos acepta la herramienta?

Puedes ingresar valores simples, una lista de métricas (etiqueta:valor) o un array en formato JSON.

¿Puedo personalizar los colores del indicador?

Sí, puedes definir colores hexadecimales personalizados para las zonas del indicador, típicamente usados para representar rangos verde, amarillo y rojo.

¿Es posible animar la aguja del gráfico?

Sí, la herramienta incluye una opción de 'Aguja Animada' que genera un efecto de movimiento al cargar el gráfico.

¿Puedo mostrar múltiples indicadores a la vez?

Sí, al ingresar múltiples pares de etiquetas y valores en el campo de datos, el generador creará los indicadores correspondientes.

¿Qué significan los ángulos de inicio y fin?

Estos valores definen la apertura del arco del indicador en grados, permitiendo crear desde semicírculos hasta indicadores circulares completos.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/gauge-chart-generator

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
chartData textarea Datos para el gráfico indicador. Soporta valor único, múltiples valores o formato de array JSON
chartTitle text No Título que se mostrará encima del gráfico
needleStyle select No -
gaugeColors text No Colores para zonas del indicador (colores hex separados por comas, típicamente 3 colores para verde-amarillo-rojo)
chartSize number No Tamaño de cada indicador en píxeles (para múltiples indicadores, afecta el tamaño individual)
minValue number No Valor mínimo para la escala del indicador
maxValue number No Valor máximo para la escala del indicador
startAngle number No Ángulo de inicio en grados (-90 = izquierda, 0 = arriba, 90 = derecha)
endAngle number No Ángulo de fin en grados
backgroundColor color No Color de fondo para el contenedor del gráfico
showValue checkbox No Mostrar el valor real en el centro del indicador
showLabel checkbox No Mostrar la etiqueta debajo del indicador
showTicks checkbox No Mostrar marcas y valores de escala alrededor del indicador
showZones checkbox No Mostrar zonas de color (verde-amarillo-rojo) en el indicador
animated checkbox No Animar el movimiento de la aguja cuando el gráfico se carga
showPercentage checkbox No Mostrar valor de porcentaje junto con el valor real

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-gauge-chart-generator": {
      "name": "gauge-chart-generator",
      "description": "Generar indicadores personalizables desde datos, perfecto para mostrar KPIs, métricas e indicadores de rendimiento",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=gauge-chart-generator",
      "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]