Bump chart（排名）

概述

Bump 图通过显示每个实体的名次（第 1、2、3 名等），而不是绝对数值，来呈现排名随时间的变化。实体互换位置时折线会交叉，倒置的 y 轴把第 1 名放在顶部，使得向上的线表示排名提升，向下的线表示名次下降。

何时使用

• 跨时期跟踪竞争排名
• 展示联赛、竞赛或市场中的位置变化
• 强调相对顺序而非绝对数值
• 对比那些“名次比数值更重要”的实体
• 可视化锦标赛或比赛的晋级过程
• 突出排名的剧烈变化

不适用

• 故事更看重绝对值而非名次时
• 排名稳定、几乎没有交叉（图表会显得平淡）
• 受众需要精确的数值时
• 不能呈现动画的印刷或静态媒介
• 同时展示超过 12 个实体（会难以跟踪）

关键变体

• 倒置 y 轴（第 1 名在最上方）
• 平滑曲线 vs. 直线连接各点
• 对关键实体的轨迹做突出
• 用水平线段呈现并列名次
• 末尾标签显示最终排名
• 悬停交互便于跟踪每条路径
• 颜色编码强调上升/下降

使用场景

• 赛季中的体育联赛排名
• 多年间的大学排名
• 销售团队的季度排名
• 各品类产品的长期领先者
• 应用商店或搜索结果排名（SEO）
• 品牌偏好或调研结果的变化
• 选举民调走势

数据 (CSV)

Year,Orange,Tomato,Apple,Sakana,Banana,Iwashi,Snappy Fish,Lemon,Pasta
2001,2,8,4,7,9,6,1,7,3
2002,2,8,4,3,9,6,1,7,4
2003,3,3,6,8,7,6,1,9,5
2004,2,7,4,8,8,5,1,9,3
2005,2,4,3,5,3,6,1,9,3
2006,2,8,4,5,9,6,1,7,3

图表配置 (JSON)

设计提示

• 为每个实体使用鲜明、可区分的颜色
• 启用平滑曲线，呈现流畅的视觉效果
• 放大 symbolSize，突出每个时间点
• 倒置 y 轴，让第 1 名在顶部便于阅读
• 预留右侧边距（约 110–150 px）用于末尾标签
• 将线宽设置为 3–4 px 以提升可读性
• 添加 x 轴网格线帮助对齐时间
• 将 y 轴标签格式化为 “#1”“#2”… 强化排名语境
• 开启悬停时的强调，便于追踪单条系列

性能提示

• 控制在 9–12 个实体以内以保持清晰
• 使用易区分的颜色帮助追踪各条线
• 打开悬停高亮以便跟随轨迹
• 当实体过多时考虑筛选“top N”
• 对时间点很多的数据，按固定间隔抽样
• 启用平滑曲线以降低交叉时的视觉噪声

常见问题

第 1 名应该在顶部还是底部？ 多数竞争场景会把第 1 名放在顶部（倒置 y 轴），让更好的名次对应更高的位置。请选择最适合受众的方式，但倒置通常更直观。

如何处理并列？ 将并列的实体放在同一高度，用水平线段表示。如果需要打破并列，请在注释中说明处理方式。

能同时显示名次和数值吗？ 可以。工具提示里同时展示排名和对应数值，但主图应聚焦名次；若数值同样重要，考虑其他图表形式。

排名有缺口或跳号怎么办？ 选择是显示连续名次（1,2,3）还是保留真实名次（1,3,7）。对 bump 图来说，连续名次更易读；若合并缺口，请在说明里写清楚。

多少条线算太多？ 超过 12 条就难以阅读，因为交叉过多。可筛选为 “top N”，按类别拆成多个图，或提供交互筛选。

曲线还是直线？ 平滑曲线（smooth: true）更流畅，交叉时噪声更低。直线适合强调离散时间点。大多数 bump 图用平滑曲线更易读。

如何强调关键实体？ 在悬停时聚焦，给关键系列更粗的线或更亮的颜色（背景系列用柔和色）。末尾标签能帮助识别最终名次，无需依赖图例。