日常写业务复盘、用户调研、产品白皮书或公众号长文时，难点通常不在“会不会画柱状图”，而在如何根据数据形状、阅读时间和发布场景选对表达。同样一组数据，既可以被做成三秒扫完的周报图，也可以被展开成保留逐条记录的编辑叙事图；选错方式，再精致的样式也会伤害理解。

Lieflat Charts 是一套模板驱动的 Agent Skill。它把图型目录、选型规则、视觉语法和可复用的 HTML/SVG 实现放在同一个仓库里，让 Moxt、Claude Code、Codex 等能读取 SKILL.md 的 Agent 用自然语言接收数据和场景，生成无需构建、可直接用浏览器打开的单文件 HTML 图表或报告。

从安装到选图：先掌握这四条规则

Lieflat Charts 不需要你搭建复杂的本地编译环境，所有图表本质上都是轻量的 Web 代码，AI 编写后可以直接在浏览器中双击打开查看或截图。

安装与载入方式

如果你在使用支持技能扩展的 AI 终端（如 Codex、Claude Code 或 Moxt），只需向终端输入一条安装命令：

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

也可以直接将项目代码下载或克隆到本地技能目录中（例如 ~/.codex/skills/lieflat-charts 或 ~/.claude/skills/lieflat-charts）。安装后检查目录内是否存在主规则文件 SKILL.md、模板文件夹 templates/、图型目录 catalog.md 以及设计令牌 mono-tokens.js。

使用前还要看授权边界：仓库采用 PolyForm Noncommercial License 1.0.0，不是通用的开源许可。非商业目的可按条款使用、修改和分发；准备用于商业项目时，应先阅读仓库的完整 LICENSE 并向权利人确认所需授权。

图表模式 vs 报告模式的边界

Lieflat Charts 严格区分两种生成模式，默认情况下只启用图表模式：

• 图表模式（默认状态）：适合文章插图、社媒配图或特定结论说明。单篇短文通常插入 1 张图，两到三个核心论点配 2–3 张，万字长文或研报配置 4–6 张。一个页面默认最多呈现 6 张图，严禁为了凑版面把同一个结论反复画成不同的图。
• 报告模式（需明确唤醒）：只有当你对 AI 明确提出“请做成年度报告、调研一页纸、白皮书、月度看板、数据海报”等整页交付需求时，AI 才会加载复合排版模板（R01–R12）。在报告模式下，AI 会严格套用整页骨架，不会把几张互不相关的模板拼凑在一起。

选型优先级与主力备用机制

为了保证图表的信息密度与审美格调，Lieflat Charts 设定了铁律一般的选型过滤漏斗：

1. 第一优先级：全面审查 Lupi Editorial。优先看能否用细线、点阵、逐条记录、留白和旁注把数据展开。这里的“Lupi 风”特指仓库 gallery 内的视觉语法，不是对 Giorgia Lupi 本人手绘风格的模仿。
2. 第二优先级：审查基础型组（Lupi Basics）。如果数据量偏小、类目稀疏，但依然想要保留发丝线与刻度质感，从这里寻找经典图型的变体。
3. 第三优先级：降级进入 Glance 系列。只有当前两组都无法清楚表达数据，或者你明确要求“做成监控仪表盘、周报卡片、需要 3 秒内读完”时，才允许调用粗线条、强聚合的 Glance 系列。
4. 特殊补充：地图仅限显式要求。即便数据里包含城市、省份或国家名称，也不要默认画地图。只有当你明确强调“画出地域分布图”时才会调用地图。

在整套系统中，L1–L15 与 F1–F13 构成日常出图的主力军。其余编号大多属于后备方案，必须在主力确实无法表达时使用。唯一的例外是 F15（箱线图）、F16（河流图）、F17（K线图）、L17（日历热力图）和 L20（平行坐标），由于主力库中没有与之对应的数学编码，一旦数据结构完全契合即可直接启用。

色彩系统与离线运行规则

在同一篇文章或同一份报告中，全篇必须强制锁定单一体系的配色方案，不能在一张图里红蓝撞色，在另一张图里又变成草绿：

• Mono（极简黑白灰）：默认保底方案，依靠线条粗细与明度拉开层次，最耐看、排版容错率最高。
• Porcelain（青瓷蓝）：单色阶方案，依靠深浅变化表达有序数值或单一连续指标。
• Palm（椰林绿）：柔和低饱和度的绿黄色系，专门用来区分少量无序的分类。
• Wire（编辑部黑白+荧光橙）：全图保持黑白灰底色，只用一抹亮眼的橙色点出全篇最关键的数据落点。

在技术底层上，纯 SVG 格式渲染的图表（大部分 Lupi 与 Basics 图型）完全支持单机断网离线运行。而采用 Chart.js、ECharts 引擎或在线字体的图型，在没有做代码内联打包时则需要联网加载依赖。

全量 61 款图表：数据形状、用法与边界

Lupi 系 · 19 款（发丝细线 · 逐记录刻画 · 30 秒以上细读）

Lupi 系把一个点、一根线或一条旁注尽量对应到真实数据单位，不急着把原始记录压成一个结论。它用发丝线、点阵、账本式导轨、留白和旁注让读者看到结构、分布和例外，适合论文、长文、年报和需要慢慢阅读的数据故事。

L1 Launch Fan（功能展开扇形图）

