VISUAL VOCABULARY / 01

Graph Atlas / 圖表圖鑑

比較同一份資料的呈現方式,選擇符合目的的圖表與製作指示。

12筆配送時間,你想看什麼?

切換下方顯示,比較個別數值與分布的差異。

長條圖01020304050配送時間・分鐘ID13579111281214151617182022263248
個別數值 · 12

直方圖表示數值區間的次數;長條圖表示各項目的值。

可用按鈕選擇靜止畫面。所有說明都能在沒有動態時閱讀。

長條與直方圖 ↓

配送時間・分鐘 · 8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48

02 / 選擇目的

切換下方顯示,比較個別數值與分布的差異。

長條圖01020304050配送時間・分鐘ID13579111281214151617182022263248
長條圖
直方圖0123456筆數配送時間・分鐘0102030405016311
直方圖

長條圖的橫軸是項目;直方圖的橫軸是數值區間。

[0,10)=1; [10,20)=6; [20,30)=3; [30,40)=1; [40,50)=1; n=12

圖表與資料是自製的虛構範例,不代表實績或預測。

03 / 12

選擇目的

12 項目

01

長條圖 / Bar chart

比較
長條圖01020304050配送時間・分鐘ID13579111281214151617182022263248
範例資料 · ID 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
表示什麼
用長條的長度比較各項目的數量。
與相似圖表的差異
直方圖表示數值區間的次數;長條圖表示各項目的值。
使用時機
比較部門營收或每筆配送時間。
條件與注意事項
數量軸從0開始,單位保持一致。
製作指示

請用以下虛構資料製作圖表。 ID 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. 長條圖 / Bar chart. 比較部門營收或每筆配送時間。 數量軸從0開始,單位保持一致。

02

折線圖 / Line chart

趨勢
折線圖01020304050數量月份135791112
範例資料 · 月份 1–12; 數量 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
表示什麼
連接有順序的數值,呈現變化。
與相似圖表的差異
散佈圖呈現兩個數值的關係;連線還表示順序或連續性。
使用時機
追蹤每月營收或時間序列。
條件與注意事項
依時間排序,註明間隔與缺漏值。
製作指示

請用以下虛構資料製作圖表。 月份 1–12; 數量 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. 折線圖 / Line chart. 追蹤每月營收或時間序列。 依時間排序,註明間隔與缺漏值。

03

面積圖 / Area chart

趨勢
面積圖01020304050數量月份135791112
範例資料 · 月份 1–12; 數量 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
表示什麼
填滿折線與基準線之間的區域,強調數量的變化。
與相似圖表的差異
折線強調變化;面積強調相對基準線的數量。
使用時機
呈現不同期間的處理量。
條件與注意事項
以0為基準,避免重疊區域遮住其他數列。
製作指示

請用以下虛構資料製作圖表。 月份 1–12; 數量 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. 面積圖 / Area chart. 呈現不同期間的處理量。 以0為基準,避免重疊區域遮住其他數列。

04

百分比堆疊長條圖 / 100% stacked bar chart

比例
百分比堆疊長條圖比例・%1A 25B 40C 352A 40B 20C 40
範例資料 · 1: A=25, B=40, C=35; 2: A=40, B=20, C=40; 比例・%; 數量 1=100, 2=200
表示什麼
將每個整體設為100%,比較組成比例。
與相似圖表的差異
一般堆疊長條保留總量;百分比圖會消除總量差異。
使用時機
比較部門或期間的組成比例。
條件與注意事項
統一組成項目,並註明原始總量。
製作指示

請用以下虛構資料製作圖表。 1: A=25, B=40, C=35; 2: A=40, B=20, C=40; 比例・%; 數量 1=100, 2=200. 百分比堆疊長條圖 / 100% stacked bar chart. 比較部門或期間的組成比例。 統一組成項目,並註明原始總量。

05

圓餅圖 / Pie chart

比例
圓餅圖A 25%B 40%C 35%
範例資料 · A=25, B=40, C=35; 比例・%
表示什麼
將整個圓設為100%,用扇形呈現各部分的比例。
與相似圖表的差異
長條便於比較接近的值;圓餅強調部分與整體。
使用時機
呈現少數互不重疊的組成項目。
條件與注意事項
比例合計為100%,排除負值與重疊項目。
製作指示

請用以下虛構資料製作圖表。 A=25, B=40, C=35; 比例・%. 圓餅圖 / Pie chart. 呈現少數互不重疊的組成項目。 比例合計為100%,排除負值與重疊項目。

06

直方圖 / Histogram

分布
直方圖0123456筆數配送時間・分鐘0102030405016311
範例資料 · ID 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
表示什麼
把數值分成區間,以各區間的次數呈現分布。
與相似圖表的差異
長條圖的橫軸是項目;直方圖的橫軸是數值區間。
使用時機
觀察配送時間的集中、離散與長尾。
條件與注意事項
註明區間邊界。寬度不同時,面積須與次數成正比。
製作指示

請用以下虛構資料製作圖表。 ID 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. 直方圖 / Histogram. 觀察配送時間的集中、離散與長尾。 註明區間邊界。寬度不同時,面積須與次數成正比。 區間寬度・分鐘 10; [0,10), [10,20), [20,30), [30,40), [40,50).

07

盒鬚圖 / Box plot

