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 圖使用平滑曲線會更易讀。

如何突顯關鍵實體？ 在懸停時聚焦，為關鍵系列增加線寬或使用更亮的顏色（背景系列用柔和色）。末尾標籤有助於識別最終名次，減少對圖例的依賴。