渐变堆叠面积图

概述

渐变堆叠面积图将堆叠面积的组成视图与平滑的渐变填充相结合，形成连贯的色彩过渡。它既提升视觉吸引力，又帮助观察各系列贡献随时间的变化。

何时使用

• 展示各部分随时间对总体的贡献
• 强调不同组成状态之间的平滑过渡
• 制作多组件趋势的吸引力演示
• 以更美观的方式展示分层数据

不适用

• 需要精确数值时（渐变不利于精读）
• 超过 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) 有何不同？ 堆叠面积从零开始，保留绝对值与总量。流图围绕中线居中，强调流动形态但失去绝对参考。需要总量时用堆叠面积；只想呈现节奏感时用流图。