图表图鉴 第 23 号 / 实时流式

流式面积图

Streaming Area Chart / 城东 110kV 片区负荷 60 秒滚动窗口 / 制图室样张

streaming / real-time / ticker / live / velocity / pulse / monitoring / accessible chart / keyboard accessible chart

数据类型实时流式
最佳图型流式面积图
备选形态走马灯与仪表
交互级别实时加暂停缩放
无障碍风险有条件
缓冲约定60 至 300 秒

01 / 主图图版

电网负荷 60 秒滚动窗口实时推入

流式面积图的编码要点只有一句：新点从右端进入，旧点从左端移出，窗口永远只有这么宽。下图为深色值守屏配色（官方色指引：深底网格，当前值绿色脉冲，历史以透明度衰减），民用与商业两个系列堆叠为片区总负荷，每秒推入一点，随时可暂停。

图 23-a / 城东 110kV 片区 / 负荷 60 秒滚动窗口 / 双系列堆叠

民用负荷（实线） 商业负荷（虚线） 当前值脉冲

在线推送中 / 每秒 1 点

当前 19:32:00

当前值直标于各系列段内 / 暂停或系统开启减少动态偏好时呈现静态快照 / 完整数值后备见表 23-b

城市电网负荷 60 秒滚动窗口流式堆叠面积图 深色监控屏上，蓝色实线面积为民用负荷（约 470 至 530 兆瓦），琥珀色虚线面积为商业负荷（约 300 至 316 兆瓦），两者堆叠为片区总负荷约 780 至 835 兆瓦。右端绿色脉冲点标示当前值，数值直标在两段面积之内，历史越早透明度越低。每秒推入一个新采样。 民用 530.2 上边界 833.0 商业 302.8 900 720 540 360 180 0 负荷 MW / 纵向堆叠 -60s -45s -30s -15s 现在 最旧采样 / 移出窗口即聚合 最新推入 / 演示 1 点每秒 相对时间刻度固定 / 窗口随推入向左滑动 / 数值见表 23-b

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

19:32:00 / 民用 530.2 / 商业 302.8 / 合计 833.0 MW / 较上秒 +2.7 / 趋势 爬坡

图 23-a 中，蓝色实线面积为民用负荷、琥珀虚线面积为商业负荷，两段堆叠即片区总负荷；除颜色外以实线与虚线区分系列，状态与方向均由文字传达。面积自左向右透明度升高，是官方色指引"历史衰减"的直接落法：越早的采样越退向背景，当前值以绿色脉冲加直标钉在右端。

02 / 滚动窗口机制

窗口、速率与降采样的取舍

与产品级的实时监控页（如本库的 水质实时监测看板）不同，本页是图鉴层：只拆流式面积图这一编码的三个机构件。窗口定多宽、数据推多快、旧点怎么聚合，三个参数互相咬合，定错任何一个，图都会说谎或失效。

滚动窗口机制示意：缓冲区右端推入新点、左端聚合降采样 一条横置缓冲区被分为左右两段：左段旧数据每四点聚合成一点，中段每两点聚合一点，右端为原始一赫兹新点。绿色箭头自右端推入，红色箭头自左端移出。下方标注窗口 60 至 300 秒的官方缓冲约定。 环形缓冲区 / 容量 60 至 300 秒 旧段 4:1 聚合 四点并一点 中段 2:1 聚合 两点并一点 近端 原始采样 1Hz 逐点保留 推入 速率 1Hz 移出 / 越界即弃 窗口宽度 / 本例 60 秒（60 点） 窗口短：细节清晰、无历史可循 窗口长：趋势可辨、近端被压缩 官方缓冲约定 60 至 300 秒 滚动查看更旧数据时对旧段降采样，近端永远保留原始速率 演示页 60 点全原始 降采样示意见左中段

取舍甲

窗口宽度的赌注

window / 60s 对照 300s

本例取 60 秒：晚高峰的秒级锯齿与爬坡斜率都看得清，但一分钟之前的世界已经不在图上。值守场景要的正是这个——当前 60 秒的状态，而非历史复盘。若把窗口拉到官方上限 300 秒，同样 876 像素宽的图面上每点仅分得约 3 像素，秒级波动被压成糊带，换来的是五分钟趋势可辨。

60s 窗口 / 点距 14.8px / 300s 窗口 / 点距 2.9px

取舍乙

速率与降采样咬合

velocity / downsample

推入速率越高，窗口能维持的原始点越少：300 点缓冲里装 1Hz 可以存 5 分钟原始，装 5Hz 只够 1 分钟。官方解法是旧段聚合、近端原始——旧数据四点并一点或两点并一点，保形态丢细节；近端永远逐点，保当前判断。降采样必须用均值或中位数聚合，不能用抽点，否则尖峰被随机保留或丢弃。