• 数据形状：多个业务实体，每个实体均具备上线时间戳与当前规模量级。
• 适合干什么：展示产品演进历史或重大功能发布历程，把时间和体量浓缩在同一面折扇上。
• 怎么用：每根辐条代表一个功能，辐条上的小点表示上线后经历的每周；大点标出上线周，并用大小表示当前规模。
• 什么时候不要用：实体数量超过 15 个，或者没有明确时间属性的普通类别对比。

L2 Dot Cascade（点阵瀑布层叠图）

• 数据形状：排名前后分明、带有具体可数单元的分类统计数据。
• 适合干什么：替代粗糙的排行榜柱状图。每个点代表真实发生的一个单位（如 1 个故障、1 位客户），让排名的落差充满质感。
• 怎么用：先把分类沿斜向排序，每一类用竖向点串累高，大点和精确数值放在顶部。类目名会斜排，因此只适合短标签；中文长名应换 F5、L5 或 L12。
• 什么时候不要用：单项数据成千上万、无法用单个微型圆点逐一拆解的宏观总量对比。

L3 Barcode Lollipop（条形码棒棒糖图）

• 数据形状：连续 90 天左右的单日高频读数时间序列。
• 适合干什么：季度运营复盘、每日活跃波动或连载项目推进记录，常作为通栏插图搭配文字侧栏。
• 怎么用：横向按天铺开，底部是极细的发丝坚线，顶端凝结为微小圆点，高低起伏如同一道韵律十足的条形码。
• 什么时候不要用：时间跨度过长（如数年）或数据点极其稀疏（如每月仅一个数值）。

L4 Arc Matrix（弧线矩阵图）

• 数据形状：分类维度 A × 分类维度 B 的交叉网络，总单元格在 100 格以内。
• 适合干什么：轻量级矩阵透视，例如 8 款产品分别进驻 12 个核心城市的落地密度。
• 怎么用：横纵坐标排列两个分类，交点处不填生硬的数字，而是绘制精细的弧线或同心环圈，弧度大小映射强度。
• 什么时候不要用：数据网格超过 100 格，或需要精准比对小数点的财务核算表。

L5 Radial Convergence（径向汇聚图）

• 数据形状：多对一的从属或归类关系，总记录数控制在 60 条以内。
• 适合干什么：展示几十项细碎的用户反馈、功能请求是如何最终聚类归并到 4–5 个核心战略主题之下的。
• 怎么用：外圈排列密密麻麻的具体问题清单，细线条向圆心集束收拢，汇聚到中心的几个核心主题节点。
• 什么时候不要用：关系错综复杂的多对多网状拓扑，或者完全没有归纳层级的离散项目。

L6 Cluster Field（聚类星云图）

• 数据形状：由核心与卫星节点构成的关系网络，更看重整体阵列轮廓而非具体数值。
• 适合干什么：年报封面或品牌视觉海报，展现社区贡献者生态、合作伙伴联盟的繁盛度。
• 怎么用：中心放置核心系统，四周发散出成百上千条发丝级引线连接外部节点，形成如同星系般的视觉场。
• 什么时候不要用：业务需要严谨查询特定节点之间的定量权重，或者屏幕尺寸过小无法展示细节。

L7 Brand Spectrum（品牌光谱图）

• 数据形状：双极语义量表（即轴线两端都是合理的定位选择，如“极客 vs 普惠”）加上多家竞品对照。
• 适合干什么：品牌定位调研报告、产品调性心智图、企业战略取向评估。
• 怎么用：绘制横向光谱线，两端标注对立属性，将各个受测品牌像琴键上的微型刻度一样锚定在线段特定位置。
• 什么时候不要用：只有单纯的分数高低考核（如“满意度从 0 到 100”），两端并非平衡的设计哲学。

L8 Dotty Matrix（空间点阵堆叠图）

• 数据形状：多个分组 × 离散网格 × 频次数值，强调等距阵列的视觉仪式感。
• 适合干什么：刊物跨页、宣传画册中展现多支敏捷小队的战力排布或资源投入。
• 怎么用：划分出整齐划一的网格坐标系，每个格子里规则叠放微型点阵，以密集度体现体量。
• 什么时候不要用：日常运营汇报中需要快速抓取关键数值的严谨业务场景。

L9 Bubble Almanac（气泡年鉴图）

• 数据形状：大跨度年份（如 5–10 年）× 分类项目 × 规模量级 × 最终状态。
• 适合干什么：产品发展大事记、长周期战略孵化历程，非常适合添加富文本边注与历史关键节点说明。
• 怎么用：按时间轴自左向右延伸，纵向划分业务线，交汇处呈现手绘质感的气泡斑块，辅以详细引线注释。
• 什么时候不要用：仅涵盖几个星期或几个月的短周期临时性活动总结。

L10 Radial Patchwork（径向部署织锦图）

• 数据形状：24 小时环形周期 × 事件规模，包含多天或数月的重复记录叠加。
• 适合干什么：技术团队季度发布节奏盘点、客服全天呼入高峰分布、服务器故障周期复盘。
• 怎么用：以 360 度圆周映射一天的 24 小时，从圆心向外的距离代表事件规模，半透明圆点相互叠加，越深的地方代表越密集的作息峰值。
• 什么时候不要用：线性发展、不具备 24 小时循环属性的常规时间序列。

L11 Trend Lineage（功能生命谱系图）

