Highcharts 餅圖離線匯出：C# 本地化部署與資料對齊問題解決

需求背景

專案使用 Highcharts 繪製餅圖，官方匯出功能依賴雲端伺服器，需將匯出服務部署至本地。網上現有 C# Demo 匯出的圖片標籤資料錯位、重疊，與原圖差異大。

問題分析

• 官方匯出流程：前端將 SVG 發送至 export.highcharts.com，伺服器渲染回傳圖片。
• 本地化需搭建相同渲染環境：需解析 SVG、處理字體、計算佈局。
• 常見 Demo 問題：使用舊版渲染引擎（如 PhantomJS 早期版本），CSS 解析不完整，導致標籤位置計算偏差。

解決方案

1. 採用官方推薦的 Node.js 匯出伺服器：highcharts-export-server 基於 Puppeteer (Headless Chrome)，渲染保真度極高。
2. C# 整合方式：啟動本地 Node 服務，C# 透過 HttpClient POST SVG 取得圖片位元組流。
3. 關鍵配置：確保伺服器安裝中文字體（如 Microsoft YaHei），在 exporting 選項中指定 fontFamily。

資源推薦

現成 C# 整合範例：Highcharts 導出圖片 .NET C# Demo，包含完整呼叫邏輯與字體配置說明。