分布
盒鬚圖配送時間・分鐘0102030405017.5
範例資料 · ID 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
表示什麼
以中位數、四分位數、鬚與外側點摘要分布。
與相似圖表的差異
直方圖呈現分布形狀;盒鬚圖可能隱藏多個峰值。
使用時機
比較各組配送時間的中心與離散程度。
條件與注意事項
註明四分位數與鬚的計算方式,外側點不一定是錯誤。

四分位數採線性插值,鬚延伸至1.5IQR內最外側的值。外側點為48分鐘。

製作指示

請用以下虛構資料製作圖表。 ID 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. 盒鬚圖 / Box plot. 比較各組配送時間的中心與離散程度。 註明四分位數與鬚的計算方式,外側點不一定是錯誤。 四分位數採線性插值,鬚延伸至1.5IQR內最外側的值。外側點為48分鐘。

08

散佈圖 / Scatter plot

相關
散佈圖01020304050配送時間・分鐘距離・km135791112
範例資料 · 距離・km 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]
表示什麼
以橫、縱位置呈現兩個數值的關係。
與相似圖表的差異
折線還表示點的順序;散佈圖不連接觀察點。
使用時機
觀察距離與配送時間的關係。
條件與注意事項
標示軸與單位,不要只憑相關就斷定因果。
製作指示

請用以下虛構資料製作圖表。 距離・km 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]. 散佈圖 / Scatter plot. 觀察距離與配送時間的關係。 標示軸與單位,不要只憑相關就斷定因果。

09

泡泡圖 / Bubble chart

相關
泡泡圖01020304050配送時間・分鐘距離・km135791112圓面積=包裹數 4 / 9 / 16 / 25
範例資料 · 距離・km 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]; 圓面積=包裹數 4 / 9 / 16 / 25
表示什麼
在散佈圖的位置之外,以圓的面積呈現第三個數量。
與相似圖表的差異
散佈圖以位置呈現兩個量;泡泡圖還需解讀大小。
使用時機
同時比較距離、配送時間與包裹數。
條件與注意事項
使面積而非半徑與數值成正比,注意重疊與大小圖例。
製作指示

請用以下虛構資料製作圖表。 距離・km 1–12; 配送時間・分鐘 [8, 12, 14, 15, 16, 17, 18, 20, 22, 26, 32, 48]; 圓面積=包裹數 4 / 9 / 16 / 25. 泡泡圖 / Bubble chart. 同時比較距離、配送時間與包裹數。 使面積而非半徑與數值成正比,注意重疊與大小圖例。

10

排序長條圖 / Ranked bar chart

排名
排序長條圖比例・%B40C35A25
範例資料 · A=25, B=40, C=35; 比例・%
表示什麼
依數值由大到小排列,呈現排名與差距。
與相似圖表的差異
一般長條可保留原有順序;排序會失去時間順序。
使用時機
觀察領先部門或商品與下一名的差距。
條件與注意事項
訂明同名次的處理方式,不要重排時間或流程順序。
製作指示

請用以下虛構資料製作圖表。 A=25, B=40, C=35; 比例・%. 排序長條圖 / Ranked bar chart. 觀察領先部門或商品與下一名的差距。 訂明同名次的處理方式,不要重排時間或流程順序。

11

瀑布圖 / Waterfall chart

流量
瀑布圖050100150數量步驟1234510030-2010120
範例資料 · 數量 100; Δ +30, −20, +10; Σ 120
表示什麼
從初始值逐步累加增減,呈現到最終值的變化。
與相似圖表的差異
堆疊長條呈現組成;瀑布圖呈現累計增減。
使用時機
說明預算或利潤如何從起點到終點。
條件與注意事項
區分初始值、增減與合計,確認計算一致。
製作指示

請用以下虛構資料製作圖表。 數量 100; Δ +30, −20, +10; Σ 120. 瀑布圖 / Waterfall chart. 說明預算或利潤如何從起點到終點。 區分初始值、增減與合計,確認計算一致。

12

桑基圖 / Sankey diagram

流量
桑基圖A 60B 40C 50D 50
範例資料 · A→C=40, A→D=20, B→C=10, B→D=30; 數量
表示什麼
用帶狀寬度按比例表示來源與去向的數量。
與相似圖表的差異
流程圖表示步驟或關係;桑基圖表示各路徑的量。
使用時機
觀察部門間轉移或資源配置。
條件與注意事項
統一單位,註明流入、流出與損失的平衡。

帶寬與流量成正比。A流出60、B流出40,C與D各流入50。

製作指示

請用以下虛構資料製作圖表。 A→C=40, A→D=20, B→C=10, B→D=30; 數量. 桑基圖 / Sankey diagram. 觀察部門間轉移或資源配置。 統一單位,註明流入、流出與損失的平衡。

依目的列出的收錄範圍

選擇目的已收錄未收錄
比較長條圖2
趨勢折線圖, 面積圖2
比例百分比堆疊長條圖, 圓餅圖2
分布直方圖, 盒鬚圖3
相關散佈圖, 泡泡圖2
排名排序長條圖2
流量瀑布圖, 桑基圖2

範圍外 · 地圖、關係圖與專門的3D統計表達。

用語與條件的來源

其他視覺表達

網頁設計詞彙與視覺 · 階層結構視覺化 · 圓環關係視覺化