分类

← View All Tools

柱状图生成器

从数据生成可自定义的柱状图，支持多种样式选项

图表数据。可以是JSON数组或简单的标签:值对

显示在图表上方的标题

图表中柱子的颜色

图表容器的背景颜色

网格线的颜色

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

图表的像素高度

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

Y轴最小值

X轴的标签

Y轴的标签

显示水平网格线以便更好阅读

在每个柱子顶部显示实际数值

在图表下方显示图例

关键信息

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

概览

柱状图生成器是一款高效的数据可视化工具，旨在帮助用户将简单的文本或 JSON 数据快速转化为清晰、美观的柱状图，支持自定义颜色、轴标签及布局样式，让数据分析与展示变得直观简单。

适用场景

  • •需要将枯燥的统计数据转化为直观的视觉图表时。
  • •在演示文稿或报告中快速插入对比分析图表时。
  • •需要对不同类别的数值进行横向或纵向对比时。

工作原理

  • •在“图表数据”区域输入 JSON 格式或“标签:数值”格式的数据。
  • •根据需求选择图表类型（垂直或水平）并设置标题、轴标签等基础信息。
  • •通过颜色选择器和数值调整工具，自定义柱子颜色、网格线及图表尺寸。
  • •点击生成即可获得即时预览的柱状图，支持直接查看数据分布。

使用场景

销售业绩对比：快速展示不同月份或不同销售人员的业绩完成情况。
市场调研分析：将问卷调查的统计结果转化为易于理解的柱状图。
个人进度追踪：可视化记录学习时长、运动数据或财务收支情况。

用户案例

1. 季度销售额对比图

市场专员
背景原因
需要向团队展示第一季度各个月份的销售额表现。
解决问题
原始数据为简单的文本格式，缺乏视觉冲击力，难以在会议中快速传达重点。
如何使用
输入数据“1月:1200, 2月:1500, 3月:1300”，设置图表标题为“Q1 销售额”，并开启数值显示。
示例配置
chartData: 1月:1200
2月:1500
3月:1300, chartTitle: Q1 销售额, showValues: true
效果
生成了一张清晰的垂直柱状图，直观展示了 2 月份为销售高峰，且每个柱子上方均标注了具体金额。

2. 项目任务耗时统计

项目经理
背景原因
需要分析不同开发任务的耗时情况，以便优化后续排期。
解决问题
任务名称较长，垂直柱状图显示拥挤，需要更清晰的对比方式。
如何使用
输入 JSON 数据，选择“水平柱状图”类型，并调整柱子宽度以适应长标签。
示例配置
chartType: horizontal, barWidth: 40, showGrid: true
效果
生成了水平柱状图，任务名称在左侧清晰排列，耗时对比一目了然。

用 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 数组格式（如 [{label: 'A', value: 10}]）或简单的“标签:数值”文本格式。

可以调整柱状图的颜色吗？

可以，通过工具提供的颜色选择器，您可以自定义柱子的颜色、背景色及网格线颜色。

图表支持水平和垂直两种布局吗？

支持，您可以在图表类型选项中自由切换垂直柱状图或水平柱状图。

如何设置 Y 轴的显示范围？

您可以通过配置“最大值”和“最小值”选项来手动控制 Y 轴范围，留空则自动缩放。

生成的图表可以显示具体数值吗？

可以，勾选“在柱子上显示数值”选项，即可在每个柱子顶部自动标注对应的数值。

API 文档

请求端点

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

请求参数

参数名 类型 必填 描述
chartData textarea 是 图表数据。可以是JSON数组或简单的标签:值对
chartTitle text 否 显示在图表上方的标题
chartType select 否 -
barColor color 否 图表中柱子的颜色
backgroundColor color 否 图表容器的背景颜色
gridColor color 否 网格线的颜色
barWidth number 否 每个柱子的像素宽度（过大时自动调整）
chartHeight number 否 图表的像素高度
maxValue number 否 Y轴最大值（留空自动缩放）
minValue number 否 Y轴最小值
xAxisLabel text 否 X轴的标签
yAxisLabel text 否 Y轴的标签
showGrid checkbox 否 显示水平网格线以便更好阅读
showValues checkbox 否 在每个柱子顶部显示实际数值
showLegend checkbox 否 在图表下方显示图例

响应格式

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

AI MCP 文档

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

{
  "mcpServers": {
    "elysiatools-bar-chart-generator": {
      "name": "bar-chart-generator",
      "description": "从数据生成可自定义的柱状图，支持多种样式选项",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=bar-chart-generator",
      "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]