ASP.NET WebForms 使用 GDI+ 動態繪製圓餅圖完整教學

前言

在 ASP.NET WebForms 專案中，若不想引入第三方圖表套件，可直接使用 `System.Drawing` 命名空間的 GDI+ 功能，在伺服器端動態繪製圖表並輸出為圖片串流。本文示範如何繪製基本圓餅圖與加上邊框的進階版本。

一、繪製基本圓餅圖

完整程式碼實作

public partial class Drawing : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // 1. 準備資料與顏色
        int[] data = { 100, 200, 300, 460 };
        Color[] colors = { Color.Green, Color.Blue, Color.Yellow, Color.Tomato };

        // 2. 建立畫布
        Bitmap bm = new Bitmap(400, 400);
        Graphics g = Graphics.FromImage(bm);
        g.Clear(Color.White);
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; // 抗鋸齒

        // 3. 繪製標題
        g.DrawString("圓餅圖測試", new Font("微軟正黑體", 16), Brushes.Red, new PointF(5, 5));

        // 4. 計算總值
        float totalValue = 0;
        foreach (int val in data) totalValue += val;

        // 5. 繪製各扇形區塊
        float startAngle = 0;
        float x = 50f, y = 50f, width = 200f;
        int index = 0;

        foreach (int val in data)
        {
            float sweepAngle = val / totalValue * 360;
            g.FillPie(new SolidBrush(colors[index++]), x, y, width, width, startAngle, sweepAngle);
            startAngle += sweepAngle;
        }

        // 6. 輸出圖片串流
        bm.Save(Response.OutputStream, ImageFormat.Jpeg);
        g.Dispose();
        bm.Dispose();
    }
}

關鍵方法說明

• FillPie：填滿扇形區域，參數依序為筆刷、外接矩形(X,Y,寬,高)、起始角度、掃過角度
• SmoothingMode.AntiAlias：啟用抗鋸齒，讓圓弧邊緣更平滑
• Response.OutputStream：直接將圖片二進位資料寫入 HTTP 回應串流

二、加上邊框的進階版本

只需在 `FillPie` 之後加上 `DrawPie` 即可繪製邊框：

foreach (int val in data)
{
    float sweepAngle = val / totalValue * 360;
    g.FillPie(new SolidBrush(colors[index]), x, y, width, width, startAngle, sweepAngle);
    g.DrawPie(Pens.Black, x, y, width, width, startAngle, sweepAngle); // 加上黑色邊框
    startAngle += sweepAngle;
    index++;
}

三、前端頁面引用方式

在 .aspx 頁面中直接以 `` 標籤指向此 .aspx 頁面：

<img src="Drawing.aspx" alt="動態圓餅圖" />

四、效能與記憶體管理注意事項

1. 務必 Dispose：`Graphics`、`Bitmap`、`Brush`、`Pen` 等實作 `IDisposable` 的物件用畢立即釋放
2. 避免記憶體洩漏：高併發情況下大量建立 Bitmap 易導致記憶體壓力，建議採用物件池或改用專門圖表庫
3. 輸出格式選擇：JPEG 適合照片、PNG 適合向量圖表（無損、支援透明背景）

總結

透過 `System.Drawing` 繪製圓餅圖雖然程式碼較繁瑣，但無需外部依賴，適合簡單報表需求。實務專案建議考慮使用 Chart.js、Highcharts 等前端圖表庫，或伺服端的 NPOI、EPPlus 等成熟方案，以獲得更好的互動性與維護性。