堆疊面積圖

概述

堆疊面積圖將多條資料序列層層疊加，頂部邊緣呈現總計，每一色帶則顯示個別貢獻。當受眾需要同時看到「總量多少？」和「各部分佔比如何？」時，使用此圖表。

何時使用

呈現組成關係及各部分如何貢獻於整體
跨產品線、區域或類別顯示累積總量
同時強調個別成長與總體趨勢
比較各期之間相對比例的變動
傳達預算分配、資源配置或市場佔有率

不適用

個別序列數值比組成關係更重要時（使用獨立折線）
比較中間或頂層序列的精確數值時（它們坐落在移動的基線上）
超過 5–7 條序列（視覺雜訊使圖表無法閱讀）
存在負值時（堆疊邏輯會崩潰）

關鍵變體

標準堆疊：原始數值堆疊，頂部邊緣 = 總計
百分比堆疊：正規化至 100%，不論總量變化都能看到佔比變動
河流圖（Stream graph）：以中心為基線，適合敘事性強調
是否啟用平滑
漸層填色增加視覺質感

使用情境

產品管理：各產品線營收按季度拆解
行銷：流量來源（自然搜尋、付費、社群、直接）按月變化
金融：投資組合資產配置按年變化
能源：發電組合（太陽能、風力、煤炭、天然氣）隨時間變化
人資/營運：各部門或團隊人數隨成長期的變化
電商：各產品類別每週訂單量
政府：各部會預算支出隨會計年度變化

在折線圖產生器中快速設定

準備 CSV 資料，欄位包含：x（時間/類別）、y（數值）、series（類別名稱）。
上傳或貼上資料至編輯器。
選擇「Stacked Area」圖表類型。
調整 areaOpacity（堆疊圖建議 0.6–0.8）。
在圖例中重新排列序列以控制堆疊順序（最穩定的放最底層）。
匯出或分享你的圖表。

資料（CSV）

x,y,series
2025-01-01,30,Product A
2025-01-02,35,Product A
2025-01-03,40,Product A
2025-01-04,38,Product A
2025-01-05,42,Product A
2025-01-06,45,Product A
2025-01-07,48,Product A
2025-01-01,25,Product B
2025-01-02,28,Product B
2025-01-03,32,Product B
2025-01-04,30,Product B
2025-01-05,35,Product B
2025-01-06,38,Product B
2025-01-07,40,Product B
2025-01-01,15,Product C
2025-01-02,18,Product C
2025-01-03,20,Product C
2025-01-04,22,Product C
2025-01-05,25,Product C
2025-01-06,28,Product C
2025-01-07,30,Product C

圖表設定（JSON）

效能提示

限制 5–7 條序列以保持可讀性；將較小的類別合併為「其他」
使用一致的配色方案，讓受眾在不同報告中認出相同的類別
啟用互動式工具提示 — 這是必要的，因為中間序列在視覺上很難精確閱讀
若使用百分比堆疊，請清楚標註 Y 軸為「% 佔比」

常見問題

如何讀取中間序列的數值？ 觀察該序列在指定 X 位置上頂部邊緣與底部邊緣之間的垂直距離。互動式工具提示讓這件事更輕鬆 — 懸停即可看到精確數值，無需心算。

堆疊面積 vs 堆疊長條 — 該選哪個？ 當 X 軸是時間且你想呈現連續流動時，使用堆疊面積。當比較離散類別或每個區段的精確數值更重要時，使用堆疊長條。

什麼時候應該用百分比堆疊？ 當佔比變動比絕對成長更重要時。例如：「產品 A 的佔比從 30% 成長到 45% 了嗎？」vs「總營收從 100K 成長到 200K 了嗎？」如果兩者都重要，就分成兩張圖表呈現。

序列的堆疊順序應該如何排列？ 最穩定或最重要的序列放在底層（最靠近基線），因為它最容易閱讀。波動較大或較小的類別放在上層，因為移動基線造成的視覺扭曲在那裡比較不明顯。

可以在堆疊面積圖中突顯單一序列嗎？ 可以。使用 emphasis 選項在懸停時淡化其他序列，讓選中的序列更醒目。或者對突顯的序列使用不同的不透明度或色彩飽和度。

某條序列有缺失資料怎麼辦？ 堆疊要求所有序列在每個 X 點都有數值。用零填充缺失值（若該序列確實沒有貢獻），或使用插值。請記錄你的處理方式，避免誤導受眾。

什麼是河流圖（Stream graph），何時使用？ 河流圖是基線置中的堆疊面積圖，而非錨定在零點。它會產生對稱、流動的形狀，在簡報中視覺效果非常出色。用於敘事性的呈現；分析型看板中需要精確閱讀時請避免使用。

Example

Guide

概述