• 数据形状：多项特性的全生命周期事件序列（包括立项、重做、沉寂、活跃、废弃）。
• 适合干什么：回顾整个产品矩阵在过去几年的演化血统，展现各个功能的生死存亡。
• 怎么用：用纵向年份作为时间轴，每个产品或功能占一条纵向轨道，实心点、空心点、虚线和延续线分别标记发布、重做、休眠与是否活跃至今。
• 什么时候不要用：各产品之间没有任何演化关系，仅仅是单次孤立的销售数字对比。

L12 Type Colonnade（罗马柱清单图）

• 数据形状：多对一归属关系，附带逐条明确的名录清单，总条目在 50 条以内。
• 适合干什么：组织架构治理审计、开源仓库与归属团队的权责梳理。
• 怎么用：左侧保留逐条明细名单，每条用发丝曲线交给右侧的归属节点，并在节点旁标出汇总数量。这样既能看整体分工，也不丢失单条记录。
• 什么时候不要用：层级超过三层以上的复杂组织树状关系。

L13 Hourglass Stream（漏斗沙漏流图）

• 数据形状：经过严格阶段性递减的流程转化人数或漏斗比例。
• 适合干什么：向非技术高管或投资人汇报核心业务的留存瓶颈，用诗意的流体形态取代生硬的几何漏斗。
• 怎么用：自上而下形成收缩后微微舒展的沙漏型纤细轮廓线，内部填充微细水流纹理，标明各转化阶梯流失。
• 什么时候不要用：各阶段之间没有前后因果转化关系、仅仅是几个平级数据的排列。

L14 Hundred Field（百人方阵图）

• 数据形状：加总恰好为 100% 的百分比构成数据，分类数量在 6 类以内。
• 适合干什么：小数据样本的结构剖析。替代千篇一律的圆环饼图，让每一份占比具象化为百人方阵中的成员。
• 怎么用：绘制严格的 10×10 百格微型阵列，每个点代表整整 1% 或 1 个人，副标题必须注明计数单位。
• 什么时候不要用：连续性时间序列数据，或者占比类别过多（超过 6 类）导致辨识困难。

L15 Ballot Tally（选票计数器）

• 数据形状：多选题问卷百分比，各个选项之间相互独立（各项数值各自在 0–100 之间），选项在 6 项以内。
• 适合干什么：用户画像偏好调查、核心诉求痛点摸底等多选题结果展示。
• 怎么用：逐行排列各个问题，每行平铺 100 个微型刻度或点位，根据实际得票率点亮相应长度，附带统计标注。
• 什么时候不要用：各项总和为 100% 的互斥单选题；或者多选题选项超过 10 个造成版面严重拥挤。

L16 Matrix Heat（细读热力矩阵）

• 数据形状：两个离散维度交叉对应的具体数值，单元格在 100 格以内。
• 适合干什么：产品组合协同度分析（如“哪些功能经常被组合使用”）、渠道转化细分深度审查。
• 怎么用：属于 Lupi 系后备方案。在网格中保留极度克制的背景底色与醒目的发丝轮廓，重点单元格做高亮标记并显示精确读数。
• 什么时候不要用：需要读者 3 秒内扫视结论的监控大屏或粗略周报（此时应选用 G20）。

L17 Calendar Heat（日历热力图）

• 数据形状：一整年完整的 52 周 × 7 天日期序列，附带每日发生事件的非负频次。
• 适合干什么：开发团队代码提交频率年报、用户一整年的打卡习惯复盘、每日系统异常频次透视。
• 怎么用：作为主力库无对应替代的直接调用图型。横向排列 52 周，纵向按周一至周日切分，用单色阶的灰阶或青瓷深浅代表每日体量。
• 什么时候不要用：时间跨度只有几天或几周；或者数据颗粒度为小时级别。

L19 Ridgeline（山脊线图 / 峰峦图）

• 数据形状：3–8 组连续分布的概率密度轮廓，多组之间有明确的时间或分类对比。
• 适合干什么：对比不同业务线工单响应时长分布、不同团队代码合并周期的长尾形态。
• 怎么用：属于后备图型。多条波峰起伏的曲线自上而下轻度重叠错落，每一层呈现一组数据的分布胖瘦。
• 什么时候不要用：只有 1–2 个离散分类，或者每组数据仅有一个单一均值而没有样本分布。

L20 Parallel Coordinates（平行坐标图）

• 数据形状：同一组实体样本跨越 3–6 个不同的连续型考核维度，一根折线穿过一个实体。
• 适合干什么：高维度多指标产品评估（如比较 10 款竞品在性能、价格、易用度、续航等多个维度的综合表现）。
• 怎么用：作为主力库无对应替代的直接调用图型。纵向平行立起 3–6 根标尺，每根线代表一个产品，从左穿透至右。
• 什么时候不要用：只有 1–2 个简单维度；或者样本实体数量多达上千条导致线条糊成一团。

基础型组 · 17 款（F1–F17 · 发丝线质感 × 经典剪影 · 稀疏小数据首选）

很多写作者面临的尴尬局面是：手头的数据其实非常简单（比如只有 4 个季度的利润、3 款主打产品的销量），如果套用复杂的网络图会增加理解负担；但如果直接画 Excel 柱状图又显得极度廉价。

F1–F17 基础型组就是专门为此而生。它们远看保留了柱状图、折线图、甜甜圈图等最容易被人类认知理解的经典剪影，但走近细看，每一根柱子、每一个弧度都是由微小刻度、可数发丝线条拼接而成。当你的数据比较稀疏时，这里是你的第一选择。

