📊 圖層分離與高效渲染
本章節只做一件事：說明 Web 控制圖如何透過圖層拆分在毫秒內重繪互動區域。採樣策略見 data-sampling。
讀完本篇你能回答
- 為什麼要把圖表拆成多層？
- 平移縮放時哪幾層可以只位移不重算？
- 雙 Y 軸解決什麼問題？
1. 渲染策略
| 輸出 | 場景 |
|---|---|
| SVG/EMF | 郵件附件，無限縮放 |
| PNG | Web 介面，頻寬優先 |
引擎採 ChartDirector，針對 Web 封裝。
2. 三層結構
| 圖層 | 內容 | 更新頻率 |
|---|---|---|
| 背景層 | USL/LSL、UCL/LCL | 低 |
| 軌跡層 | 點位與連線 | 中（平移可像素位移） |
| 裝飾層 | 違規標記、Tooltip | 高（互動） |
3. 多座標軸
雙 Y 軸支援不同量綱（如壓力 + 流速）；刻度自動縮放，避免視覺誤導。
實務提醒
正確優先於美觀——注意抗鋸齒與透明度，避免工程師把渲染瑕疵誤判為 OOC。
延伸閱讀
| 主題 | 文章 |
|---|---|
| 海量採樣 | data-sampling |
| 下鑽互動 | drill-down |