折線圖 vs 面積圖:你該用哪一個?
2026年4月21日
作者 Jacky Fan
2 分鐘讀完

折線圖 vs 面積圖:你該用哪一個?

面積圖就是填色的折線圖 — 但那層填色改變了圖表傳達的訊息。學習填色面積何時增加意義、何時製造混淆。

面積圖就是線下方有填色的折線圖。這一個設計選擇 — 填色 vs 不填色 — 改變了圖表傳達的內容、它能回答好的問題,以及它何時會產生誤導。理解這個取捨讓你每次都能選對。

根本差異

折線圖: 顯示數值隨時間的趨勢。眼睛跟隨線條的形狀 — 方向、斜率、峰值和谷值。線下方的空白不承載任何意義。

面積圖: 同時顯示趨勢和數值的量級。填色面積增加視覺重量,讓眼睛不僅感知「線在哪裡?」還感知「有多少?」線下方的空間編碼了資訊。

面向折線圖面積圖
強調趨勢方向和變化率量級、體積和累積量
視覺重量輕 — 眼睛跟隨線條重 — 填色吸引注意力
多序列線條清楚疊加面積重疊,遮蔽下層序列
最適合比較軌跡展示總量或組成
堆疊不適用堆疊面積展示部分與整體

何時使用折線圖

比較多個趨勢

當你有 2-7 個序列想比較軌跡時,折線圖獲勝。每條線都可見,不論位置。

強調變化率

裸線的斜率直接傳達變化速度。加入面積填色會將注意力從斜率轉移到填色空間 — 稀釋了變化率的訊息。

展示波動或嘈雜的資料

當資料快速波動時(每日股價、每分鐘伺服器指標),線條的鋸齒形狀就是訊號。加入面積填色會放大每個峰值和谷值的視覺噪音。

何時使用面積圖

強調量級

當訊息是關於有多少而非僅僅方向時,填色面積增加讓量級變得直覺的重量。

範例: 累積 COVID-19 病例。不斷擴大的線下面積以一種裸線無法做到的方式傳達病例的無情累積。

堆疊面積:展示組成隨時間變化

這是面積圖的殺手級功能 — 折線圖做不到的。

堆疊面積圖將多個序列堆疊,其中:

  • 任何點的總高度 = 所有序列之和。
  • 每個色帶的寬度 = 該序列對總量的貢獻。

範例: 網站流量按來源(自然搜尋、付費、社群、直接)在 12 個月內的變化。你同時看到總流量在成長,以及組成如何轉變。

100% 堆疊面積:展示比例隨時間變化

一種變體,所有序列在每個時間點堆疊到 100%。移除了絕對量級,純粹聚焦於每個類別的份額如何演變。

範例: 行動作業系統市場佔有率(iOS、Android、其他)在 10 年間的變化。

單序列強調

對單一資料序列,如果你想讓觀眾感受到量級,填色面積圖比裸線更有衝擊力。

重疊問題

面積圖最大的弱點是序列重疊。當多個未堆疊的面積被繪製時:

  • 最前面的序列遮蔽後面的。 即使有透明度,視覺混色使得精確閱讀個別序列變得困難。
  • 顏色混合不可預期。 藍色 + 黃色透明度產生綠色 — 可能被誤認為第三個序列。

解決方案

  1. 堆疊序列 — 如果你關心總量。堆疊完全避免重疊。
  2. 使用折線圖 — 如果你關心比較個別序列。線條永遠不會互相遮蔽。
  3. 使用 small multiples — 每個序列一張面積圖,共享相同的軸。

決策框架

步驟 1:幾個序列?

  • 一個 → 兩者皆可。面積增加強調;折線更乾淨。
  • 2-3 個 → 如果組成重要用面積(堆疊);如果比較重要用折線。
  • 4+ 個 → 折線圖,除非堆疊是明確目標。

步驟 2:訊息是什麼?

  • 「趨勢上升/下降/持平」→ 折線圖。
  • 「總量在成長,這是它的組成」→ 堆疊面積圖。
  • 「這個類別的佔比在縮小」→ 100% 堆疊面積。
  • 「看看這個量的大小」→ 面積圖(單序列)。

步驟 3:有重疊嗎?

  • 有 → 折線圖(始終可讀)或堆疊面積(設計上無重疊)。
  • 無 → 面積圖是安全的。

真實世界範例

按渠道的營收(使用堆疊面積)

四個渠道的月度營收。訊息:「總營收在成長,訂閱佔比越來越大。」堆疊面積完美呈現。

API 延遲 P50 vs P95(使用折線圖)

每分鐘的 P50 和 P95 回應時間。訊息:「P95 飆升而 P50 保持穩定。」折線圖讓兩個指標清楚可見。

季度累計銷售(使用面積圖)

單一產品在促銷季度的每日累計銷售。訊息:「我們賣了巨大的量,最後一週速度加快了。」面積圖讓量級變得直覺。

行動 vs 桌面流量佔比(使用 100% 堆疊面積)

5 年的月度流量分佈。訊息:「行動佔比從 30% 成長到 70%。」

製作和比較

使用 Line Graph Maker

  1. 上傳時間序列資料。
  2. 先建立折線圖 — 評估趨勢本身是否足以講述故事。
  3. 開關面積填色看填色版本是否增加意義或雜亂。
  4. 對多序列嘗試堆疊面積以查看組成檢視。
  5. 匯出最能傳達洞察的版本。

常見問題

我可以在同一張圖上同時使用折線和面積嗎?

可以。常見模式是主序列用填色面積,次序列用疊加的折線(例如面積表示絕對值,折線表示移動平均或目標)。保持面積低不透明度讓折線保持可讀。

堆疊面積圖是否總是優於堆疊折線圖?

是的,用於組成分析。「堆疊折線圖」中線條在彼此上方浮動但沒有填色,幾乎不可能判斷每個序列的貢獻。填色使堆疊能夠運作。

應該使用漸層填色嗎?

從上到下的漸層(線條處全色,向 X 軸淡化為透明)看起來精緻且減少視覺雜亂。這是單序列面積圖的好預設。堆疊面積中,低不透明度的純色更好。

如何處理面積圖中的負值?

零以下的面積應向下填色。對正負區域使用不同顏色。帶有負值的堆疊很複雜且常令人困惑 — 考慮分開圖表。

何時長條圖比兩者都好?

當你需要比較離散類別(不是時間序列)時。折線圖和面積圖都暗示連續性和序列。如果你的 X 軸是「部門」或「產品名稱」,用長條圖。

面積圖可以用於即時儀表板嗎?

可以,但使用固定時間窗口。面積圖能有效展示時間段的「繁忙」vs「安靜」。

雷達圖 / 蜘蛛圖 vs 面積圖?

雷達圖使用面積在環形佈局中比較多個類別。它們對比較輪廓(運動員技能、產品特徵)有用,但不適合時間序列資料。時間資料堅持使用標準面積圖。

分享這篇文章

幫助更多人看到這篇內容

發布於 2026年4月21日

作者 Jacky Fan