F1 Rung Bars（梯级柱状图）

• 数据形状：数量较少的类目比较（8 个以内），数值具备明确的物理可数单位。
• 适合干什么：不同付费计划的收入对比、各季度重大客户签约数量。
• 怎么用：保留柱状图的直立结构，但柱体内部不是死黑的大色块，而是一档一档如同竹梯般的横向发丝短刻度。
• 什么时候不要用：类目超过 10 个导致横坐标标签拥挤重叠；或者纯粹的百分比构成分布。

F2 Hairline Line（发丝折线图）

• 数据形状：30 天以内的连续日级别时间序列，要求对每一天的波动进行精准读数。
• 适合干什么：新版本上线后前四周的每日新增注册趋势、重大运营活动周期的每日流水。
• 怎么用：极其纤细的 1 像素折线平稳滑过，数据拐点附带微型圆圈并直接标注局部峰值与波谷，绝不滥用粗钝色块。
• 什么时候不要用：时间跨度多达数年导致折线紧贴；或者趋势本身完全没有任何周期规律。

F3 Hairline Area（发丝面积图）

• 数据形状：30–60 天连续时间序列，重点在于感知宏观走势、高低和整体形态。
• 适合干什么：两个月内的并发在线用户走势、服务器存储总占用容量爬升趋势。
• 怎么用：上方由发丝折线划定边界，下方铺满竖向等距的密集微细条纹作为阴影填充，既有体量感又极度通透。
• 什么时候不要用：有多条序列互相交叉覆盖，多层发丝面积重叠会导致视觉严重混乱。

F4 Tick Donut（刻度环形图）

• 数据形状：加总为 100% 的比例切分，分类在 6 段以内。
• 适合干什么：网站整体流量来源渠道占比、部门总预算在核心方向上的瓜分比例。
• 怎么用：用圆环替代传统死板的实心饼图，环状轨道上分布着精确的刻度虚线，中央留白区域醒目呈现核心类目的数值。
• 什么时候不要用：类别超过 6 种导致小扇区细碎难辨；或者各项之间不构成互斥的整体。

F5 Tick Rows（横向刻度条形图）

• 数据形状：带有长文本标签的分类横向排名比较，类目在 8 行以内。
• 适合干什么：各个业务研发团队发版数量对比、各营销活动带来的客资线索转化排行。
• 怎么用：类目文本从容放置在左侧，右侧延伸出由微细垂直齿痕构成的横向光栅刻度条，末端精确对齐标尺。
• 什么时候不要用：数据类别极多（超过 15 个）让版面无限拉长。

F6 Paired Rungs（双梯级成对对比柱）

• 数据形状：分组对比数据，每个分类下固定包含 2 个对比序列（如今年 vs 去年、目标 vs 达成）。
• 适合干什么：年度业绩决算与去年同期对比、各产品线实际毛利与预期毛利的达标核算。
• 怎么用：每个类目并排立起两根细密刻度柱，左侧采用浅灰实线，右侧采用强调色或不同疏密度的刻度纹理。
• 什么时候不要用：对比系列超过 3 个以上导致同一类目内部过于拥塞。

F7 Stacked Rungs（梯级堆叠柱状图）

• 数据形状：分类堆叠构成，分类数量在 4 类以内，每个分类的堆叠层级在 3 段以内。
• 适合干什么：各地区业务总营收及其内部由基础版、专业版、旗舰版所构成的比例拆解。
• 怎么用：垂直柱体被明确分割为 2–3 段不同疏密梯级的微纹理，段与段之间用极轻微的留白或虚线隔开。
• 什么时候不要用：层级过深（超过 4 层堆叠），导致中间层的起伏基准线完全漂移失真。

F8 Plumb Scatter（铅垂线散点图）

• 数据形状：二维连续指标交叉（X 轴指标 vs Y 轴指标），样本实体数量控制在 20 个以内。
• 适合干什么：产品客单价与用户净推荐值（NPS）的关系研判、功能使用频率与技术维护成本的对照。
• 怎么用：散点悬浮在二维直角坐标系中，每个散点均向 X 轴垂下一根笔直轻盈的铅垂发丝线，帮助读者迅速读出基准投影。
• 什么时候不要用：样本数量多达数百上千个（此时铅垂线会覆盖整张画布，应改用 G15）。

F9 Rung Waterfall（梯级瀑布图）

• 数据形状：从初始总量经过多阶段的连续增减调整，最终推导出净结算值的过程，阶段在 6 级以内。
• 适合干什么：企业从毛收入到净利润的层层成本扣减复盘、用户从总访问到最终下单的流转损耗审计。
• 怎么用：柱块自左向右阶梯状悬空浮动，增加项与减少项采用不同密度的线条阴影，级与级之间用水平轻虚线串联。
• 什么时候不要用：完全没有递进衍生关系的普通离散分类。

F10 Dot Heat（点阵微型热力图）

• 数据形状：星期×小时的周期性双时间维度，附带各交叉时段的频次值。
• 适合干什么：技术支持团队周报展示工单呼入规律、帮助社群运营人员找到发帖互动最高峰。
• 怎么用：横向按实际小时粒度铺开，纵向展开周一至周日，每个交叉点用圆点大小或明暗映射数量。
• 什么时候不要用：连续跨越数年的宏观走势分析（长周期请使用 L17）。

F11 Tick Gauge（刻度仪表盘）

