# Построитель treemap Строит treemap из иерархических данных, используя площадь для отображения долей > Каноническая страница: https://elysiatools.com/ru/tools/treemap-generator - **Категория:** Data Visualization - **Ключевые слова:** treemap, иерархия, доля, площадь, визуализация ## Обзор Разбирает JSON-иерархию (name + children + значение листа), считает итоговое значение каждого узла и покрывает холст алгоритмом squarified-treemap, чтобы прямоугольники были близки к квадратам. Ячейки окрашены по ветвям верхнего уровня и могут показывать метки, значения и проценты. ## Входные данные - **Иерархические данные** (textarea): JSON hierarchy: each node has a name, optional value for leaves, optional children - **Заголовок диаграммы** (text): Enter chart title... - **Цветовая схема** (select) - **Показать метки** (checkbox) - **Показать значения** (checkbox) - **Показать проценты** (checkbox) - **Ширина рамки** (range) ## Когда использовать - Необходимо наглядно показать структуру распределения бюджета, расходов или ресурсов компании по различным отделам и проектам. - Требуется проанализировать соотношение долей сложных иерархических данных, таких как категории товаров в каталоге. - Нужно быстро подготовить векторную графику на основе сырых данных в формате JSON для отчета или презентации. ## Как это работает - Вставьте иерархические данные в формате JSON, где каждый узел содержит имя (name), а конечные элементы — числовые значения (value). - Настройте внешний вид диаграммы: укажите заголовок, выберите цветовую схему (например, пастельную или деловую) и задайте ширину рамок. - Включите или отключите отображение текстовых меток, точных числовых значений и процентных долей для каждого прямоугольника. - Инструмент применит алгоритм squarified-treemap для оптимального заполнения пространства и сгенерирует готовую интерактивную HTML-диаграмму. ## Сценарии использования - Визуализация структуры корпоративного бюджета с детализацией по департаментам и отдельным проектам. - Анализ структуры продаж интернет-магазина по категориям, подкатегориям и конкретным товарам. - Оценка распределения дискового пространства или серверных ресурсов между различными сервисами и пользователями. ## Частые вопросы ### Какой формат данных поддерживает инструмент? Инструмент принимает данные в формате JSON с древовидной структурой, где у каждого элемента есть имя (name), а также ветви (children) или числовые значения (value). ### Как рассчитывается размер прямоугольников? Площадь каждого прямоугольника пропорциональна его значению (value). Для родительских узлов значение рассчитывается автоматически как сумма всех дочерних элементов. ### Можно ли скрыть проценты или числовые значения на диаграмме? Да, вы можете гибко управлять отображением меток, значений и процентов с помощью соответствующих флажков в настройках. ### Что делает алгоритм squarified-treemap? Этот алгоритм располагает прямоугольники так, чтобы их соотношение сторон было максимально близко к квадрату, что делает диаграмму более читаемой. ### Какие цветовые схемы доступны для оформления? Вы можете выбрать одну из пяти встроенных цветовых схем: по умолчанию, тёплую, холодную, пастельную или деловую. ## Связанные инструменты - [Генератор Кольцевой Диаграммы](https://elysiatools.com/ru/tools/donut-chart-generator): Генерировать настраиваемые кольцевые диаграммы из данных с различными опциями стилизации, идеально подходит для отображения пропорций с центральным пространством - [Генератор Ледяных Диаграмм](https://elysiatools.com/ru/tools/icicle-chart-generator): Создавать интерактивные ледяные диаграммы для иерархической визуализации данных, идеально подходящие для отображения древовидных структур, файловых систем и организационных иерархий - [Построитель организационной схемы](https://elysiatools.com/ru/tools/org-chart-maker): Строит вертикальную организационную схему с именами и должностями из иерархического JSON - [Генератор Пирамидальной Диаграммы](https://elysiatools.com/ru/tools/pyramid-chart-generator): Генерировать пирамидальные диаграммы для визуализации иерархической структуры, идеально для организационных схем, иерархических уровней и пропорциональных данных - [Генератор Древовидных Диаграмм](https://elysiatools.com/ru/tools/tree-diagram-generator): Генерировать интерактивные древовидные диаграммы из иерархических данных с настраиваемым стилем - [Генератор Многоуровневого Кругового Графика](https://elysiatools.com/ru/tools/multi-level-pie-chart-generator): Создание концентрических многоуровневых круговых графиков с иерархическими отношениями и интерактивной функцией детализации - [Генератор Полярной Диаграммы Областей](https://elysiatools.com/ru/tools/polar-area-chart): Генерировать интерактивные полярные диаграммы областей для визуализации данных в круговом формате, идеально подходит для сравнения категорий с циклическими паттернами или радиальными распределениями - [Генератор Розовой Диаграммы](https://elysiatools.com/ru/tools/rose-chart): Генерировать красивые розовые диаграммы Найтингейл (диаграммы гребешка) для визуализации данных через угол и площадь, идеально подходит для сравнительного анализа и представления исторических данных ## Примеры - [Примеры Расширенного Применения Grafana](https://elysiatools.com/ru/samples/grafana-samples): Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов - [Примеры QR-кодов](https://elysiatools.com/ru/samples/qrcode-samples): Примерные изображения QR-кодов для тестирования инструментов чтения и генерации QR-кодов - [Примеры Коммуникации WebRTC в Реальном Времени](https://elysiatools.com/ru/samples/webrtc-samples): Комплексные примеры WebRTC для P2P аудио/видео коммуникации, каналов данных, обмена экраном и сервера сигнализации - [Примеры D3.js Визуализации Данных](https://elysiatools.com/ru/samples/d3js-data-visualization): Комплексные примеры визуализации данных D3.js, включая диаграммы, карты, анимации и интерактивные визуализации ## Связанные материалы - [Генераторы JSON-схем, mock-данных и API-fixture](https://elysiatools.com/ru/hubs/json-generate): Подборка инструментов для генерации JSON-схем, сборки mock-payload и подготовки API-fixture в одном хабе. - [Генераторы типизированного кода из JSON (TypeScript, Go, Rust, Kotlin, Java, C#)](https://elysiatools.com/ru/hubs/json-to-typed-code-generators): Вставьте JSON и получите готовые типы: интерфейсы TypeScript, структуры Go, структуры Rust с serde, data-классы Kotlin, классы Java, классы C#, схемы Zod и выведенную JSON Schema. - [Инструменты JSON-обмена и перевода форматов](https://elysiatools.com/ru/hubs/json-convert): Сравните инструменты преобразования JSON для CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN и других структурированных форматов в одном хабе. - [Инструменты для проверки, diff и преобразования JSON](https://elysiatools.com/ru/hubs/json-utility): Соберите в одном хабе инструменты для форматирования JSON, сравнения версий, проверки путей, валидации схем, объединения файлов и преобразования данных для API и data workflows.