基礎面積圖

概述

面積圖是在折線下方加上填色的圖表，增加視覺重量以強調數值規模。當「有多少」與「往哪個方向」同樣重要時使用它 — 填色區域讓不同時期之間的規模差異一目了然。

何時使用

• 強調隨時間變化的數值幅度
• 顯示累積總量、交易量或吞吐量
• 比較兩到三個面積時建立視覺層級
• 基線（零點）本身具有意義的資料
• 傳達單純折線無法表達的「質量感」或「重量感」

不適用

• 精確的逐點數值非常關鍵時（單純折線更清楚）
• 多序列重疊嚴重時（改用堆疊面積圖或小多圖）
• 存在負值且未妥善處理基線時
• 僅傳達趨勢方向時（直接使用基礎折線圖）

關鍵變體

• 單序列 vs 多序列（透過透明度重疊）
• 不透明度控制（重疊面積建議 0.3–0.7）
• 漸層填色（從上方色彩漸變至透明）
• 搭配信賴帶表達不確定性範圍
• 百分比面積（正規化至 100%）

使用情境

• 銷售：視覺化每週營收量體，同時呈現規模與趨勢
• 網站分析：頁面瀏覽量或工作階段數，流量量體是重點
• 金融：價格線下方的交易量、投資組合總值隨時間變化
• 能源：24 小時用電量，突顯尖峰與離峰差異
• 物流：每日包裹配送量，呈現季節性高峰
• 行銷：廣告支出或曝光量隨活動期間的變化
• IoT / 製造：感測器輸出量、每班次生產吞吐量

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

1. 準備 CSV 資料，欄位包含：x（時間/類別）、y（數值）、series（選填）。
2. 上傳或貼上資料至編輯器。
3. 選擇「Area」圖表類型，或設定 areaOpacity > 0 以在折線下方填色。
4. 調整 areaOpacity（單一序列建議 0.4–0.7）。
5. 啟用 enableGradient 以產生由上至下的漸層效果。
6. 匯出為 PNG/SVG 或分享即時連結。

資料（CSV）

x,y,series
2025-01-01,120,Sales
2025-01-02,135,Sales
2025-01-03,142,Sales
2025-01-04,158,Sales
2025-01-05,165,Sales
2025-01-06,178,Sales
2025-01-07,185,Sales

圖表設定（JSON）

效能提示

• 多序列重疊時使用較低不透明度（0.3–0.5）
• 若目的是呈現組成關係，優先使用堆疊面積圖
• 面對大型資料集（超過 10,000 點）可透過取樣簡化路徑
• 漸層填色增加視覺質感，但會多花幾毫秒渲染時間

常見問題

面積圖是否一定要從零開始？ 大多數情況是的。填色區域暗示「這麼多」，因此截斷 Y 軸會扭曲視覺比例。如果為了可讀性必須截斷，請加上清楚的標註，並考慮是否使用單純折線圖更誠實。

面積圖 vs 折線圖 — 什麼時候該加填色？ 當數值規模或量體是故事的一部分時加上填色。需要傳達「我們成長了很多」的營收圖表受益於填色。僅追蹤方向的溫度圖表則不需要。不確定時，兩者都試試，選擇更能回答受眾問題的那一個。

多序列重疊時如何處理？ 三種方法：

• 透明度：將不透明度設為 0.3–0.5，讓底層序列保持可見
• 堆疊面積圖：堆疊序列使其不重疊（呈現組成關係）
• 小多圖：每條序列獨立一張迷你圖（4 條以上序列最佳）

什麼不透明度看起來最好？ 單一序列建議 0.5–0.7，給人穩固且自信的感覺。兩條序列重疊時降至 0.3–0.4 以保持兩者可讀。除非只有一條序列且要最大化強調，否則不要超過 0.8。

可以使用漸層填色嗎？ 可以。從上方折線色彩漸變至底部透明的漸層能增加深度，同時不遮蔽基線。在圖表設定中啟用 enableGradient: true。

平滑面積 vs 折角面積，何時使用哪一種？ 平滑（smooth: true）在美學上更適合簡報。折角（預設）對每個點都是離散量測的資料更誠實。金融資料和科學量測使用折角；行銷看板和高層簡報使用平滑。

如何在面積圖中呈現負值？ 面積從折線向下填充至零基線，因此負值會在軸下方產生向下的填色。確保 Y 軸包含零，並考慮在基線上下使用不同色彩以區分正負區域。