ASP.NET GDI+ 動態繪製資料餅圖：FillPie 扇形繪製、資料庫驅動與圖例標籤完整實作

承接長條圖教學，本文示範使用 Graphics.FillPie 繪製餅圖，同樣從 Access 資料庫讀取銷售資料動態生成。

餅圖繪製核心數學

• 餅圖 = 多個扇形組合，每個扇形角度 = (該項值 / 總和) × 360°。
• FillPie(x, y, width, height, startAngle, sweepAngle)：
  startAngle 從 x 軸順時針度數，sweepAngle 為扇形掃過角度。

完整繪圖代碼 (PieChart.aspx.cs)

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = GetSalesData(); // 同長條圖資料
    int total = dt.AsEnumerable().Sum(r => r.Field("SL"));

    int size = 300, margin = 20;
    using (Bitmap bmp = new Bitmap(size + 150, size)) // 右側留空給圖例
    using (Graphics g = Graphics.FromImage(bmp))
    {
        g.Clear(Color.White);
        g.SmoothingMode = SmoothingMode.AntiAlias;

        RectangleF pieRect = new RectangleF(margin, margin, size, size);
        float startAngle = -90f; // 從頂部開始

        Color[] colors = { Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Purple, Color.Brown,
                           Color.Teal, Color.Pink, Color.Gray, Color.Olive, Color.Maroon, Color.Navy };

        // 繪製扇形
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            int val = (int)dt.Rows[i]["SL"];
            float sweepAngle = (float)val / total * 360f;

            using (SolidBrush brush = new SolidBrush(colors[i % colors.Length]))
                g.FillPie(brush, pieRect, startAngle, sweepAngle);
            g.DrawPie(Pens.White, pieRect, startAngle, sweepAngle); // 白色分隔線

            startAngle += sweepAngle;
        }

        // 繪製圖例 (右側)
        float legendX = size + margin * 2;
        float legendY = margin;
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            string month = dt.Rows[i]["YF"].ToString() + "月";
            int val = (int)dt.Rows[i]["SL"];
            float pct = (float)val / total * 100f;

            using (SolidBrush brush = new SolidBrush(colors[i % colors.Length]))
            {
                g.FillRectangle(brush, legendX, legendY, 12, 12);
                g.DrawRectangle(Pens.Black, legendX, legendY, 12, 12);
            }
            g.DrawString($"{month} {val} ({pct:F1}%)", new Font("微軟正黑體", 9), Brushes.Black, legendX + 18, legendY);
            legendY += 20;
        }

        Response.Clear();
        Response.ContentType = "image/png";
        bmp.Save(Response.OutputStream, ImageFormat.Png);
    }
}

Graphics 關鍵方法速查表

進階擴充建議

• 3D 效果：疊繪偏移橢圓模擬立體感。
• 突出顯示：特定扇形 sweepAngle 微調或位移半徑向量。
• 工具提示：輸出 <map><area> 熱區配合前端 JS 顯示明細。
• 快取：資料未變時直接回傳 304 或快取圖片檔。

餅圖適合展示「部分佔整體比例」，搭配長條圖/折線圖可構建完整儀表板。