Elysia Tools
导航
Data Visualization
把层级数据渲染成矩形树图，用面积大小表示占比
详情
解析 JSON 层级结构（name + children + 叶子 value），计算每个节点的总值，并用 squarified-treemap 算法平铺画布，使矩形尽量接近正方形。各单元格按顶层分支着色，可显示标签、数值和百分比。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
矩形树图生成器是一款在线数据可视化工具，能够将复杂的 JSON 层级结构数据快速渲染为直观的矩形树图。它采用 squarified-treemap 算法平铺画布，通过矩形面积的大小直观展示各节点数据的占比关系，并支持自定义配色方案、标签、数值及百分比显示，帮助您轻松理清层级数据的分布规律。
背景
财务部门需要向管理层汇报年度预算在各个部门及子团队的分配情况，传统的表格不够直观。
问题
如何清晰展示不同部门（如工程部、市场部、销售部）及其子渠道的预算占比？
如何使用
在“层级数据”中输入包含部门预算的 JSON 数据，设置图表标题为“Annual Budget”，勾选“显示百分比”，并将配色方案设为“business”。
{
"name": "Budget",
"children": [
{ "name": "Engineering", "value": 120 },
{ "name": "Marketing", "value": 80 },
{ "name": "Sales", "children": [
{ "name": "Direct", "value": 50 },
{ "name": "Partner", "value": 30 }
]}
]
}结果
生成一张以商务蓝绿调为主的矩形树图，工程部和销售部因预算高而占用更大面积，且直接标明了各自的百分比。
背景
运营团队需要分析本季度网站的流量构成，找出最主要的引流渠道。
问题
流量渠道分为付费广告、自然搜索和社交媒体，且各渠道下还有细分来源，需要一目了然地对比它们的贡献度。
如何使用
将流量层级数据整理为 JSON 格式填入输入框，开启“显示数值”与“显示百分比”，选择“warm”暖色配色方案。
{
"name": "Traffic",
"children": [
{ "name": "Organic Search", "value": 5000 },
{ "name": "Paid Ads", "children": [
{ "name": "Search Ads", "value": 2500 },
{ "name": "Display Ads", "value": 1500 }
]},
{ "name": "Social Media", "value": 1000 }
]
}每个节点必须包含 name 属性，叶子节点需要包含数值 value，而父节点则需要包含子节点列表 children。
单元格会根据顶层分支进行着色，您可以通过“配色方案”选项切换默认、暖色、冷色、柔和或商务等不同的色彩风格。
当矩形面积过小时，为了防止文字重叠并保持图表美观，系统会自动隐藏部分小区域的文本标签。
边框宽度用于调整各个矩形区块之间的间距，设置合适的边框宽度可以更清晰地划分不同层级和分支的界限。
工具内置了 squarified-treemap 算法，该算法在平铺画布时会尽量降低矩形的长宽比，使其接近正方形以方便视觉对比。
结果
渲染出暖色调的矩形树图，自然搜索（Organic Search）占据最大矩形，付费广告下的细分来源比例也清晰呈现。