图表图鉴 第 10 号 / 监测序列

带异常高亮的折线图

Line Chart with Highlights / 水质溶解氧 30 天监测实例 / 制图室样张

anomaly / outlier / spike / alert / detection / monitoring / deviation / accessible chart / keyboard accessible chart

数据类型异常检测
最佳图型折线加高亮
备选形态散点警报图
交互级别悬停加警报
无障碍风险有条件
触发阈值5.0 / 9.5 mg/L

01 / 主图图版

溶解氧 30 天监测与三起异常

监测类图示的第一要务是先交代正常，再标出例外：底层一条连续蓝线描绘基线行为，异常作为独立数据层叠加其上，警报醒目而不淹没整体趋势。

图 10-a / 苕溪支流 R-07 浮标站 / 溶解氧逐日监测 / 异常 3 起

正常序列 异常点 警戒带

悬停图面读取任一日数值 / Tab 聚焦红色异常点读事件 / 完整数值后备见表 10-b

苕溪支流 R-07 站溶解氧 30 天监测折线图 蓝线为逐日午间采样的溶解氧，浅黄为上下警戒带，红色实心圆点标记三起异常：09-18 偏低 3.8，09-26 偏低 4.3，10-03 偏高 11.2 mg/L，完整数值见下方数据表。 4 6 8 10 12 溶解氧 mg/L 09-10 09-15 09-20 09-25 09-30 10-05 10-09 2026-09-10 至 2026-10-09 / 逐日 14:00 采样 上阈值 9.5 下阈值 5.0 警戒带 9.5 至 11.5 警戒带 3.5 至 5.0 A1 A1 偏低 3.8 mg/L 暴雨径流，耗氧激增 A2 A2 偏低 4.3 mg/L 上游清淤扰动底泥 A3 A3 偏高 11.2 mg/L 藻类增殖，午后过饱和

屏幕较窄时图面可横向滑动

09-10 至 10-09 / 30 日 / 均值 7.1 / 中位数 7.2 mg/L / 异常 3 起（A1 A2 A3）

02 / 图注与判据

阈值带与异常判据

异常的合法性来自判据的透明：把带、阈值与规则印在图上，读者才能复核每一次报警，而不是被动接受红点。

图 10-a 中，浅黄底为警戒带（3.5 至 5.0 与 9.5 至 11.5 mg/L），红色虚线为触发阈值；蓝线在安全带 5.0 至 9.5 内自然波动，均值 7.1、中位数 7.2 mg/L。三起异常均以实心红点加外环加事件号标出，图中直接注明原因，状态以文字与方向符号传达，不依赖颜色单独成立。

安全带 5.0 至 9.5 / 警戒带 3.5 至 5.0 与 9.5 至 11.5 / 判定 v<5.0 或 v>9.5 或 24h 变幅超 2.0 或偏离基线超 3σ

03 / 无障碍后备

持久事件台账

官方无障碍后备要求：异常事件列表加叙述性警报摘要，警报常驻而不依赖悬停。下表即图 10-a 的等价后备，读屏与键盘用户无需接触图形即可取到全部事件。

A1 / 偏低

09-18（第 9 日）

读值 3.8 mg/L

命中判据：低于下阈值 5.0，且 24 小时降幅 3.0 触发变率判据。

原因：台风外围暴雨，地表径流携入有机物，水体耗氧激增。

处置：当日 16 时启动增氧泵并加密巡检，次日回升至 5.4，48 小时后回归安全带。

A2 / 偏低

09-26（第 17 日）

读值 4.3 mg/L

命中判据：低于下阈值 5.0，24 小时降幅 3.3，为期内最深单日跌落。

原因：上游河道清淤扰动底泥，叠加夜间溶氧低谷。

处置：函告施工方调整作业时段，采样加密为每 4 小时一次，两日后恢复至 6.5。

A3 / 偏高

10-03（第 24 日）

读值 11.2 mg/L

命中判据：高于上阈值 9.5，24 小时升幅 3.4，进入上警戒带。

原因：连续晴热后藻类增殖，午后光合作用致溶解氧过饱和。

处置：挂牌观察叶绿素浓度，未发生鱼类死亡，次日回落至 8.8。

04 / 选型边界

何时使用，何时退避

本图型的分工很明确：时间序列负责讲清基线，高亮层负责讲清例外。例外若已固化成类别，就该换一种图型。

适用

用时序守候离群

