# 矩形树图生成器

把层级数据渲染成矩形树图，用面积大小表示占比

> 标准页面: https://elysiatools.com/zh/tools/treemap-generator

- **分类:** Data Visualization

- **关键词:** 矩形树图, 层级, 占比, 面积, 可视化

## 概述

解析 JSON 层级结构（name + children + 叶子 value），计算每个节点的总值，并用 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 数据，确保叶子节点包含 value 属性，父节点包含 children 数组。
- 配置图表参数，如设置图表标题、选择配色方案（默认、暖色、冷色等），并决定是否显示标签、数值或百分比。
- 系统通过 squarified-treemap 算法自动计算各节点总值并平铺画布，实时生成高清晰度的矩形树图。

## 使用案例

- 企业财务预算与支出分析，直观展示各部门及子项目的资金占用比例。
- 磁盘空间占用分析，将文件夹层级与文件大小映射为矩形面积，快速定位大文件。
- 网站流量来源与渠道细分，分析不同渠道及二级来源带来的访问量占比。

## 常见问题

### 输入的 JSON 数据必须包含哪些字段？

每个节点必须包含 name 属性，叶子节点需要包含数值 value，而父节点则需要包含子节点列表 children。

### 矩形树图的颜色是如何分配的？

单元格会根据顶层分支进行着色，您可以通过“配色方案”选项切换默认、暖色、冷色、柔和或商务等不同的色彩风格。

### 为什么有些矩形没有显示标签或百分比？

当矩形面积过小时，为了防止文字重叠并保持图表美观，系统会自动隐藏部分小区域的文本标签。

### 边框宽度参数有什么作用？

边框宽度用于调整各个矩形区块之间的间距，设置合适的边框宽度可以更清晰地划分不同层级和分支的界限。

### 矩形树图是如何保证矩形接近正方形的？

工具内置了 squarified-treemap 算法，该算法在平铺画布时会尽量降低矩形的长宽比，使其接近正方形以方便视觉对比。

## 相关工具

- [环形图生成器](https://elysiatools.com/zh/tools/donut-chart-generator): 从数据生成可自定义的环形图（甜甜圈图），具有中央空间，非常适合显示比例数据
- [冰柱图生成器](https://elysiatools.com/zh/tools/icicle-chart-generator): 生成交互式冰柱图用于层级数据可视化，非常适合显示树形结构、文件系统和组织架构
- [组织架构图生成器](https://elysiatools.com/zh/tools/org-chart-maker): 把层级 JSON 数据渲染成带姓名与职位的垂直组织架构图
- [金字塔图生成器](https://elysiatools.com/zh/tools/pyramid-chart-generator): 生成金字塔图用于层级结构可视化，非常适合组织架构、需求层次和比例数据展示
- [树状图生成器](https://elysiatools.com/zh/tools/tree-diagram-generator): 从层级数据生成交互式树状图，支持自定义样式
- [多层饼图生成器](https://elysiatools.com/zh/tools/multi-level-pie-chart-generator): 创建同心圆多层饼图，支持层级关系显示和交互式钻取功能
- [极坐标面积图生成器](https://elysiatools.com/zh/tools/polar-area-chart): 生成交互式极坐标面积图来可视化圆形格式的数据，非常适合比较具有周期性模式或径向分布的类别
- [玫瑰图生成器](https://elysiatools.com/zh/tools/rose-chart): 生成美丽的南丁格尔玫瑰图（鸡冠花图）来通过角度和面积可视化数据，非常适合比较分析和历史数据展示

## 示例

- [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
- [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像
- [WebRTC 实时通信示例](https://elysiatools.com/zh/samples/webrtc-samples): 全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
- [D3.js 数据可视化示例](https://elysiatools.com/zh/samples/d3js-data-visualization): 全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化

## 相关内容

- [JSON Schema、Mock 数据与 API 夹具生成工具](https://elysiatools.com/zh/hubs/json-generate): 围绕JSON Schema 生成、Mock 负载构建与 API 夹具准备整理的一组工具。
- [JSON 转强类型代码生成器（TypeScript、Go、Rust、Kotlin、Java、C#）](https://elysiatools.com/zh/hubs/json-to-typed-code-generators): 粘贴 JSON 即可获得可直接使用的类型：TypeScript 接口、Go 结构体、Rust serde 结构体、Kotlin 数据类、Java 类、C# 类、Zod schema 和推断的 JSON Schema。
- [JSON 交换与格式翻译工具](https://elysiatools.com/zh/hubs/json-convert): 在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
- [JSON 检查、对比与转换工具](https://elysiatools.com/zh/hubs/json-utility): 把 JSON 格式化、差异对比、路径检查、Schema 校验、合并、转换和导出工具集中到一个专题中，适合 API 与数据处理流程。