漸變堆疊面積圖

概述

漸變堆疊面積圖把堆疊面積的組成視圖與平滑的漸變填充結合，形成連貫的色彩過渡。它兼具吸睛外觀並幫助觀察各系列貢獻隨時間的變化。

何時使用

• 展示各部分隨時間對總量的貢獻
• 強調不同組成狀態之間的平滑轉換
• 製作多元趨勢的吸睛呈現
• 以更美觀的方式顯示分層資料

不適用

• 需要精確數值時（漸變不利於精讀）
• 超過 5–7 條系列（資訊會混亂）
• 沒有自然順序的分類

關鍵變體

• 垂直漸變（每條帶由下而上）
• 水平漸變（沿時間軸）
• 按系列自訂色階
• 透過不透明度變化營造層次

使用場景

• 品牌市佔演變
• 多年能源結構組成
• 部門間預算分配變化
• 網站流量來源構成
• 產品組合的營收拆分

資料 (CSV)

x,Line 1,Line 2,Line 3,Line 4,Line 5
Mon,140,120,320,220,220
Tue,232,282,132,402,302
Wed,101,111,201,231,181
Thu,264,234,334,134,234
Fri,90,220,190,190,210
Sat,340,340,130,230,290
Sun,250,310,220,120,150

圖表配置 (JSON)

效能提示

• 系列數量維持在 7 條以內以保清晰
• 動畫使用平滑轉場
• 資料量極大時考慮漸進式渲染

常見問題

與傳統堆疊面積有何不同？ 這裡每條帶使用漸變填充而非純色，帶來更流暢、現代的觀感，也更容易感知資料的連續性。

多少條系列算太多？ 超過 5–7 層會混亂，尤其配合漸變時。可將小類合併為「其他」，或改用其他圖表。

是否一定要用漸變？ 不必。適用情境：

• 視覺吸引力是優先（簡報、報告、儀表板）
• 想要現代、精緻的外觀
• 數據故事需要流動感
• 受眾期待美觀的視覺化

避免使用：

• 需要精讀數值
• 科學或嚴謹分析情境
• 受眾偏好傳統圖表
• 需要黑白列印

平滑曲線還是明顯折角？

• 平滑曲線（smooth: true）：適合連續資料（銷售、溫度），與漸變最搭。
• 明顯折角（smooth: false）：適合離散資料或要強調精確點位。

大多數使用漸變的情境中，平滑曲線能強化流動感。

如何挑選好看的顏色？

• 確保相鄰帶之間有足夠對比
• 使用和諧的配色（類似色常見且好看）
• 尊重領域語義（藍代表水、綠代表成長）
• 調整不透明度：較淺的漸變在堆疊時更易閱讀
• 避免對色盲不友好的組合（避免紅綠衝突）
• 顏色數控制在 5–6 種

怎麼讀值最合適？ 堆疊面積圖更適合理解：

• 總體趨勢（最上方邊界）
• 相對占比（每條帶的厚度）
• 組成隨時間的變化

對中間層的精確值不如其他圖直觀；若精確比較很重要，可用 tooltip 或換圖表。

可以突出某條系列嗎？ 可以。嘗試：

• 更亮或更飽和的顏色
• 提高目標系列的不透明度
• 把關鍵系列放在最底部
• 用色彩對比引導注意力

堆疊面積與流圖 (stream graph) 的差別？ 堆疊面積從零開始，保留絕對值與總量。流圖以中線為中心，強調流動感但失去絕對參照。需要總量時用堆疊面積；只想呈現節奏時用流圖。