• 数据形状：单一核心关键绩效指标（KPI）的进度百分比（0%–100%）。
• 适合干什么：季度销售目标达成率、大版本项目交付倒计时、系统资源安全警戒线展示。
• 怎么用：一道半圆或马蹄形的极细发丝刻度轨，一道指针或高亮刻度精准锁在当前百分比刻度上，中心加粗显示大数。
• 什么时候不要用：包含多个分类或趋势序列的数据集。

F12 Dumbbell Queue（哑铃对比列）

• 数据形状：少各类目（6 类以内）在两个特定节点（通常是前 vs 后、改版前 vs 改版后）的数值跨度变化。
• 适合干什么：用户新手引导改版前后的平均耗时压缩对比、策略调整前后各渠道转化率跃迁。
• 怎么用：横向每一行画一条基准导轨，导轨两端各穿缀一个微型实心圆珠，中间以线条相连形成哑铃，清晰呈现拉伸或收缩距离。
• 什么时候不要用：超过两个时点的长周期连续演变过程。

F13 Nested Treemap（嵌套矩形树图）

• 数据形状：两层层级体系加上明确的正数权重分配，矩形面积与数值成严格正比。
• 适合干什么：团队季度研发工时在各技术模块上的拆分比例、公司年度 IT 基础设施各硬件开销分布。
• 怎么用：最外层划分大板块，内部再细切子模块，边框统一采用发丝线，以紧凑而高利用率的矩形填满版心。
• 什么时候不要用：存在负数或零值；或者层级深达四层以上无法看清局部。

F14 Rung Histogram（梯级直方图）

• 数据形状：单变量连续数值的离散分箱频数统计，且每个区间具备清晰业务常识意义。
• 适合干什么：分析绝大多数客户工单究竟在几个小时内得到解决（如划分为 0–2h、2–4h、4–8h、8h+）。
• 怎么用：属于后备图型。每个柱条严密相连无间隙，柱内填充等距刻度阶梯，直接反映样本聚集情况。
• 什么时候不要用：分类属于没有顺序的独立名词（那应该用柱状图，而不是直方图）。

F15 Tick Box（刻度箱线图）

• 数据形状：多组连续分布的“五数概括”（最小值、下四分位数、中位数、上四分位数、最大值）与离群异常值。
• 适合干什么：科学实验对比、不同服务器集群的接口响应耗时分布审查、不同职级薪资分布透视。
• 怎么用：作为主力库无对应替代的直接调用图型。用极致克制的细线勾勒出箱体、中位数横线和触须极值，异常样本以发丝空心圆点漂浮在外。
• 什么时候不要用：只拿到汇总的单个平均数，缺乏底层的四分位数与离群点数据。

F16 Stream Ribbon（河流丝带图）

• 数据形状：2–5 个分类序列随连续时间推移的体量演化，既需要观察总体积变化，又要看各份额消长。
• 适合干什么：公司旗下三大主力产品过去一整年在总营收河流中的此消彼长。
• 怎么用：作为主力库无对应替代的直接调用图型。波浪状的丝带在时间轴上如河流般蜿蜒，每一股支流内部填充不同密度的微雕线条区分。
• 什么时候不要用：类别超过 6 个以上导致各河流层层缠绕；或者数据在时间轴上是不连续的偶发断点。

F17 Candlestick（发丝 K 线图）

• 数据形状：具备开盘价（Open）、最高价（High）、最低价（Low）、收盘价（Close）的四值金融时间序列。
• 适合干什么：数字资产行情价格回顾、大宗商品周度价格波动跟踪、市场交易复盘。
• 怎么用：作为主力库无对应替代的直接调用图型。空心方框代表上涨，实心方框代表下跌，上下两端延伸出发丝般的影线针脚。
• 什么时候不要用：普通单一读数的时间序列（普通折线足矣，切勿硬套 K 线）。

Glance 系 · 20 款（粗笔画 · 强聚合 · 快速扫读）

与强调发丝线与手工质感的 Lupi 路线截然不同，Glance 系列是为高效率、快节奏阅读量身定制的。它的笔触更为粗壮，提前在后台帮读者完成复杂数据的聚合与提炼，让忙碌的管理层或移动端读者在 3 到 10 秒之内就能看懂核心结论。它非常适合用来制作高管周报、监控看板、演示文稿或短视频配图。

其中 G9、G12、G16、G17、G18 会直接利用运动表达形态切换、依次入场、排名变化、实时数据流和累计增长。下面可以播放仓库原始模板的实际动效，再对照静态图册选择具体图型。

G3 Chunky Bars（粗块柱状图）

• 数据形状：数量较少的类目横向或纵向排序比较（6 个以内）。
• 适合干什么：周报汇报核心各套餐产品的总收入对比、渠道拉新第一名到第五名角逐。
• 怎么用：采用宽大厚重、辨识度极高的粗柱体，两端做轻度圆角处理，数值以加粗大号字体直接印在柱顶上方。
• 什么时候不要用：类目超过 8 个；或者需要逐项清点底层明细的细粒度研究。

G4 Dot Waffle（点阵华夫图）

• 数据形状：加总为 100% 的构成比例，类目数应保持在读者能快速区分的少量范围内。
• 适合干什么：移动端页面、周报看板中替代普通饼图，直观展现注册转化用户的来源渠道构成。
• 怎么用：由规整的 100 颗实心大圆点组成方形阵列，用高对比色块整片点亮不同类目，极具现代平面设计质感。
• 什么时候不要用：分类超过 5 项让颜色识别成本过高；或者需要展示趋势变化。