监测时间序列中的离群点

  • 向用户提示运营数据的意外尖峰或骤降，异常占比低（本例 3/30）
  • 需要"基线加例外"的双层叙事：先证明平常，再指出反常
  • 读者需要沿时间复核事件前后的恢复轨迹（如 A1 后两日回升）

不适用

换图型的三种情形

改用带高亮的条形图或事件流

  • 异常是预定义类别（如已知故障码）时，改用带高亮的条形图
  • 实时场景且无暂停控制时不应使用：滚动刷新会吞掉悬停与聚焦
  • 读者只关心事件汇总时，持久事件列表比折线更直接

数据上限：流式渲染在 60fps 以内时改用 Canvas；批处理最多 10,000 点；异常必须作为独立数据层标记，不与主线混绘。

05 / 复核

误报与漏报的取舍

阈值不是真理而是一次下注：收紧买安全付人力，放宽买清净付风险。取舍要写在图注里，让读者知道你押了哪一边。

收紧阈值

误报增多

false positive / 狼来了效应

若下阈值自 5.0 收至 5.5 mg/L，本例 09-19（5.4）与 09-27（5.6）两次事件后的正常回升日即被误判，30 日内平添 2 起误报。代价是复核人力被稀释，真警报淹没在噪声里，值守人员逐渐无视所有红色。

本例模拟 / 阈值 5.5 时误报 2 起，漏报 0 起

放宽阈值

漏报风险

false negative / 不可逆代价

若下阈值放到 4.0 mg/L，A2（09-26，4.3）即漏报，鱼类窒息的风险窗口被无声略过。低氧对生态是不可逆伤害，而一次误报的代价只是复核一通电话：对这类指标，漏报几乎总是更贵的那一边。

本例模拟 / 阈值 4.0 时漏报 1 起（A2），误报 0 起

06 / 备选形态

散点警报图与落地建议

当关注的是条件组合下的离群，而非时间顺序本身，横竖两轴换成两个观测指标，异常就用离群环圈出。

备选 10-c

散点警报图

Scatter with Alert / 浊度对溶解氧

mg/L 浊度 NTU W1 低氧离群 W2 过饱和

浊度与溶解氧呈负相关密集带，W1、W2 偏离密集区被红环加文字标出。适用于"哪种条件组合下的异常"，损失的是时间顺序信息。

落地 10-d

实现要点

D3.js / Plotly / ApexCharts

  • D3.js：阈值带画为背景 rect，异常层单独 append，描边动效用 stroke-dashoffset
  • Plotly / ApexCharts：用 shapes 或 bands 承载警戒带，避免和序列混在一个 trace
  • 流式数据：60fps 以内改用 Canvas 渲染主线，SVG 只保留异常层与标注，保证可聚焦
  • 事件列表常驻：警报同时写入持久列表，读屏与键盘用户无需悬停也能取到全部事件

本页样张即为手写内联 SVG：无依赖、可打印、异常点可 Tab 聚焦。

07 / 数据后备

表 10-b 逐日数值与事件

折线的完整后备：数值、较前日变幅、状态与备注。异常行以浅黄底加红色侧条标出，状态列含方向符号，不依赖单一颜色。

日期 溶解氧 mg/L 较前日 状态 备注
09-107.2—正常—
09-117.4+0.2正常—
09-127.1-0.3正常—
09-137.5+0.4正常—
09-147.3-0.2正常—
09-156.9-0.4正常—
09-167.0+0.1正常—
09-176.8-0.2正常—
09-183.8-3.0▼ A1 偏低暴雨径流携入有机物，耗氧激增
09-195.4+1.6正常A1 事件后回升
09-206.2+0.8正常—
09-216.7+0.5正常—
09-227.2+0.5正常—
09-237.0-0.2正常—
09-247.4+0.4正常—
09-257.6+0.2正常—
09-264.3-3.3▼ A2 偏低上游清淤扰动底泥，夜间低值
09-275.6+1.3正常A2 事件后回升
09-286.5+0.9正常—
09-296.9+0.4正常—
09-307.3+0.4正常—
10-017.5+0.2正常—
10-027.8+0.3正常—
10-0311.2+3.4▲ A3 偏高藻类增殖，午后溶解氧过饱和
10-048.8-2.4正常A3 事件后回落
10-058.0-0.8正常—
10-067.6-0.4正常—
10-077.4-0.2正常—
10-087.1-0.3正常—
10-097.3+0.2正常—

n=30 / 均值 7.06 / 中位数 7.2 / 最小 3.8（09-18）/ 最大 11.2（10-03）/ 安全带内 27 日 / 异常 3 起 / 与图 10-a 及事件 A1 A2 A3 数值一致