Data Visualization
生成交互式冰柱图用于层级数据可视化，非常适合显示树形结构、文件系统和组织架构
用三种语言从你的代码中调用此工具。
curl -X POST 'https://api.elysiatools.com/zh/api/tools/icicle-chart-generator' \
-H 'Content-Type: application/json' \
-d '{"chartData":"JSON format:\n{\n "name": "Root",\n "value": 100,\n "children": [\n {\n "name": "Branch A",\n "value": 60,\n "children": [\n {"name": "Leaf A1", "value": 30},\n {"name": "Leaf A2", "value": 30}\n ]\n }\n ]\n}","chartTitle":"输入图表标题...","colorScheme":"ocean","customColors":"[\"#FF6B6B\", \"#4ECDC4\", \"#45B7D1\", \"#96CEB4\"]","valueFormat":"number","chartWidth":"600","chartHeight":"500","startLevel":"0","maxDepth":"3","labelSize":"12","paddingSize":"2","borderRadius":"4","strokeWidth":"1","backgroundColor":"#ffffff","strokeColor":"#ffffff","showLabels":true,"showValues":true,"showPercentages":false,"enableTooltip":true,"chartOrientation":"horizontal","hoverAnimation":true}'以 JSON 形式 POST 提交输入参数。文件类型参数需先单独上传。
POST https://api.elysiatools.com/zh/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 | 否 | 悬停时动画显示矩形 |
HTML 结果
{
"result": "<div>Processed HTML content</div>",
"error": "Error message (optional)",
"message": "Notification message (optional)",
"metadata": {
"key": "value"
}
}将此工具加入你的 Model Context Protocol 服务，让 AI 智能体可以列出并调用它。
将以下内容加入你的 MCP 客户端配置：
{
"mcpServers": {
"elysiatools-icicle-chart-generator": {
"name": "icicle-chart-generator",
"description": "生成交互式冰柱图用于层级数据可视化，非常适合显示树形结构、文件系统和组织架构",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=icicle-chart-generator",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}连接到 SSE 端点后，列出已开放的工具：
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}通过工具 id 调用，参数由其参数表构建：
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "icicle-chart-generator",
"arguments": {
"chartData": "JSON format:\n{\n "name": "Root",\n "value": 100,\n "children": [\n {\n "name": "Branch A",\n "value": 60,\n "children": [\n {"name": "Leaf A1", "value": 30},\n {"name": "Leaf A2", "value": 30}\n ]\n }\n ]\n}",
"chartTitle": "输入图表标题...",
"colorScheme": "ocean",
"customColors": "[\"#FF6B6B\", \"#4ECDC4\", \"#45B7D1\", \"#96CEB4\"]",
"valueFormat": "number",
"chartWidth": "600",
"chartHeight": "500",
"startLevel": "0",
"maxDepth": "3",
"labelSize": "12",
"paddingSize": "2",
"borderRadius": "4",
"strokeWidth": "1",
"backgroundColor": "#ffffff",
"strokeColor": "#ffffff",
"showLabels": true,
"showValues": true,
"showPercentages": false,
"enableTooltip": true,
"chartOrientation": "horizontal",
"hoverAnimation": true
}
}
}有问题或反馈？请联系 [email protected]