Categorías

← View All Tools

Generador de Gráfico de Heladas

Generar gráficos de heladas interactivos para visualización de datos jerárquicos, perfecto para mostrar estructuras de árbol, sistemas de archivos y jerarquías organizacionales

Datos jerárquicos en formato JSON con nombre, valor y arrays de hijos opcionales

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

Matriz JSON de colores hex (requiere selección de colores personalizados)

Ancho del gráfico en píxeles (mín: 400, máx: 1200)

Altura del gráfico en píxeles (mín: 300, máx: 800)

Nivel de inicio a mostrar (0 = nivel raíz)

Número máximo de niveles a mostrar

Tamaño de fuente para etiquetas en píxeles (mín: 8, máx: 16)

Espaciado entre rectángulos en píxeles (mín: 0, máx: 10)

Radio de esquina para rectángulos en píxeles (mín: 0, máx: 8)

Ancho del borde para rectángulos en píxeles (mín: 0, máx: 3)

Color de fondo para el contenedor del gráfico

Color del borde para rectángulos

Mostrar nombres de categoría dentro de rectángulos

Mostrar valores dentro de rectángulos

Mostrar porcentajes en lugar de valores absolutos

Mostrar información detallada al pasar el cursor

Animar rectángulos al pasar el cursor

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 Gráfico de Heladas permite transformar datos jerárquicos complejos en visualizaciones interactivas y claras. Es la herramienta ideal para representar estructuras de árbol, sistemas de archivos o jerarquías organizacionales mediante rectángulos anidados que facilitan la comprensión de la distribución de valores en diferentes niveles.

Cuándo usarlo

  • •Cuando necesitas visualizar la composición de un sistema de archivos o directorios.
  • •Al presentar estructuras organizacionales donde es vital ver la jerarquía y el peso de cada departamento.
  • •Para analizar datos anidados donde la proporción de cada subcategoría respecto al total es fundamental.

Cómo funciona

  • •Introduce tus datos en formato JSON, definiendo claramente los nombres, valores y las relaciones de los nodos hijos.
  • •Personaliza la apariencia del gráfico ajustando el esquema de color, el formato de los valores y las dimensiones del lienzo.
  • •Configura la profundidad de visualización y las etiquetas para resaltar los niveles de datos más relevantes.
  • •Genera el gráfico interactivo y utiliza los tooltips para explorar los detalles de cada segmento en tiempo real.

Casos de uso

Análisis de uso de almacenamiento en servidores mediante la visualización de directorios y archivos.
Representación de presupuestos departamentales para identificar qué áreas consumen la mayor parte de los recursos.
Visualización de taxonomías de productos en catálogos de comercio electrónico para entender la profundidad de las categorías.

Ejemplos

1. Visualización de Estructura de Archivos

Administrador de Sistemas
Contexto
El administrador necesita identificar qué carpetas están ocupando más espacio en el servidor principal.
Problema
Los informes de texto son difíciles de interpretar para detectar rápidamente los cuellos de botella de almacenamiento.
Cómo usarlo
Cargar el JSON del árbol de directorios, seleccionar el esquema 'Vibrante' y activar la visualización de valores en formato 'Miles (k)'.
Configuración de ejemplo
{"chartTitle": "Uso de Disco", "colorScheme": "vibrant", "valueFormat": "thousands", "showValues": true}
Resultado
Un gráfico de heladas donde los rectángulos más grandes indican las carpetas con mayor peso, permitiendo una limpieza de datos eficiente.

2. Mapa de Presupuesto Corporativo

Analista Financiero
Contexto
Se debe presentar a la junta directiva cómo se distribuye el presupuesto anual entre los diferentes departamentos y sus sub-proyectos.
Problema
La jerarquía es demasiado profunda para una tabla estándar, ocultando la relación entre gastos operativos y proyectos específicos.
Cómo usarlo
Configurar el gráfico con orientación 'Horizontal', habilitar porcentajes y limitar la profundidad a 3 niveles para mayor claridad.
Configuración de ejemplo
{"chartOrientation": "horizontal", "showPercentages": true, "maxDepth": 3, "colorScheme": "ocean"}
Resultado
Una vista clara y profesional que muestra la proporción de gasto de cada departamento, facilitando la toma de decisiones estratégicas.

Probar con muestras

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
Ejemplos D3.js Data Visualization
Ejemplos completos de visualización de datos D3.js incluyendo gráficos, mapas, animaciones y visualizaciones interactivas
preferred input family json
json
Muestras PDF
Muestras PDF generadas por herramientas 2026-02-01 a 2026-02-10
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é formato de datos admite la herramienta?

La herramienta requiere un formato JSON estructurado con campos de nombre, valor y un array opcional de hijos (children) para representar la jerarquía.

¿Puedo personalizar los colores del gráfico?

Sí, puedes elegir entre esquemas predefinidos como 'Océano' o 'Bosque', o seleccionar la opción 'Colores Personalizados' para ingresar tus propios códigos HEX.

¿Es posible ajustar el nivel de detalle mostrado?

Absolutamente. Puedes configurar el 'Nivel de Inicio' y la 'Profundidad Máxima' para enfocarte solo en las ramas específicas que deseas analizar.

¿El gráfico es interactivo?

Sí, el gráfico generado incluye tooltips y animaciones al pasar el cursor, lo que permite una exploración dinámica de los datos.

¿Qué formatos de valor puedo visualizar?

Puedes mostrar los datos como números simples, porcentajes, moneda o valores abreviados en miles (k).

Documentación de la API

Punto final de la solicitud

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

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
chartData textarea Sí Datos jerárquicos en formato JSON con nombre, valor y arrays de hijos opcionales
chartTitle text No Título que se mostrará encima del gráfico
colorScheme select No -
customColors textarea No Matriz JSON de colores hex (requiere selección de colores personalizados)
valueFormat select No -
chartWidth number No Ancho del gráfico en píxeles (mín: 400, máx: 1200)
chartHeight number No Altura del gráfico en píxeles (mín: 300, máx: 800)
startLevel number No Nivel de inicio a mostrar (0 = nivel raíz)
maxDepth number No Número máximo de niveles a mostrar
labelSize number No Tamaño de fuente para etiquetas en píxeles (mín: 8, máx: 16)
paddingSize number No Espaciado entre rectángulos en píxeles (mín: 0, máx: 10)
borderRadius number No Radio de esquina para rectángulos en píxeles (mín: 0, máx: 8)
strokeWidth number No Ancho del borde para rectángulos en píxeles (mín: 0, máx: 3)
backgroundColor color No Color de fondo para el contenedor del gráfico
strokeColor color No Color del borde para rectángulos
showLabels checkbox No Mostrar nombres de categoría dentro de rectángulos
showValues checkbox No Mostrar valores dentro de rectángulos
showPercentages checkbox No Mostrar porcentajes en lugar de valores absolutos
enableTooltip checkbox No Mostrar información detallada al pasar el cursor
chartOrientation select No -
hoverAnimation checkbox No Animar rectángulos al pasar el cursor

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-icicle-chart-generator": {
      "name": "icicle-chart-generator",
      "description": "Generar gráficos de heladas interactivos para visualización de datos jerárquicos, perfecto para mostrar estructuras de árbol, sistemas de archivos y jerarquías organizacionales",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=icicle-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]