📊 圖層分離與高效渲染

本章節解析視覺化系統的物理渲染引擎。在實時監控環境中，圖表必須在毫秒內響應並展現複雜的統計邊界，這依賴於精密的「圖層化」設計。

1. 基於 ChartDirector 的優化架構

系統採用專業級圖表引擎 ChartDirector，並針對 Web 渲染進行了深度封裝。

1.1 向量與點陣的混合策略

• SVG/EMF 渲染：用於派送至電子郵件，支援無限縮放且保持銳利。
• 動態 PNG/GIF：用於 Web 介面，透過高度壓縮減少傳輸頻寬。

2. 圖層分離技術 (Layered Rendering)

為了支援高頻互動，我們將圖表拆解為多個獨立渲染層：

2.1 背景層 (Background Layer)

• 繪製對象：規格界限 ($USL/LSL$)、管制界限 ($UCL/LCL$)。
• 優勢：減少重繪次數。

2.2 數據軌跡層 (Data Track Layer)

• 繪製對象：觀測點位與趨勢連線。
• 優化：平移時僅需進行像素位移補償。

2.3 裝飾與標註層 (Decoration Layer)

• 繪製對象：違規標記、註記文字。
• 互動：負責處理懸停事件，即時彈出細節。

3. 多座標軸與量綱對齊

• 雙 Y 軸設計：支持在同一張圖表上顯示不同量級的數據（如壓力與流速）。
• 自動縮放：動態調整刻度間距，避免視覺誤導。

4. 領域專家思維：視覺真實感

專家深知，「美觀」次於「正確」。

• 抗鋸齒：防止因像素鋸齒導致工程師誤判。
• 透明度處理：利用 Alpha 通道渲染，讓工程師直觀感受數據的「密度分佈」。