分类

← View All Tools

分组柱状图生成器

生成分组柱状图，用于并排比较多个类别，非常适合多类别对比和比较分析

带有分类和系列数组的多系列数据。每个系列的数据点数量应与分类数量相同。

显示在图表上方的标题

不同系列的颜色（逗号分隔的十六进制颜色）。留空使用默认颜色。

图表容器的背景颜色

网格线的颜色

单个柱子的像素宽度（过大时自动调整）

不同组之间的像素间距

图表的像素高度

坐标轴最大值（留空自动缩放）

坐标轴最小值（留空自动检测）

X轴的标签

Y轴的标签

显示网格线以便更好阅读

在柱子上或附近显示实际数值

在图表下方显示图例

关键信息

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

概览

分组柱状图生成器是一款高效的数据可视化工具，旨在帮助用户通过并排对比的方式，直观呈现多系列数据在不同类别下的表现，非常适合进行多维度的数据分析与趋势比较。

适用场景

  • •需要并排比较不同产品、部门或时间段的业绩表现时。
  • •在演示文稿中展示多系列数据的分布差异时。
  • •进行复杂的类别对比分析，以快速识别数据间的增长或波动趋势时。

工作原理

  • •在输入框中按照 JSON 格式填入分类名称及各系列的具体数值。
  • •根据需求选择图表方向（垂直或水平）并设置标题、轴标签等基础信息。
  • •通过自定义颜色、柱子宽度、组间距及网格线等参数，调整图表视觉样式。
  • •点击生成按钮，即可实时预览并获取专业的分组柱状图。

使用场景

季度销售业绩对比：展示不同产品线在四个季度的销售额变化。
市场调研分析：对比不同年龄段用户对多个品牌产品的偏好程度。
项目进度监控：并排展示多个团队在不同任务阶段的完成进度。

用户案例

1. 年度产品销售对比

市场分析师
背景原因
分析师需要向管理层汇报三款核心产品在四个季度的销售表现，以便评估市场策略。
解决问题
需要一个清晰的对比图表，直观展示每款产品在不同季度的销售额差异。
如何使用
在图表数据框中输入包含四个季度分类及三款产品系列的数据，设置图表标题并开启图例。
示例配置
{"categories": ["Q1", "Q2", "Q3", "Q4"], "series": [{"name": "产品A", "data": [120, 150, 180, 200]}, {"name": "产品B", "data": [90, 110, 130, 160]}, {"name": "产品C", "data": [70, 80, 100, 120]}]}
效果
生成了一张包含图例和数值标注的垂直分组柱状图，清晰展示了产品A的持续增长趋势。

用 Samples 测试

data-visualization
Chart.js 图表库示例
全面的Chart.js示例，包括各种图表类型、自定义选项、动画和响应式设计
title token chart
sample
Helm Chart 示例
完整的 Helm 图表示例，包含模板、值文件、依赖关系和包管理配置
title token chart
sample
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
keywords data,visualization
sample
ELK Stack 日志分析示例
全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化
keywords analysis,visualization
sample

相关专题

JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
DesignGenerate工具专题
探索 19 个围绕 design 的 generate 工作流工具，快速找到相近能力。
PdfGenerate工具专题
探索 10 个围绕 pdf 的 generate 工作流工具，快速找到相近能力。
AudioGenerate工具专题
探索 8 个围绕 audio 的 generate 工作流工具，快速找到相近能力。

常见问题

我可以自定义柱状图的颜色吗？

可以，您可以在“柱子颜色”选项中输入逗号分隔的十六进制颜色代码（如 #3b82f6,#10b981），系统将按顺序应用到各个系列。

支持哪些图表方向？

目前支持垂直柱状图和水平柱状图两种布局，您可以根据数据的类别数量和展示空间需求进行选择。

如何设置坐标轴的范围？

您可以在“最大值”和“最小值”选项中手动输入数值。若留空，系统将根据数据自动计算并缩放坐标轴。

图表中的数值可以隐藏吗？

可以，通过取消勾选“显示数值”选项，即可隐藏柱子上的具体数字，使图表外观更加简洁。

生成的图表支持导出吗？

本工具生成的是 HTML 格式的交互式图表，您可以直接在页面查看，或通过截图等方式保存使用。

API 文档

请求端点

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

请求参数

参数名 类型 必填 描述
chartData textarea 是 带有分类和系列数组的多系列数据。每个系列的数据点数量应与分类数量相同。
chartTitle text 否 显示在图表上方的标题
chartType select 否 -
barColors text 否 不同系列的颜色（逗号分隔的十六进制颜色）。留空使用默认颜色。
backgroundColor color 否 图表容器的背景颜色
gridColor color 否 网格线的颜色
barWidth number 否 单个柱子的像素宽度（过大时自动调整）
groupSpacing number 否 不同组之间的像素间距
chartHeight number 否 图表的像素高度
maxValue number 否 坐标轴最大值（留空自动缩放）
minValue number 否 坐标轴最小值（留空自动检测）
xAxisLabel text 否 X轴的标签
yAxisLabel text 否 Y轴的标签
showGrid checkbox 否 显示网格线以便更好阅读
showValues checkbox 否 在柱子上或附近显示实际数值
valuePosition select 否 -
showLegend checkbox 否 在图表下方显示图例

响应格式

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

AI MCP 文档

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

{
  "mcpServers": {
    "elysiatools-grouped-bar-chart": {
      "name": "grouped-bar-chart",
      "description": "生成分组柱状图，用于并排比较多个类别，非常适合多类别对比和比较分析",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=grouped-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]