雙軸折線圖

概述

雙軸折線圖讓兩條共用 X 軸（通常是時間）但數值尺度不同的序列同框呈現。除了左側主 Y 軸外，再於右側加上次要 Y 軸，讓每條線各自對應自己的範圍。只要其中一個指標是數百量級、另一個是個位數百分比，就該用雙軸——硬擠在同一條 Y 軸上會把較小的序列壓成貼近零的平線。想了解各種折線圖的適用場景，可參考折線圖的各種類型。

何時使用

• 比較「量」與「率」（營收 vs 轉換率、工作階段 vs 跳出率）
• 同時呈現價格與數量（單價 vs 銷量）
• 把絕對值與指數／百分比疊在一起（銷售額 vs 市佔率）
• 追蹤單位不同的因與果（廣告花費 vs ROAS）
• 在儀表板上用一張圖呈現兩個相關 KPI 以節省版面

不適用

• 兩條序列單位與尺度相同時——改用多序列折線圖
• 當兩軸範圍被刻意調成重疊、容易誤導「兩線相關」時
• 面向需要快速掃讀的受眾——雙軸一定會增加認知負擔
• 當有三種以上不同單位時——圖會變得難讀，建議改用小型多重圖（small multiples）

關鍵變體

• 左側數值軸 + 右側數值軸（最經典的組合）
• 主軸線性 + 次軸對數，處理跨度極大的資料
• 軸色與線色一一對應，讓讀者一眼對上尺度
• 兩軸是否對齊零基準——請刻意選擇，不要隨意

使用情境

• 行銷：每月流量（次數）vs 轉換率（%）
• 財務：營收（金額）vs 毛利率（%）
• 電商：訂單數（次數）vs 客單價（金額）
• 產品：活躍用戶（人數）vs 留存率（%）
• 營運：產出（單位）vs 不良率（%）

在 Line Graph Maker 的快速設定

1. 將資料整理成寬格式：第一欄是共用的 X 軸，後面每一欄是一個指標。若資料目前是 JSON，可先用我們免費的 JSON 轉 CSV 工具 轉成 CSV。
2. 把大尺度指標指派到主（左）軸，小尺度指標指派到次（右）軸。
3. 為每條軸標上含單位的清楚名稱，例如「營收（千美元）」與「轉換率（%）」。
4. 線色對應軸色，讓讀者立刻知道該讀哪一條尺度。

資料（CSV）

月份,營收,轉換率
1月,120,1.8
2月,135,2.0
3月,128,1.9
4月,156,2.3
5月,171,2.5
6月,165,2.4
7月,189,2.8
8月,204,3.0
9月,198,2.9
10月,221,3.2
11月,243,3.4
12月,268,3.6

圖表設定（JSON）

讓這張圖變成雙軸的關鍵是 seriesYAxisIndex：營收 綁定到軸 0（左軸），轉換率 綁定到軸 1（由 yAxisSecondary 定義的右軸）。再讓每條線的顏色對應它的軸，兩種尺度就能輕鬆分辨。

效能提示

• 兩條軸都標上單位——沒有標籤的雙軸圖幾乎無法判讀
• 線色對應軸色（或標籤），消除歧義
• 不要為了讓兩線交叉而刻意調整範圍，那會暗示一段未必存在的關係
• 維持只有兩個指標；若出現第三種單位，改用小型多重圖

常見問題

什麼是雙軸折線圖？ 雙軸折線圖讓兩條序列共用同一條 X 軸，但使用兩條獨立的 Y 軸——通常一條在左、一條在右——讓每個指標各自對應自己的尺度。當兩個指標共用時間軸卻有截然不同的範圍或單位時就會用到。

什麼時候該用兩條 Y 軸而非一條？ 當一條序列會被另一條壓平時就該用兩條 Y 軸。例如數百量級的營收與 2～3% 的轉換率無法在同一條軸上判讀。若兩個指標單位相同、範圍相近，單一 Y 軸搭配多條線會更清楚。

雙軸圖會不會誤導讀者？ 會。因為你可以獨立調整每條軸的範圍，所以能讓兩條毫無關係的線看起來一起變動。請避免刻意挑選軸範圍來製造視覺重疊，也不要僅憑「對齊」就推論因果。

如何清楚標示兩條軸？ 把單位直接寫進軸名（例如「營收（千美元）」與「轉換率（%）」），並讓每條線的顏色對應它的軸。讀者不該需要猜哪條線屬於哪條尺度。

雙軸圖和組合圖（combo chart）有什麼差別？ 雙軸折線圖用的是兩條折線；組合圖則混用不同圖型——最常見是一個指標用長條、另一個用折線——再搭配兩條軸。當一個指標本質是量值（長條）、另一個是趨勢（折線）時，就用組合圖。

一張雙軸圖能放幾個指標？ 建議只放兩個。每多一條軸，讀者把線對應到尺度所花的力氣就成倍增加。若有三種以上單位，小型多重圖（每個指標一張小圖）的傳達會可靠得多。