在线做图 · 柱状图 柱状图制作
粘贴表格，得到从 0 起、可排序、每根柱子都标数值的柱状图。多列数字自动变成并排或堆叠的柱子；类别名长的时候，横向条形图放得下。
- 支持 Excel / WPS / 飞书粘贴
- PNG、SVG、内嵌代码
- 本地运行
在线做图
贴数据，选图型
第一列是类别（或横轴），后面每一列是一组数据；第一行是名称时自动当表头。桑基图换成一行一条「来源, 去向, 数值」。
从表格复制的（Tab 分隔）、逗号或分号分隔都行。1,200、12%、¥5.4、1.2万、−30 都能识别成数字。
全部在你的浏览器里计算。这里输入的任何内容都不会上传，TapCub 也不会保存。
在左边粘贴表格就会出图。
每步转化
内嵌 SVG 代码
可以直接贴进 HTML 页面、支持 HTML 的 CMS 区块或 Markdown 文件。图会随容器缩放，并带读屏软件能读的标题。
chart.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 386" width="680" height="386" font-family="Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif" role="img" aria-label="各端注册人数" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>各端注册人数</title><desc>官网: 1月 1,240, 2月 1,180, 3月 1,350, 4月 1,420, 5月 1,510; App: 1月 860, 2月 900, 3月 960, 4月 1,020, 5月 1,080; 小程序: 1月 1,310, 2月 1,420, 3月 1,580, 4月 1,690, 5月 1,860</desc><rect width="680" height="386" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">各端注册人数</text><rect x="16" y="46" width="10" height="10" rx="2" fill="#2050f0"/><text x="31" y="55" font-size="12" fill="#4b5563">官网</text><rect x="72" y="46" width="10" height="10" rx="2" fill="#eb6834"/><text x="87" y="55" font-size="12" fill="#4b5563">App</text><rect x="124.9" y="46" width="10" height="10" rx="2" fill="#1baf7a"/><text x="139.9" y="55" font-size="12" fill="#4b5563">小程序</text><path d="M55.46000000000001 350H664" stroke="#d1d5db" stroke-width="1"/><path d="M55.46000000000001 280H664" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 210H664" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 140H664" stroke="#e5e7eb" stroke-width="1"/><path d="M55.46000000000001 70H664" stroke="#e5e7eb" stroke-width="1"/><path d="M74.3 350V180.4Q74.3 176.4 78.3 176.4H97Q101 176.4 101 180.4V350Z" fill="#2050f0"><title>1月 · 官网: 1,240</title></path><text x="87.6" y="171.4" text-anchor="middle" font-size="10" fill="#0b0f19">1,240</text><path d="M103 350V233.6Q103 229.6 107 229.6H125.6Q129.6 229.6 129.6 233.6V350Z" fill="#eb6834"><title>1月 · App: 860</title></path><text x="116.3" y="224.6" text-anchor="middle" font-size="10" fill="#0b0f19">860</text><path d="M131.6 350V170.6Q131.6 166.6 135.6 166.6H154.3Q158.3 166.6 158.3 170.6V350Z" fill="#1baf7a"><title>1月 · 小程序: 1,310</title></path><text x="145" y="161.6" text-anchor="middle" font-size="10" fill="#0b0f19">1,310</text><path d="M196 350V188.8Q196 184.8 200 184.8H218.7Q222.7 184.8 222.7 188.8V350Z" fill="#2050f0"><title>2月 · 官网: 1,180</title></path><text x="209.4" y="179.8" text-anchor="middle" font-size="10" fill="#0b0f19">1,180</text><path d="M224.7 350V228Q224.7 224 228.7 224H247.4Q251.4 224 251.4 228V350Z" fill="#eb6834"><title>2月 · App: 900</title></path><text x="238" y="219" text-anchor="middle" font-size="10" fill="#0b0f19">900</text><path d="M253.4 350V155.2Q253.4 151.2 257.4 151.2H276Q280 151.2 280 155.2V350Z" fill="#1baf7a"><title>2月 · 小程序: 1,420</title></path><text x="266.7" y="146.2" text-anchor="middle" font-size="10" fill="#0b0f19">1,420</text><path d="M317.7 350V165Q317.7 161 321.7 161H340.4Q344.4 161 344.4 165V350Z" fill="#2050f0"><title>3月 · 官网: 1,350</title></path><text x="331.1" y="156" text-anchor="middle" font-size="10" fill="#0b0f19">1,350</text><path d="M346.4 350V219.6Q346.4 215.6 350.4 215.6H369.1Q373.1 215.6 373.1 219.6V350Z" fill="#eb6834"><title>3月 · App: 960</title></path><text x="359.7" y="210.6" text-anchor="middle" font-size="10" fill="#0b0f19">960</text><path d="M375.1 350V132.8Q375.1 128.8 379.1 128.8H397.7Q401.7 128.8 401.7 132.8V350Z" fill="#1baf7a"><title>3月 · 小程序: 1,580</title></path><text x="388.4" y="123.8" text-anchor="middle" font-size="10" fill="#0b0f19">1,580</text><path d="M439.4 350V155.2Q439.4 151.2 443.4 151.2H462.1Q466.1 151.2 466.1 155.2V350Z" fill="#2050f0"><title>4月 · 官网: 1,420</title></path><text x="452.8" y="146.2" text-anchor="middle" font-size="10" fill="#0b0f19">1,420</text><path d="M468.1 350V211.2Q468.1 207.2 472.1 207.2H490.8Q494.8 207.2 494.8 211.2V350Z" fill="#eb6834"><title>4月 · App: 1,020</title></path><text x="481.4" y="202.2" text-anchor="middle" font-size="10" fill="#0b0f19">1,020</text><path d="M496.8 350V117.4Q496.8 113.4 500.8 113.4H519.4Q523.4 113.4 523.4 117.4V350Z" fill="#1baf7a"><title>4月 · 小程序: 1,690</title></path><text x="510.1" y="108.4" text-anchor="middle" font-size="10" fill="#0b0f19">1,690</text><path d="M561.1 350V142.6Q561.1 138.6 565.1 138.6H583.8Q587.8 138.6 587.8 142.6V350Z" fill="#2050f0"><title>5月 · 官网: 1,510</title></path><text x="574.5" y="133.6" text-anchor="middle" font-size="10" fill="#0b0f19">1,510</text><path d="M589.8 350V202.8Q589.8 198.8 593.8 198.8H612.5Q616.5 198.8 616.5 202.8V350Z" fill="#eb6834"><title>5月 · App: 1,080</title></path><text x="603.1" y="193.8" text-anchor="middle" font-size="10" fill="#0b0f19">1,080</text><path d="M618.5 350V93.6Q618.5 89.6 622.5 89.6H641.1Q645.1 89.6 645.1 93.6V350Z" fill="#1baf7a"><title>5月 · 小程序: 1,860</title></path><text x="631.8" y="84.6" text-anchor="middle" font-size="10" fill="#0b0f19">1,860</text><text x="47.5" y="354" text-anchor="end" font-size="11" fill="#6b7280">0</text><text x="47.5" y="284" text-anchor="end" font-size="11" fill="#6b7280">500</text><text x="47.5" y="214" text-anchor="end" font-size="11" fill="#6b7280">1,000</text><text x="47.5" y="144" text-anchor="end" font-size="11" fill="#6b7280">1,500</text><text x="47.5" y="74" text-anchor="end" font-size="11" fill="#6b7280">2,000</text><text x="116.3" y="367" text-anchor="middle" font-size="11" fill="#4b5563">1月</text><text x="238" y="367" text-anchor="middle" font-size="11" fill="#4b5563">2月</text><text x="359.7" y="367" text-anchor="middle" font-size="11" fill="#4b5563">3月</text><text x="481.4" y="367" text-anchor="middle" font-size="11" fill="#4b5563">4月</text><text x="603.1" y="367" text-anchor="middle" font-size="11" fill="#4b5563">5月</text></svg>版本 v1.0更新于 更新记录
该不该用柱状图
什么数据适合做柱状图
比较各类别的数量时，柱状图是最稳妥的选择：人对同一基线上的长度判断得最准。
要比较的类别
渠道、省份、商品、套餐。除非类别本身有顺序（月份、年龄段、评分），都从大到小排。
并排：比同一类别里的几组
并排的柱子回答「3 月哪一端更多」。每组建议不超过 4 根。
堆叠：看总数
堆叠柱同时显示总数和构成，但只有最底下那段和基线对齐。总数是重点时才用。
名称长就横过来
横向条形图的类别名从左往右读，不会被截断或斜着放。类别超过 12 个左右也适合横向。
这里的柱子一律从 0 开始。如果你关心的差异相对数值本身很小，用可以放大的折线图，或直接列一张差值表。
怎么用
从表格到 PPT 四步
一边改，图一边重画。
-
1
复制单元格
在 Excel、WPS 或飞书表格里选中数据（连表头一起）复制；也可以直接粘贴 CSV 文本。
-
2
粘贴，选图型
第一列当类别，其余每列是一组数据。选好图型，图下面的检查会告诉你数据适不适合这种图。
-
3
调整
加标题、换配色、柱子从大到小排、名称长就改成横向、多列数据选并排或堆叠。
-
4
导出
PNG 放 PPT、微信和钉钉；SVG 用于印刷和设计软件；内嵌代码贴进网页。
数据怎么读
解析规则
工具尽量少猜；不得不猜的地方会明说。
- 分隔符：只要有 Tab 就按 Tab 分（从表格复制出来就是这样），否则在逗号、分号、竖线里选列数最一致的那个。支持带引号的 CSV。
- 表头：第一行里除第一列外只要有一格不是数字，就当表头。
- 数字：千分位、货币符号、末尾的 %、负号或会计括号、全角数字、万 / 亿 / k 都能识别；读不出来的按空值处理并列出来。
- 上限：200 行、8 列数字。饼图保留最大的 7 块，其余合并成「其它」。
| 图型 | 列 | 示例行 |
|---|---|---|
| 柱状图 / 折线图 | 名称, 数值, [数值…] | 1月, 1240, 860 |
| 饼图 | 名称, 数值（正数） | 抖音, 860 |
| 漏斗图 | 步骤, 人数（按顺序） | 加入购物车, 1248 |
| 桑基图 | 来源, 去向, 数值 | 百度搜索, 价格页, 150 |
算例
同一张表，三种说法
默认数据是 5 个月里官网、App、小程序三端的注册人数。同样的数，换一种图回答的是不同的问题。
| 问题 | 用什么图 | 看到什么 |
|---|---|---|
| 哪一端来的人最多？ | 柱状图，并排 | 每个月都是小程序最多，官网第二。 |
| 总数在涨吗？ | 柱状图，堆叠 | 合计从 1 月的 3,410 涨到 5 月的 4,450。 |
| 哪一端涨得最快？ | 折线图 | 小程序涨 42%（1,310 → 1,860），App 26%，官网 22%。 |
| 5 月小程序占多少？ | 饼图（只放 5 月） | 1,860 ÷ 4,450 = 41.8%。 |
增长率 =（5 月 − 1 月）÷ 1 月。只把 5 月那一列贴进饼图，就能自己核对占比。
常见错误
数都对，图却误导人
每个数字都没错，图照样能给人错误的印象。
柱状图纵轴不从 0 开始
柱子的长度就是数值。纵轴从 900 截断，950 看起来就是 925 的两倍。本工具的柱子一律从 0 起；折线可以放大。
饼图里混进合计行
把「合计」和各部分一起贴进来，每块都只剩真实大小的一半。某一行等于其它行之和时，工具会提醒。
双纵轴
有两套刻度时，两条线在哪儿交叉，完全由设刻度的人决定。做两张图，或把两组数都换算成以 100 为起点的指数。
只靠颜色区分
大约每 12 个男性里就有 1 个有某种色觉异常。这里每张图都同时用图例或标签写出名称。
在 TapCub 里
会自己更新的图
粘贴出来的图是一张快照。在 TapCub 里，同样的图由实时事件生成，自动刷新。
柱状图和条形图有什么区别？
是同一种图，只是方向不同：柱形是竖的，条形是横的。用「柱子方向」切换；名称长用横向，时间序列用竖向。
什么时候用堆叠柱状图？
总数重要、各部分正好构成总数时，比如每月各端注册数。要比较某一端在各月的变化，并排更容易看。
柱子可以是负数吗？
可以。负数从 0 线往下（或往左）画；堆叠时正数和负数分开往两边堆。
为什么纵轴总是从 0 开始？
因为柱子的长度代表数值。截断纵轴会让 3% 的差异看起来像翻了一倍。
Excel 表格数据怎么生成柱状图？
在 Excel 或 WPS 里选中带表头的整块数据，在「插入」里选柱形图，每个数字列成为一组柱子。也可以把同样的单元格复制后粘贴到这里：第一行当图例名称，多列数字自动变成并排或堆叠的柱子，再下载 PNG / SVG。