G5 Pictorial Bar（象形符号柱状图）

• 数据形状：逐年或逐分类的简单计数统计，一个具体符号代表固定的一批物理数量。
• 适合干什么：对外品牌通报、公益项目展示（如“每栽种 1000 棵树显示一个小树图标”）。
• 怎么用：将抽象的几何条形替换为一排排重复排列的具象矢量小图标，读者数图标个数即可换算出总数。
• 什么时候不要用：极其严肃严密、带有小数点的财务对账或专业学术论文。

G6 Circular Graph（微型环形关系图）

• 数据形状：节点在 12 个以内的极轻量级网络关系网络。
• 适合干什么：周报摘要中快速示意跨部门协作核心脉络、核心技术组件之间的调用依托。
• 怎么用：节点围绕成一个小圆形，节点之间拉出简单平滑的弧线，3 秒钟即可看清谁是核心枢纽。
• 什么时候不要用：复杂网络拓扑（节点大于 15 个时，请切换到独立大图 B1）。

G7 Tree LR（左右展开层级树图）

• 数据形状：层级在 2–3 层的清晰从属分类关系，不要求展示具体的权重面积。
• 适合干什么：产品版本更新发布的功能架构图谱、企业核心部门职能分类速览。
• 怎么用：自左向右一级级展开枝权，分支线条干脆利落，末端挂载具体的功能卡片标签。
• 什么时候不要用：需要精细衡量各模块资金或代码体积份额的场景（那种情况应选 F13 矩形树图）。

G8 Rainfall Dual Area（降雨双面积图）

• 数据形状：两条存在明显因果或对照关系的同步时间序列（如投入成本 vs 产出收益）。
• 适合干什么：增长团队复盘某次营销活动中“广告消耗金额”与“回款流水金额”的咬合与剪刀差。
• 怎么用：上方序列如雨水般向下垂落投影，下方序列自底向上生长，两者在中间相交形成视觉落差带。
• 什么时候不要用：两条没有任何业务逻辑关联的孤立折线强行拼凑。

G9 Scatter Morph（散点形态轮播图）

• 数据形状：同一组实体数据同时包含 3 个以上的独立观察维度。
• 适合干什么：线上产品发布会演示文稿、短视频动态数据秀。
• 怎么用：借助动效在三套不同的散点坐标投影之间平滑变形，让观众看到同一批用户在不同维度下的聚类切换。
• 什么时候不要用：必须打印在纸质介质或导出为静态 PDF 的印刷报告。

G10 Diverging Bar（正负背离条形图）

• 数据形状：以 0 为中心对称轴、两极分化的分类增减数据。
• 适合干什么：各大区业务同比增长率（有些地区增长 +40%，有些地区萎缩 -15%）、用户满意度盈亏平衡对比。
• 怎么用：垂直中轴线立在中央，正向增长的粗条向右延伸，负向缩水的粗条向左延伸，颜色形成强烈反差。
• 什么时候不要用：所有数值全部为正数或全部为负数（此时普通柱状图即可）。

G11 Force Graph（微型力导向关系图）

• 数据形状：由一个中心核心与若干边缘卫星节点构成的网络，总节点在 15 个以内。
• 适合干什么：产品集成生态示意图（展示当前平台与周围 10 几个外部 API 的连接状态）。
• 怎么用：支持用鼠标轻触拖拽，中心节点引力拉扯周围小球回弹晃动，形象生动。
• 什么时候不要用：节点数量超过 20 个导致小球严重互相重叠踩踏（大图请看 B2）。

G12 Stagger Wave（交错波浪分布图）

• 数据形状：包含 30–60 根密集条目的多类目宏观分布。
• 适合干什么：短视频入场动效、发布会大屏开场展示各海外市场的梯次排布。
• 怎么用：数十根细长柱体从左到右以微小的时间差依次升起，形成一道波澜起伏的动态声浪。
• 什么时候不要用：读者需要拿着尺子逐根查询某一个具体条目精确数值的复盘分析。

G13 Big Slice / Custom Pie（极坐标切片图）

• 数据形状：多维复合编码（扇区的圆心角度代表数量占比，向外延伸的半径长度代表使用强度）。
• 适合干什么：深度产品分析（不仅能一眼看出哪项功能用户用得最多，还能看出哪项功能虽然人少但属于高频重度依赖）。
• 怎么用：圆盘被切割成宽窄不一、长短不同的特殊锯齿切片，双重信息在一个视域内同时交付。
• 什么时候不要用：受众是不懂复杂可视化规则的普通非专业读者，极易产生理解偏差。

G14 Single Axis（单轴打孔点图）

• 数据形状：由星期 × 小时构成的二维时间周期打孔数据，附带数值大小。
• 适合干什么：系统运维团队快速定位服务报警多发于哪一天的几点钟。
• 怎么用：周一到周日各占一条水平 single axis，每条轴上按 0–23 时布置散点，点的大小代表数量。这既保留每天的节律，又避免大网格占据太多空间。
• 什么时候不要用：需要保留标准日历网格直观对应排班表的行政统计。

G15 Jitter Strip（抖动散点带）

• 数据形状：多分组的连续分布数据，底层包含几百条具体的原始流水记录。
• 适合干什么：技术支持工单耗时分布排查，直接暴露是否存在偶发的超大延迟极端个案。
• 怎么用：横轴表示连续数值（例如工单解决小时数），纵向是分组轨道；点在各自轨道附近做小幅纵向抖动，避免重叠并保留每条原始记录。
• 什么时候不要用：只有经过高度汇总后的几个孤立平均值，没有原始样本点。

