Категории

← View All Tools

Генератор Ледяных Диаграмм

Создавать интерактивные ледяные диаграммы для иерархической визуализации данных, идеально подходящие для отображения древовидных структур, файловых систем и организационных иерархий

Иерархические данные в формате JSON с полями имя, значение и необязательные массивы дочерних элементов

Заголовок, который будет отображаться над диаграммой

Массив JSON шестнадцатеричных цветов (требует выбора пользовательских цветов)

Ширина диаграммы в пикселях (мин: 400, макс: 1200)

Высота диаграммы в пикселях (мин: 300, макс: 800)

Начальный уровень для отображения (0 = корневой уровень)

Максимальное количество уровней для отображения

Размер шрифта для меток в пикселях (мин: 8, макс: 16)

Расстояние между прямоугольниками в пикселях (мин: 0, макс: 10)

Радиус угла для прямоугольников в пикселях (мин: 0, макс: 8)

Ширина границы для прямоугольников в пикселях (мин: 0, макс: 3)

Цвет фона для контейнера диаграммы

Цвет границы для прямоугольников

Отображать имена категорий внутри прямоугольников

Отображать значения внутри прямоугольников

Показывать проценты вместо абсолютных значений

Показывать подробную информацию при наведении

Анимировать прямоугольники при наведении

Ключевые факты

Категория
Data Visualization
Типы входных данных
textarea, text, select, number, color, checkbox
Тип результата
html
Покрытие примерами
4
API доступен
Yes

Обзор

Генератор ледяных диаграмм позволяет быстро преобразовывать иерархические данные в интерактивные визуализации, идеально подходящие для анализа древовидных структур, файловых систем и организационных иерархий.

Когда использовать

  • •Для наглядного представления вложенных данных и структуры папок.
  • •При необходимости анализа иерархии управления внутри организации.
  • •Для визуализации распределения ресурсов или весов в сложных древовидных системах.

Как это работает

  • •Введите иерархические данные в формате JSON, указав имена узлов, их значения и дочерние элементы.
  • •Настройте внешний вид диаграммы, выбрав цветовую схему, ориентацию и параметры отображения меток.
  • •Сгенерируйте интерактивный график, который поддерживает всплывающие подсказки и анимацию при наведении.

Сценарии использования

Визуализация структуры файловой системы для анализа занимаемого места.
Построение интерактивных организационных диаграмм компании.
Анализ категорий и подкатегорий товаров в интернет-магазине.

Примеры

1. Визуализация структуры папок

Системный администратор
Контекст
Необходимо проанализировать распределение дискового пространства на сервере.
Проблема
Сложно оценить, какие подпапки занимают больше всего места в древовидной структуре.
Как использовать
Загрузить JSON-структуру файловой системы, выбрать цветовую схему 'Океан' и включить отображение значений.
Пример конфигурации
{"chartTitle": "Анализ диска", "colorScheme": "ocean", "showValues": true, "chartOrientation": "vertical"}
Результат
Интерактивная диаграмма, где размер прямоугольников пропорционален объему данных, что позволяет мгновенно найти «тяжелые» папки.

2. Организационная структура компании

HR-менеджер
Контекст
Требуется представить структуру отделов и количество сотрудников в каждом из них.
Проблема
Текстовые списки сотрудников плохо воспринимаются руководством.
Как использовать
Подготовить JSON с иерархией отделов, настроить 'Максимальную глубину' на 3 уровня и выбрать 'Фиолетовую' цветовую схему.
Пример конфигурации
{"chartTitle": "Структура компании", "colorScheme": "purple", "maxDepth": 3, "showLabels": true}
Результат
Понятная иерархическая схема, наглядно демонстрирующая подчиненность отделов и численность персонала.

Проверить на примерах

json
Примеры Расширенного Применения Grafana
Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов
preferred input family json
json
Примеры Анализа Логов ELK Stack
Комплексные примеры ELK Stack для агрегации, обработки и визуализации логов в распределенных системах
preferred input family json
json
Примеры D3.js Визуализации Данных
Комплексные примеры визуализации данных D3.js, включая диаграммы, карты, анимации и интерактивные визуализации
preferred input family json
json
PDF Примеры
PDF примеры, созданные инструментами 2026-02-01..2026-02-10
preferred input family json
json

Связанные хабы

Инструменты Json для Generate
Изучите 33 инструментов json для сценариев generate и быстро сравните близкие утилиты.
Инструменты Json для Convert
Изучите 100 инструментов json для сценариев convert и быстро сравните близкие утилиты.
Инструменты Json
Изучите 43 инструментов json для сценариев utility и быстро сравните близкие утилиты.
Инструменты Json для Format
Изучите 6 инструментов json для сценариев format и быстро сравните близкие утилиты.

FAQ

В каком формате нужно предоставлять данные?

Данные должны быть представлены в формате JSON с полями 'name' (имя), 'value' (значение) и массивом 'children' для вложенных элементов.

Можно ли настроить цвета диаграммы?

Да, вы можете выбрать одну из предустановленных цветовых схем или задать собственные цвета с помощью массива HEX-кодов.

Поддерживает ли инструмент интерактивность?

Да, диаграммы включают всплывающие подсказки с подробной информацией и анимацию при наведении на элементы.

Какую максимальную глубину данных можно отобразить?

Инструмент позволяет настраивать глубину отображения до 10 уровней иерархии.

Можно ли менять ориентацию диаграммы?

Да, вы можете переключаться между горизонтальной (сверху вниз) и вертикальной (слева направо) ориентацией.

Документация API

Конечная точка запроса

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

Параметры запроса

Имя параметра Тип Обязательно Описание
chartData textarea Да Иерархические данные в формате JSON с полями имя, значение и необязательные массивы дочерних элементов
chartTitle text Нет Заголовок, который будет отображаться над диаграммой
colorScheme select Нет -
customColors textarea Нет Массив JSON шестнадцатеричных цветов (требует выбора пользовательских цветов)
valueFormat select Нет -
chartWidth number Нет Ширина диаграммы в пикселях (мин: 400, макс: 1200)
chartHeight number Нет Высота диаграммы в пикселях (мин: 300, макс: 800)
startLevel number Нет Начальный уровень для отображения (0 = корневой уровень)
maxDepth number Нет Максимальное количество уровней для отображения
labelSize number Нет Размер шрифта для меток в пикселях (мин: 8, макс: 16)
paddingSize number Нет Расстояние между прямоугольниками в пикселях (мин: 0, макс: 10)
borderRadius number Нет Радиус угла для прямоугольников в пикселях (мин: 0, макс: 8)
strokeWidth number Нет Ширина границы для прямоугольников в пикселях (мин: 0, макс: 3)
backgroundColor color Нет Цвет фона для контейнера диаграммы
strokeColor color Нет Цвет границы для прямоугольников
showLabels checkbox Нет Отображать имена категорий внутри прямоугольников
showValues checkbox Нет Отображать значения внутри прямоугольников
showPercentages checkbox Нет Показывать проценты вместо абсолютных значений
enableTooltip checkbox Нет Показывать подробную информацию при наведении
chartOrientation select Нет -
hoverAnimation checkbox Нет Анимировать прямоугольники при наведении

Формат ответа

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

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-icicle-chart-generator": {
      "name": "icicle-chart-generator",
      "description": "Создавать интерактивные ледяные диаграммы для иерархической визуализации данных, идеально подходящие для отображения древовидных структур, файловых систем и организационных иерархий",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=icicle-chart-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]