動態時間軸折線

概述

動態時間軸圖會隨著新資料到來持續更新，讓視覺化隨時間流動。與靜態圖不同，它會移動可見視窗以聚焦最新片段。這種即時能力對監控、即時看板以及任何需要立即掌握變化的場景都十分關鍵。

何時使用

• 即時監控與看板
• 感測器或線上指標資料
• 連續資料流的分析
• 持續更新的 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 個點。太少缺乏上下文，太多則難以閱讀；請依時間範圍與更新頻率調整。