分类

← View All Tools

堆叠条形图生成器

生成交互式堆叠条形图来可视化分类数据组成，非常适合跨类别比较多个数据系列

堆叠条形图的JSON格式数据，包含分类、系列和数值字段

显示在图表上方的标题

十六进制颜色JSON数组（需要选择自定义颜色）

图表的像素高度（最小：300，最大：800）

条形之间的间距（0.1 - 0.5）

图表容器的背景颜色

在条形上显示数值或百分比

显示系列的颜色图例

显示水平网格线

图表加载时动画显示条形

在条形上显示百分比而不是数值

悬停时显示详细信息

关键信息

分类
Data Visualization
输入类型
textarea, text, select, number, color, checkbox
输出类型
html
样本覆盖
4
支持 API
Yes

概览

堆叠条形图生成器是一款在线数据可视化工具，能将您提供的分类数据快速转换为清晰、交互式的堆叠条形图。它直观展示各组成部分在整体中的占比，非常适合比较不同类别下多个数据系列的构成情况。

适用场景

  • •需要比较不同类别（如季度、地区、部门）中多个组成部分（如产品线、成本项、来源渠道）的数值或占比时。
  • •希望直观展示数据构成随时间或条件变化的趋势时。
  • •需要快速生成专业、可交互的图表用于报告、演示或网页嵌入时。

工作原理

  • •在“图表数据”文本框中，按照指定的JSON格式输入您的分类、系列和数值数据。
  • •根据需要配置图表标题、配色方案、数值格式、高度等外观选项。
  • •点击生成按钮，工具将立即渲染出交互式堆叠条形图，支持悬停查看详情。
  • •您可以直接在页面上查看图表，或通过浏览器功能将其保存为图片。

使用场景

市场分析：比较不同市场区域中各产品线的销售额构成。
销售报告：展示各销售团队在不同季度完成的业绩占比。
项目管理：可视化各项目阶段中不同资源类型（人力、物料、时间）的投入分布。

用户案例

1. 季度销售业绩对比

市场分析师
背景原因
公司需要一份报告，展示Q1和Q2期间，线上、线下、合作伙伴三个渠道对总销售额的贡献变化。
解决问题
原始数据是表格形式，难以直观看出各渠道在总销售额中的占比及季度间的变化趋势。
如何使用
将整理好的渠道、季度、销售额数据按JSON格式粘贴到“图表数据”输入框中。
示例配置
[{"category": "Q1", "series": "线上", "value": 150000}, {"category": "Q1", "series": "线下", "value": 200000}, {"category": "Q1", "series": "合作伙伴", "value": 50000}, {"category": "Q2", "series": "线上", "value": 180000}, {"category": "Q2", "series": "线下", "value": 190000}, {"category": "Q2", "series": "合作伙伴", "value": 80000}]
效果
生成一张包含Q1和Q2两个条形的堆叠图，每个条形清晰显示三个渠道的销售额构成，可以快速看出线上渠道占比增长，线下渠道占比略有下降。

2. 网站流量来源分析

背景原因
运营团队需要分析本月网站流量的主要来源构成，包括直接访问、搜索引擎、社交媒体和外部链接。
解决问题
数据分散在多个报表中，需要合并并直观展示各来源的贡献比例，以评估渠道效果。
如何使用
将合并后的流量来源数据（来源名称、访问量）整理成JSON格式并输入。
效果
生成一个单一的堆叠条形图，清晰展示出搜索引擎是最大流量来源，其次是社交媒体，帮助团队快速聚焦优化重点。

用 Samples 测试

json
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
preferred input family json
json
D3.js 数据可视化示例
全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化
preferred input family json
json
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family json
json
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family json
json

相关专题

JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
Json 工具专题
探索 43 个围绕 json 的 utility 工作流工具，快速找到相近能力。
JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
JsonFormat工具专题
探索 6 个围绕 json 的 format 工作流工具，快速找到相近能力。

常见问题

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

数据必须为JSON数组格式，每个对象需包含“category”（分类）、“series”（系列）和“value”（数值）三个字段。

生成的图表是静态图片还是交互式的？

生成的是交互式HTML图表。您可以将鼠标悬停在条形上查看具体数值，并可通过浏览器缩放功能调整视图。

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

可以。您可以从预设的配色方案中选择，或在选择“自定义颜色”后，输入十六进制颜色代码数组来完全自定义系列颜色。

如何将图表用于我的报告或网站？

生成后，您可以使用浏览器的“另存为”功能将整个页面保存为HTML文件，或使用截图工具将图表区域保存为PNG/JPG图片。

这个工具是免费的吗？

是的，这是一个完全免费的在线工具，无需注册即可使用所有功能。

API 文档

请求端点

POST /zh/api/tools/stacked-bar-chart

请求参数

参数名 类型 必填 描述
chartData textarea 是 堆叠条形图的JSON格式数据，包含分类、系列和数值字段
chartTitle text 否 显示在图表上方的标题
colorScheme select 否 -
customColors textarea 否 十六进制颜色JSON数组（需要选择自定义颜色）
valueFormat select 否 -
chartHeight number 否 图表的像素高度（最小：300，最大：800）
barSpacing number 否 条形之间的间距（0.1 - 0.5）
backgroundColor color 否 图表容器的背景颜色
showValues checkbox 否 在条形上显示数值或百分比
showLegend checkbox 否 显示系列的颜色图例
showGrid checkbox 否 显示水平网格线
showAnimation checkbox 否 图表加载时动画显示条形
showPercentage checkbox 否 在条形上显示百分比而不是数值
enableTooltip checkbox 否 悬停时显示详细信息

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-stacked-bar-chart": {
      "name": "stacked-bar-chart",
      "description": "生成交互式堆叠条形图来可视化分类数据组成，非常适合跨类别比较多个数据系列",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stacked-bar-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]