Line Chart Types/Area & Stacked/Area Pieces

分段面积图

按数值区间分段填充面积，用于条件强调与阈值高亮。适合基于事件的分析、A/B 测试窗口标记和异常检测等场景。支持自定义分段颜色与标记线。

Advanced分段面积分段阈值条件格式

Example

Guide

概述

分段面积图通过在特定时间段或索引区间使用不同的颜色或透明度，有选择地突出面积图的部分区域。这样既能将注意力引导到关键区间，又能保持对完整数据集的整体理解。

何时使用

  • 突出特定关注的时间段（事件、活动、事故）
  • 强调对比窗口（干预前/后的分析）
  • 标记特殊条件或运行状态
  • 吸引读者关注峰值或异常时期

不适用

  • 当所有时间段同样重要时
  • 突出段过多时（会削弱焦点）
  • 需要用连续渐变更好地说明过渡时
  • 针对数值阈值时（使用按数值的 visualMap 更合适）

关键变体

  • 按索引（位置）分段 vs 按时间分段
  • 多色分段 vs 单一强调色
  • 带或不带边界标记（竖线）
  • 显示或隐藏图例（如果突出本身已经足够说明）

使用场景

  • 市场营销：突出活动期间 vs 基准表现
  • 事故分析：标记故障或性能下降的时间窗
  • 季节性对比：强调旺季或节假日
  • A/B 测试：对比测试期与对照期
  • 事件影响：展示重大事件的前/中/后
  • 合规场景：标记需要特别关注的时段

数据 (CSV)

x,y
2019-10-10,200
2019-10-11,560
2019-10-12,750
2019-10-13,580
2019-10-14,250
2019-10-15,300
2019-10-16,450
2019-10-17,300
2019-10-18,100

图表配置 (JSON)

性能提示

  • 将突出段控制在 2–4 个，以获得最佳效果
  • 使用对色盲友好的高对比度配色
  • 添加垂直标记线（markLine）以清晰标出分段边界
  • 可添加注释说明为何突出这些区间
  • 保持基础填充的不透明度较低，让高亮更显眼

常见问题

visualMap 中的 "dimension: 0" 是什么意思？ 表示分段基于 x 轴的索引（dimension 0）。对于包含 9 个点的图表，索引 0–8 对应 x 轴上的每个位置，这样就能突出特定的时间段或区间。

为什么分段使用 "gt" 和 "lt"? gt（大于）和 lt（小于）定义了每个突出段的索引范围。例如，"gt": 1, "lt": 3 会突出索引 2（介于 1 和 3 之间）的点，为该区间填充颜色。

本例中的 markLine 有什么作用？ markLine 会在特定的 x 轴位置（索引 1、3、5、7）绘制垂直虚线，用于直观地标记突出区域的边界，帮助读者看清各区间的起止位置。

如何选择需要突出显示的分段？ 找出对你的故事最关键的时间段或数据区间：

  • 表现特别好或值得关注的时期
  • 具有特殊条件或事件的时间窗
  • 对比窗口（如干预前/后）
  • 高峰或低谷时期

可以为每个突出段使用不同的颜色吗？ 可以！visualMap 中的每个 piece 都可以有自己的颜色。用不同的颜色表示不同的事件类型或严重程度（例如蓝色表示积极事件，红色表示事故）。

为什么未突出区域的填充更浅？ 基础的 areaOpacity（0.4）作用于整个区域，而 visualMap 的分段会对特定区间进行覆盖，从而形成对比，让突出部分更显眼，同时保留整体上下文。

什么时候需要隐藏 visualMap 图例（show: false）？ 在以下情况可以隐藏图例：

  • 突出区域本身已经足够清晰（有分隔线或标签）
  • 你强调的是特定时间段，不需要类别标签
  • 图表已经有其他图例元素

当颜色代表需要识别的不同类别时（如“周末”、“促销期”、“维护窗口”），则应显示图例。

应该使用多少个突出段？ 保持 2–4 个为宜，过多的高亮区域会稀释重点，让图表更难解读。聚焦在最关键的时期即可。

Open in Line Graph Maker