# 冰柱图生成器

生成交互式冰柱图用于层级数据可视化，非常适合显示树形结构、文件系统和组织架构

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

- **分类:** Data Visualization

- **关键词:** 冰柱图, 层级图, 树形可视化, 矩形树图, 嵌套数据, 组织架构图, 文件系统, 旭日图

## 概述

冰柱图生成器是一款专业的数据可视化工具，能够将您提供的层级JSON数据快速转换为清晰、交互式的冰柱图。它直观展示数据的树状结构与比例关系，是分析组织架构、文件目录或任何嵌套数据的理想选择。

## 输入项

- **层级数据** (textarea): JSON格式的层级数据，包含名称、数值和可选的子数组
- **图表标题** (text): 显示在图表上方的标题
- **配色方案** (select): 选择配色方案
- **自定义颜色** (textarea): 十六进制颜色JSON数组（需要选择自定义颜色）
- **数值格式** (select): 选择数值格式
- **图表宽度** (number): 图表的像素宽度（最小：400，最大：1200）
- **图表高度** (number): 图表的像素高度（最小：300，最大：800）
- **起始层级** (number): 显示的起始层级（0 = 根层级）
- **最大深度** (number): 显示的最大层级数
- **标签大小** (number): 标签的字体大小（最小：8，最大：16）
- **间距大小** (number): 矩形之间的间距（最小：0，最大：10）
- **边框圆角** (number): 矩形的圆角半径（最小：0，最大：8）
- **边框宽度** (number): 矩形的边框宽度（最小：0，最大：3）
- **背景颜色** (color): 图表容器的背景颜色
- **边框颜色** (color): 矩形的边框颜色
- **显示标签** (checkbox): 在矩形内显示类别名称
- **显示数值** (checkbox): 在矩形内显示数值
- **显示百分比** (checkbox): 显示百分比而不是绝对值
- **启用工具提示** (checkbox): 悬停时显示详细信息
- **图表方向** (select): 选择图表方向
- **悬停动画** (checkbox): 悬停时动画显示矩形

## 适用场景

- 需要直观展示公司部门、团队或项目组的层级汇报关系时。
- 希望可视化磁盘空间占用、项目文件目录等具有嵌套结构的文件系统时。
- 分析销售区域、产品分类等具有多级分类的数据占比与构成时。

## 工作原理

- 在“层级数据”文本框中，输入或粘贴符合格式要求的JSON数据，该数据需包含名称、数值及可选的子节点数组。
- 根据需要配置图表选项，如选择配色方案、设置图表标题、调整尺寸、定义数值显示格式（数字、百分比、货币等）。
- 工具将自动解析数据并生成交互式冰柱图，您可以通过悬停查看详细信息，并可调整起始层级和最大深度来聚焦特定部分。
- 生成的图表可直接在页面查看，支持交互探索。

## 使用案例

- 可视化公司组织架构，清晰展示从CEO到各部门、再到具体员工的汇报关系与团队规模。
- 分析服务器或本地磁盘的存储空间，以冰柱图形式展示各文件夹及其子文件夹的空间占用比例。
- 管理电商平台的商品类目，通过层级图表查看一级类目、二级类目下的商品数量与销售占比。

## 常见问题

### 输入的JSON数据格式有什么要求？

数据必须是有效的JSON对象，包含“name”（名称）和“value”（数值）键，以及可选的“children”（子节点）数组，用于定义层级关系。

### 可以自定义图表的颜色吗？

可以。您可以从预设的配色方案（如海洋、森林、日落）中选择，或在选择“自定义颜色”后，输入十六进制颜色代码数组来完全自定义。

### 生成的图表支持哪些交互功能？

支持悬停显示详细信息（工具提示），并可通过设置“起始层级”和“最大深度”来控制图表的显示范围，聚焦于您关心的数据层级。

### 数值可以显示为百分比或货币格式吗？

可以。在“数值格式”选项中，您可以选择“数字”、“百分比”、“货币（$）”或“千（k）”等不同格式来展示数据。

### 图表的尺寸可以调整吗？

可以。您可以分别设置图表的宽度（400-1200像素）和高度（300-800像素），以适应不同的展示空间需求。

## 相关工具

- [柱状图生成器](https://elysiatools.com/zh/tools/bar-chart-generator): 从数据生成可自定义的柱状图，支持多种样式选项
- [气泡图生成器](https://elysiatools.com/zh/tools/bubble-chart-generator): 从数据生成可自定义的气泡图，支持三个维度（X、Y、大小）的可视化
- [对比条形图生成器](https://elysiatools.com/zh/tools/comparison-bar-chart): 生成背对背条形图，用于正负值对比展示，非常适合数据集对比分析
- [环形图生成器](https://elysiatools.com/zh/tools/donut-chart-generator): 从数据生成可自定义的环形图（甜甜圈图），具有中央空间，非常适合显示比例数据
- [漏斗图生成器](https://elysiatools.com/zh/tools/funnel-chart-generator): 从数据生成可自定义的漏斗图，非常适合显示转化率、销售管道和流程
- [甘特图生成器](https://elysiatools.com/zh/tools/gantt-chart-generator): 创建专业甘特图，支持任务时间线、依赖关系、进度跟踪和里程碑标记
- [仪表盘图生成器](https://elysiatools.com/zh/tools/gauge-chart-generator): 从数据生成可自定义的仪表盘图（速度计图），非常适合显示KPI、指标和性能数据
- [热力图生成器](https://elysiatools.com/zh/tools/heatmap-generator): 从数据生成可自定义的热力图，非常适合可视化数据密度、相关性和模式

## 示例

- [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
- [D3.js 数据可视化示例](https://elysiatools.com/zh/samples/d3js-data-visualization): 全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化
- [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像
- [ELK Stack 日志分析示例](https://elysiatools.com/zh/samples/elk-stack-samples): 全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化

## 相关内容

- [图表与示意图生成器](https://elysiatools.com/zh/hubs/chart-diagram-generators): 在一个可视化页面里用你自己的数据生成柱状图、折线图、饼图、环形图、散点图、雷达图、甘特图、桑基图、热力图、漏斗图、树状图等数十种图表与示意图。
- [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 等结构化格式之间的转换工具。