G16 Bar Race（动态竞速条形图）

• 数据形状：跨越多个离散时间段（如 12 个月、5 个季度）的多个实体排名变化。
• 适合干什么：短视频平台爆款数据视频、公司全员大会上回顾全年各战区业绩排行榜的交替反超。
• 怎么用：条形图伴随时间流动上下平滑换位窜升，动态展示冠军宝座的争夺。
• 什么时候不要用：静态图文排版、长文插图（静态无法播放动态过程）。

G17 Dynamic Stream（实时动态流图）

• 数据形状：按秒或分钟级别源源不断涌入的高频实时滚动数据。
• 适合干什么：机房监控总控大屏、大促活动现场直播时并发访问流量波形展现。
• 怎么用：波浪曲面从右向左匀速平移推移，最新涌入的数据在最右侧实时激起波澜。
• 什么时候不要用：数据早已固化归档的静态离线历史复盘报告。

G18 Draw-in + Counter（一笔画连线与大数记数器）

• 数据形状：单一核心累积指标的时间走势，附带一个终局关键大数字。
• 适合干什么：年终汇报或演讲幻灯片开场，烘托“上半年公司总营收突破 10 个亿”等震撼人心的里程碑。
• 怎么用：大数字计数器逐步到达最终值，同时累积趋势线从左向右绘入；两者使用同一组数据，保证大数与曲线终值同步一致。
• 什么时候不要用：需要深入推演多条支线业务原因细节的专业技术研讨。

G19 Violin（小提琴图）

• 数据形状：分组连续数值的概率密度轮廓全貌，搭配中位数线。
• 适合干什么：作为后备方案。在仪表盘中快速对比不同收费计划用户的工单响应时长分布胖瘦。
• 怎么用：轮廓外形如同一把小提琴，鼓胀最宽的地方说明数据最集中，中间标有白色中位数实心点。
• 什么时候不要用：各组样本太少、密度估计不稳定，或者任务需要直接读取五数概括和离群值时；后一种情况换 F15。

G20 Matrix Heat / Glance（粗读矩阵热力图）

• 数据形状：两个离散维度交叉 × 数值，总单元格在 60 格以内。
• 适合干什么：作为后备方案。业务周报中快速巡检不同软件版本在不同操作系统上的兼容性故障率。
• 怎么用：方块面积大、颜色反差强烈，数字直接居中印在大方格里，无需悬停即可 3 秒扫读完毕。
• 什么时候不要用：单元格数量上百格的深度科研透视（此时请使用细线版 L16）。

G21 Rank Strip（静态排名条带图）

• 数据形状：多个业务实体在几个离散考核时点（如 Q1 至 Q4）上的排名升降顺序。
• 适合干什么：作为后备方案。静态印刷排版中复盘不同产品线的排位更迭，是动态条形竞速（G16）的最佳静态替代品。
• 怎么用：左右各列出考核时点，实体线条在中间如同彩色缎带般互相穿插变道，清晰还原反超瞬间。
• 什么时候不要用：实体或时点多到交叉线难以追踪时不要硬塞；应筛选重点实体、拆图，或改用可交互的 G16。

G22 Aggregate Sankey（粗聚合桑基图）

• 数据形状：从左侧少数几个起点向右侧少数几个终点聚合分流的总量流动，不强调微观线头。
• 适合干什么：作为后备方案。宏观汇报全渠道市场营销投入究竟流入了哪些转化漏斗阶段。
• 怎么用：色带带宽严格等比例对应流量体量，两端平滑过渡，主要看支流粗细分配。
• 什么时候不要用：需要读者逐根跟踪 100 多条具体微观业务线穿透过程（穿透请用大图 B3）。

地图 · 2 款（需联网 GeoJSON · 仅限明确要求时调用）

数据中包含“北京”、“加利福尼亚”或“德国”等地理名词，并不意味着一定要画地图。在大多数情况下，用柱状图或条形图比对各省市数据远比地图更清晰，因为地图的区域面积往往会严重误导视觉（面积巨大的省份销量可能极小）。

只有当你明确向 AI 强调“绘制地域分布地图”时，以下两款图型才会被触发。地图底层采用 ECharts 渲染并依赖在线 GeoJSON 地理边界数据，因此必须在联网状态下运行。

M1 US Choropleth（美国州级分级着色地图）

• 数据形状：美国 50 个州的代码或全称，对应非负绝对数值或比率指标。
• 适合干什么：美国本土跨境电商各州销售额盘点、北美市场各州渗透率汇报。
• 怎么用：整个美国版图按州界分割，颜色的明暗深浅直接与指标高低挂钩，附带图例说明。
• 什么时候不要用：纯粹对比排名前五的州（柱状图更高效）；或者需要标出精确经纬度送货点位的场景。

M2 World Choropleth（世界国家级分级着色地图）

• 数据形状：全球各国国家代码，对应非负指标数值。
• 适合干什么：出海业务全球化布局总览、海外用户注册量洲际分布报告。
• 怎么用：世界地图轮廓铺开，依据各国数值自动填色，鼠标悬停可展示具体国家数值弹窗。
• 什么时候不要用：国内下沉市场本地调研；或者需要展现不同跨国城市间物流航线走向的场景。

