动态时间轴折线

概述

动态时间轴图会随着新数据到来持续更新，让可视化随时间流动。与静态图不同，它会移动可视窗口，聚焦最新片段。这种实时能力对监控、实时看板以及任何需要即时把握变化的场景都至关重要。

何时使用

• 实时监控与看板
• 传感器或在线指标数据
• 连续流的分析
• 持续更新的 feed（股价、服务器指标）

不适用

• 静态的历史分析（用常规时间轴即可）
• 更新很少的场景（手动刷新就够）
• 超高频数据且未做聚合（>1000 次/秒）

关键变体

• 滑动窗口（固定范围前移）
• 只增长的折线（完整历史）
• 循环缓冲以节省内存
• 节流更新以减少重绘
• 可配置的间隔（秒、分钟等）

使用场景

• 股票行情滚动
• 服务器与应用性能监控
• IoT 传感器可视化（温度、压力、湿度）
• 网络流量与带宽监测
• 实时社交媒体互动指标
• 产线与质量监控

数据 (CSV)

x,y,series
1997-10-03,467,Fake Data
1997-10-04,474,Fake Data
...
1998-07-27,720,Fake Data

图表配置 (JSON)

设计提示

• 保持视觉元素精简，避免分散对数据流的关注
• 使用长时间观看也舒适的配色方案
• 确保图中文字在移动时仍然清晰可读
• 在动画顺滑度与更新频率间做好平衡
• 使用细微过渡引导视线到新数据
• 同时展示当前值与历史轨迹

性能提示

• 使用滑动窗口保持固定点数，避免无限增长
• 追加数据时用 notMerge: true 以避免整图重绘
• 将更新频率限制在每秒 1–2 次，保持稳定视觉效果
• 对超高频数据先聚合再展示
• 如需重处理数据，可考虑 WebWorkers
• 如果高更新率导致卡顿，关闭动画

常见问题

如何处理超高频数据？ 将其按有意义的区间汇总（如每秒或每分钟）。毫秒级原始数据只会增加噪声和性能开销。

需要给图表加动画吗？ 更新频率在 1–5 秒时建议使用平滑过渡以便跟踪变化；若每秒超过 10 次更新，关闭动画以避免闪烁。

理想的窗口大小是多少？ 建议显示 50–300 个点。过少缺乏上下文，过多则难以阅读。根据时间范围与更新频率调整。