Highcharts 搭配 PhantomJS 於伺服器端生成高品質圖表圖片

專案需求：開發互動式報表系統取代靜態報表。原系統使用付費的 dotnetCHARTING，雖支援靜態圖片輸出，但失去互動性且需破解授權。改採 Highcharts 提供豐富互動體驗，並解決伺服器端匯出高品質圖片需求。

資料流向架構

1. 前端 Highcharts 渲染互動圖表
2. 使用者觸發匯出 → Highcharts 產生 SVG 資料 → 送至伺服器
3. 伺服器端處理 SVG → 生成高品質位圖（PNG/JPG） → 回傳或儲存

伺服器端 SVG 轉圖片方案比較

方案 A：SVG Rendering Library (Svg.dll)

NuGet 套件 Svg 可直接將 SVG 轉存為圖片，Highcharts 官方提供 ASP.NET 匯出模組：GitHub 專案。

缺點：

• 文字字型模糊、整體品質差，與瀏覽器渲染落差大
• dataLabel 無法顯示，需修改 Svg.dll 原始碼才能修復

方案 B：PhantomJS（推薦）

使用 Headless Browser 真實渲染 Highcharts，再截圖輸出：

• 渲染品質與瀏覽器一致，完美支援字型、陰影、動畫靜態幀
• 支援所有 Highcharts 功能（dataLabel、tooltip、漸層等）
• 可整合至排程服務自動生成報表圖片

實作核心：建立 HTML 頁面載入 Highcharts → PhantomJS 載入頁面 → page.render('chart.png') 輸出。

資料載入架構複用

參考 dotnetCHARTING 設計，自建資料載入方案：指定連線字串與 SQL → ADO.NET 執行查詢 → DataSet 轉 JSON → 供 Highcharts 使用，達成資料層與呈現層解耦。