独立交互大图 · 3 款（整页幅面 · 用于高密度关系数据）

当你的数据关系极其庞杂（例如有近百个合作节点、几百条交叉流向），在常规的小卡片或文章段落中根本塞不下时，Lieflat Charts 提供了 3 款单图成页的独立大型交互组件。它们各自独占一个独立的 HTML 文件，具备极为细腻的交互反馈。

B1 用悬停聚焦节点关系，B2 可以拖拽节点观察力导向网络回弹，B3 能沿单条路径或整束路径追踪数据流。下面先播放三种交互状态的实际演示，再看每张大图适合承载什么数据。

B1 Big Circular（环形弦膜大图 · templates/big-circular.html）

• 数据形状：节点超过 15 个的高密度关系网络；仓库的参考模板使用 60 个节点。
• 适合干什么：高校学术合作论文引用关系、全公司数百个微服务接口间的网状依赖排查。
• 怎么用：所有节点沿超大圆环边缘等距排列，内部被发丝般半透明的弦线完全填满。鼠标悬停在某个节点上时，与其无关的线条瞬间淡化退后，唯一高亮其直接关联节点，点击可重新播放收拢动效。
• 什么时候不要用：节点少于 15 个的轻量关系示意（轻量请用 G6）。

B2 Big Force（星系力导向图 · templates/big-force.html）

• 数据形状：需要逐节点查询的大型拓扑关系网络；仓库的参考模板使用 180 个节点。
• 适合干什么：巨型开源社区全量贡献者星系图、金融交易反洗钱异常资金穿透大屏。
• 怎么用：物理引擎模拟引力与斥力，上百个球体如同繁星般缓缓旋转舒展。读者可以用鼠标随意拖拽某个核心小球，整个星系随之弹性拉扯回弹；悬停可聚焦查看子星团。
• 什么时候不要用：追求严谨数据表格核算的会议审查；或者只想静态截图发朋友圈的场景。

B3 Big Threads（百缕丝线路径图 · templates/big-threads.html）

• 数据形状：三段路径中包含 100 条以上真实流向，需要逐路径查询。
• 适合干什么：用户在复杂多步骤产品界面的微观行为流转跟踪、端到端全链路业务损耗归因。
• 怎么用：无数条如发丝般的微细彩色丝线自左向右纵横穿梭。读者可以将光标滑过单根丝线或某整束线群，底部状态栏会精准锁定并吐出这条路径的完整履约数字，点击可永久钉住视图。
• 什么时候不要用：仅仅是想向领导汇报“总共来了多少人、最后剩多少人”这类粗颗粒度结果（此时用 L13 或 G22 即可）。

报告模板速查（R01–R12 · 整页排版架构）

当你的任务不仅是画单张图，而是要输出一整张可以直接对外发布的研报、长图或大屏时，可以使用以下 12 套模板。它们是预先设计好的版面容器，内部已经将图表配比、排版网格和色彩规范调优完毕，不应计入单图图表库的总数中。

12 套整页骨架的真实预览；先看信息密度与版式，再回到下方表格比较用途和依赖。

在实际使用时，建议先依据受众与场景至少对比 3 套候选方案。一旦锁定某一套模板，就应保持其完整排版骨架，不要擅自将两套模板剪切拼接。

把数据交给 Agent：三种可直接改写的提示词

作为写作者、运营或产品经理，你不需要研究底层代码，只要把下面整理好的提示词复制并贴给接入了 Lieflat Charts 技能的 AI，将括号内的内容替换为你自己的真实数据即可。

公众号长文深度插图

“我正在写一篇关于【用户付费习惯变化】的行业深度长文。这是我整理的调研数据：【粘贴你的数据，例如不同计划的续费率、用户核心吐槽点比例】。 请帮我制作 3 张适合嵌入文章中的中文版数据图表。 严格执行选型规则：请优先在 Lupi Editorial 和 Lupi Basics 组中审计筛选候选图型；只有两组均不适合表达该数据结构时，才考虑进入 Glance。全套图表色彩统一锁定为 Porcelain（青瓷蓝）色系。请输出独立且可直接双击预览的 HTML 文件。”

高管周报与监控看板

“这是我们团队本周的核心业务监控数据：【粘贴数据，例如 5 款核心功能日活环比、4 个渠道的获客成本】。 领导需要在 10 秒钟内看懂变化。请按照 Glance 规范为我生成图表，要求线条粗壮醒目、重点突出、附带大数字直观结论。色彩请统一采用 Wire（编辑部黑灰底色 + 荧光橙强调），仅在出现最大异常或亮点的关键数据上使用橙色，其余数据保持素雅灰阶。”

年度复盘与调研一页纸

“我们需要为客户输出一份年终服务总结报告。这是我们全年的数据明细：【粘贴全量数据】。 请启用报告模式，在 R01–R12 中先对比 3 个最契合的模板并告诉我推荐理由。确认后，请严格套用选中的报告骨架生成一份完整的 HTML 单页，版心宽度请控制在标准宽度，确保各模块之间的间距呼吸感与文字排版优雅易读。”

去 GitHub 获取 Lieflat Charts

想让 AI 直接生成这些 HTML 图表或整页报告，可以进入 Lieflat Charts GitHub 仓库 查看完整模板、安装方式和最新代码。安装完成后，把你的数据、使用场景和希望的阅读速度交给 Agent，再让它依据本文的图表编号完成选型与生成。