行图谱生成

每行写「名称 数值」,本页按比例把每行画成一条横向条形,长短对应数值大小,一眼就能比出谁多谁少。所有渲染都在浏览器本地完成,输入不上传服务器。

渲染口径:每行按「名称 + 空格/冒号 + 数值」解析,条形长度 = 本行数值 ÷ 最大数值 × 100%;若一行没有数值则按 1 计。演示默认苹果最长、西瓜最短。

使用方法

行图谱生成是「粘数据、点生成」两步:

  1. 「输入」每行写 名称 数值,演示值苹果 12、香蕉 8、橙子 5、葡萄 9、西瓜 3。
  2. 「文本条宽」设定复制文本图谱时的字符宽度,默认 20;点「生成行图谱」或按 Ctrl/Cmd+Enter,下方出现横向条形图,按「复制文本图谱」拿走纯文本版。

行图谱生成能解决什么

它把「一排数字」变成「看得见的长短」,适合三类场景:

  • 投票与调查结果:把各选项票数粘进来,条形长短一眼看出胜负,比盯着数字表直观得多。
  • 销量与占比对比:把各商品销量写成「名称 数值」,条形直接呈现差距,做周报截图很顺手。
  • 资源分配:预算、工时、人数都能用同样方式排成图谱,快速发现哪块占比最大。

本页不做的事:不画折线、饼图或散点(只做横向条形);不自动算百分比(只按比例画长度);不保存或导出图片文件。它是轻量排图工具,不是完整图表库。

原理和变量

① 用了哪个具体函数:每行用正则 /^(.*?)[ \t::]+(\d+(?:\.\d+)?)\s*[个只台件百分比]?\s*$/ 拆出标签与数值;条形百分比用 数值 ÷ 最大值 × 100 计算,纯算术无开方。

② 关键参数为什么这样取:用「最大值」做分母而非总和,是因为条形图要表达「谁比谁长」,按最大值归一能让最长那条占满 100%,对比最清楚;按总和会变成百分比饼图,不是本工具目标。

③ 遵循哪个标准:无行业标准,纯比例映射;标签允许中文,数值允许小数与末尾单位(个/只/台/件/百分比)。输出是普通 HTML 与文本,可截图或粘贴进文档。

④ 输入怎么变成输出:演示苹果 12 是最大值,条长 100%;香蕉 8 是 8÷12=66.7%;西瓜 3 是 3÷12=25%。五个百分比对应五条长短,与下方图谱、复制文本一致。

⑤ 边界与阈值:空输入会提示先写数据;数值必须出现在行尾(前面是名称);没有数值的行按 1 计;最大值若为 0(全 0)按 1 处理避免除零;文本条宽限 4~60 字符。

⑥ 常见误用的正确解释:条形长度代表数值相对最大值的比例,不是绝对量——最长那条不一定是「100 分」,只是「这堆里最大」;数值写错位置(如「12 苹果」)会被当成无数值行,按 1 计。

完整示例(数值仅作演示)

输入五行:苹果 12、香蕉 8、橙子 5、葡萄 9、西瓜 3。

  • 最大值 12(苹果)→ 条长 100%。
  • 葡萄 9 → 9÷12 = 75.0%。
  • 香蕉 8 → 8÷12 = 66.7%。
  • 橙子 5 → 5÷12 = 41.7%。
  • 西瓜 3 → 3÷12 = 25.0%。

这五条比例与页面默认图谱、复制文本完全一致,可三处核对。

输入范围与对照表

行图谱生成的对照表列出各种「行写法」如何被解析(标签与数值):

不同行写法对应的解析结果
行写法解析标签解析数值
苹果 12苹果12
香蕉:8香蕉8
橙子 5个橙子5
葡萄 9 kg葡萄9
西瓜 3西瓜3
芒果 7芒果7
草莓 6草莓6
荔枝 4荔枝4
木瓜 10木瓜10
柠檬 2柠檬2
哈密瓜 11哈密瓜11
牛油果 1牛油果1

末尾单位(个/只/台/件/百分比)会被忽略,只取数字参与绘图;标签里含空格也没关系,数值前的整段都算标签。

结果边界和舍入

输出性质:图谱是 HTML 条形,长度按百分比取整到 0.1%;复制的文本图谱用实心块字符拼出,宽度由「文本条宽」决定(默认 20 字符)。

什么时候会提示:输入为空或全空白时提示先写数据;文本条宽不在 4~60 时回退到 20。绘图本身几乎不报错。

比例与精度:条形只表达相对最大值的比例,不显示绝对百分比总和;小数数值会按实际比例画,如 3.5 与 7 长度是 1:2。

结果用途:这是可视化辅助,不改数据本身;正式报告请核对原始数值,图谱仅用于直观呈现。

常见问题

数值写在哪里才生效?

写在行尾,名称在后、数值在前用空格或冒号隔开,如「苹果 12」或「香蕉:8」。数值前的整段都算标签,末尾单位(个/只/台)会被忽略。

没有数值的行怎么办?

按数值 1 计,画出来是最小的一条。若想让它更长,请补上具体数字。

最长那条一定是 100 吗?

是比例 100%,代表本批最大值,不代表绝对满分。它只是「这批里最长的」,用于横向对比。

能画百分比饼图吗?

不能。本工具只做横向条形(行图谱),不做饼图、折线或散点。

小数和负数能画吗?

小数可以,按比例正常画;负数目前不支持(会被当成无数值行),请先取绝对值或平移到正数区间。

标签太长会怎样?

标签区固定宽度并省略溢出(…),不影响条形;如需完整标签,缩短名称或增大页面宽度即可。

能导出成图片吗?

当前不导出图片。你可截图图谱,或用「复制文本图谱」拿到纯文本条形版粘进文档。

我的数据会被上传吗?

不会。渲染在浏览器内完成,刷新即清空;Network 面板里点「生成行图谱」没有任何请求发出。

相关工具