1Hz 存 300s / 5Hz 仅存 60s / 聚合用均值不用抽点

数据上限：官方阈值明确：高频流式必须改用 Canvas 或 WebGL 渲染；缓冲保留最近 60 至 300 秒；滚动查看更旧数据时对旧段降采样。本页为样张以手写 SVG 演示机制，60 点全原始。

03 / 无障碍后备

当前值摘要与键盘操作

官方对本图型的无障碍判定是有条件风险：实时刷新会吞掉读屏的注意力，闪烁若无减少动态支持即不可用。后备是流式数据表加当前值与趋势摘要，本页两者齐备。

当前值摘要

快照冻结读数

current-value / trend summary

快照时刻
19:32:00
民用负荷
530.2 MW
商业负荷
302.8 MW
片区合计
833.0 MW
较上秒
+2.7 MW
60 秒趋势
爬坡 +53.4 MW
窗口均值
808.1 MW

与图面读数行同源 / 运行中每 5 秒刷新一次

键盘操作

官方要求逐条落实

pause / zoom / reset / focus

  • 暂停与继续：暂停推送按钮切换，Tab 聚焦后回车或空格触发，图面即冻结为静态快照
  • 加减缩放：加号与减号按钮三档切换纵向量程，重置按钮一键恢复 900 MW 全量程
  • 聚焦即读值：当前值直标常驻图内，读数行 role 状态语义，暂停后可从容听取
  • 减少动态：系统偏好开启时不启动推送、无呼吸动画，静态快照加表格即为完整等价物

04 / 选型边界

何时使用，何时退避

流式面积图买的是"此刻"：数据推得够快、读者要的只是当前状态时它最强；一旦读者要的是历史复核，就该退出。

适用

用滚动窗口守此刻

live monitoring dashboards

  • 物联网与运维看板，数据以不低于 1Hz 持续更新（本例 1 点每秒）
  • 用户需要在一眼之间取到当前值与方向（值守屏、调度台）
  • 总量可分解为两三个分量的场景（本例民用加商业堆叠为片区负荷）
  • 有暂停控制且尊重减少动态偏好，刷新不打断读屏与聚焦

不适用

换图型的三种情形

periodic-refresh line chart

  • 更新频率低于每分钟一次时，改用周期刷新的普通折线图，流式机制是浪费
  • 无暂停控制的闪烁内容不应使用：吞掉键盘焦点与读屏，且伤害前庭敏感用户
  • 读者需要复核完整历史时，流式窗口装不下，改用可回放的折线图加数据表

05 / 备选形态

走马灯数值带与移动仪表

官方备选两个：只关心数字本身时用走马灯，只关心当前值离上限多远时用移动仪表。两者都比面积图更轻，也更容易做到无闪烁。

备选 23-b1

走马灯数值带

Ticker Tape

最新推入 833.0 19:32:00 合计 MW ▲+2.7 830.1 19:31:59 ▲+2.6 827.5 19:31:58 ▲

数值按时间 newest 向左滚动，最新一条以绿色加粗，方向以升降价符号传达。适合空间只剩一条横带的场景；损失全部形态信息，只剩数值序列。

备选 23-b2

移动仪表

Moving Gauge

0 1000 833 负载率 83% / 告警段（琥珀）

指针随推入平滑移动，回答"离上限还有多远"这一个问题。色带之外必须给数字与文字（833 MW 与 83% 直标），告警不靠颜色单独成立；损失历史与方向，只剩当前位置。

06 / 数据后备

表 23-b 快照数值与状态

流式的官方后备即数据表。下表为窗口冻结快照（19:31:00 至 19:32:00）每 6 秒的采样，浅蓝底行为快照末行，方向以三角符号传达，不依赖颜色；运行中的实时读数以图面直标与读数行为准。

时刻 民用 MW 商业 MW 合计 MW 较上采样 状态
19:31:05475.3307.2782.5—▲ 爬坡
19:31:11480.6310.6791.2+8.7▲ 爬坡
19:31:17490.1311.2801.3+10.1▲ 爬坡
19:31:23490.7314.6805.3+4.0▲ 爬坡
19:31:29497.4311.3808.7+3.4▲ 爬坡
19:31:35496.1315.8811.9+3.2▲ 爬坡
19:31:41505.9310.0815.9+4.0▲ 爬坡
19:31:47513.4310.1823.5+7.6▲ 爬坡
19:31:53521.5307.7829.2+5.7▲ 爬坡
19:31:59530.2302.8833.0+3.8▲ 快照末行

采样 n=10 / 每 6 秒取一点 / 窗口均值 808.1 / 峰值 834.8（19:31:55）/ 谷值 778.1（19:31:00）/ 与图 23-a 及当前值摘要数值一致