柱状图生成器
根据 CSV 数据生成柱状图——支持堆叠、分组、水平布局。可处理多组数据系列，支持导出 PNG，无需上传文件。
使用方法
- 1 粘贴 CSV 数据,首行为表头,首列为标签。
- 2 开启堆叠或水平选项即可切换布局。当数据包含多列数值时,会自动生成并排或堆叠的多组柱状图。
- 3 将生成好的图表下载为 PNG,用于幻灯片或报告。
为什么使用此工具
- 支持堆叠与水平布局——一款工具即可涵盖分组、堆叠和并排柱状图。
- Chart.js 采用懒加载(lazy-load)方式引入——首次加载迅速,且无需上传文件。
- 支持多组数据系列——CSV 中的每一数值列都会转换为独立的柱状数据系列。
- 支持带引号的 CSV 单元格,包括字段内部含有逗号和换行符的情况。
常见问题
需要其他类型的图表？
可以试试 <a class="underline" href="/line-chart-maker">折线图生成器</a>、<a class="underline" href="/pie-chart-maker">饼图生成器</a> 或 <a class="underline" href="/scatter-plot-maker">散点图生成器</a>——它们都使用相同的 CSV 输入格式。
如何先把 JSON 转换成 CSV？
使用 <a class="underline" href="/csv-to-json">CSV / JSON 转换工具</a> 将数据转换为 CSV 格式,然后粘贴到这里即可。
为什么有些列会缺失？
非数字的单元格会被视为 null 并被忽略。请确保你的数据列中只包含纯数字。
什么是 柱状图生成器？
柱状图生成器(Bar Chart Maker)是一款可直接在浏览器中根据 CSV 数据生成柱状图的工具。它将数值以矩形柱的形式呈现，并支持堆叠、分组和水平布局，可同时处理多组数据系列。生成的图表可导出为 PNG 图片,整个处理过程均在浏览器端(客户端)完成,无需上传任何文件。
功能特性
由 CSV 列生成的多系列柱状图
第一列之后的每个数值列都会成为一个独立的柱状图数据集,并自动从 10 色调色板中分配一种独特颜色;非数值单元格会被解析为 null 并被跳过。
堆叠与水平布局切换
复选框可在分组柱状图与堆叠柱状图(Chart.js 的 scales.x/y.stacked)之间,以及垂直方向与水平方向(Chart.js 的 indexAxis: 'x' | 'y')之间切换。
一键导出 PNG
下载功能通过 canvas.toDataURL('image/png') 将当前画布渲染为 PNG 数据 URL,并触发浏览器下载——无需与服务器往返通信。
仅在客户端运行,无需上传
CSV 解析(遵循 RFC 4180 标准,可处理包含逗号/换行符的带引号字段)和 Chart.js 渲染均在浏览器中运行;CSV 文本永远不会离开页面。
示例
Input
Quarter,Revenue,Cost
Q1,42,30
Q2,55,33
Q3,61,40
Q4,78,48Output
bar-chart-maker.png — canvas-sized PNG (matches the on-screen preview element, no fixed pixel dimensions), 2 bar series (Revenue, Cost) in grouped layout with a legend, colors #10b981 and #0ea5e9 at 70% fill opacity常见使用场景
-
1
季度营收与成本对比
粘贴 Quarter,Revenue,Cost 格式的数据行,即可获得并排或堆叠的柱状图,用于在幻灯片或报告中比较各时期的两项指标。
-
2
调查或类别数据细分
当类别标签过长、无法在纵向 x 轴上完整显示时,可将带标签的计数数据(如浏览器份额、流量来源)转换为水平柱状图。
-
3
发布图表前的快速可视化检查
在将同样的结构应用到 BI 工具或幻灯片之前,先预览多系列 CSV 数据以堆叠或分组柱状图形式呈现的效果。
Bar Chart Maker 将粘贴的 CSV 文本转换为在 HTML canvas 上通过 Chart.js 4 渲染的柱状图。第一列之后的每个数值列都会成为独立的数据系列,并可切换堆叠柱状图、水平方向(indexAxis)以及图例显示;最终结果可通过 canvas.toDataURL() 导出为 PNG。所有 CSV 解析和图表渲染均在浏览器端(客户端)完成——不会有任何文件上传到服务器。
- 分类
- 创作者
- 价格
- 免费
- 隐私
- 基于浏览器
- 注册
- 无需
参考资料
- Chart.js — Bar Chart — Chart.js
- Chart.js — Cartesian Axes (stacked, indexAxis) — Chart.js
- HTMLCanvasElement.toDataURL() — MDN Web Docs
- RFC 4180 — Common Format and MIME Type for CSV Files — IETF
隐私
除非另有说明，否则你的数据永远不会离开浏览器。柱状图生成器 完全在客户端运行 — 无需上传服务器，不记录日志，不追踪你输入的内容。
相关工具
在 Zerethon Social 上创作、分享与成长
免费注册。赚取积分，收集成就，与全球创作者建立联系。