統計圖表是資訊管理系統的常用功能,常見的有餅圖、長條圖、折線圖等。餅圖適合呈現各部分佔比,長條圖用於比較數值大小,折線圖則展示趨勢變化。本節以二維餅圖為例,說明如何使用 .NET GDI+ 繪製統計圖表。
實作邏輯很直觀:根據給定的一組數據計算各項佔比,以不同顏色繪製扇形區塊,拼湊成完整圓餅。核心演算法在於角度計算——在 360 度圓周下,每個數據項佔多少度。為方便示範,程式碼採用陣列作為資料來源,實際應用中可從資料庫讀取。

int[] arr = {100, 35, 115, 125, 75, 120};
// 不同顏色陣列(原書未提供,此處補充)
Color[] colors = { Color.BlueViolet, Color.Yellow, Color.Green, Color.Gray, Color.Blue, Color.Purple };
Bitmap bmp = new Bitmap(400, 400); // 建立畫布
Graphics g = Graphics.FromImage(bmp); // 取得繪圖介面
g.Clear(Color.White); // 白色背景
g.DrawString("本書上半年銷售情況", new Font("黑體", 16), Brushes.Black, new PointF(5, 5)); // 標題
float length = 200;
float currentAngle = 0; // 當前扇形角度
float totalAngle = 0; // 已繪製角度累計
float totalValues = 0; // 數值總和
// 計算總和
foreach (int i in arr) {
totalValues += i;
}
// 依序繪製扇形
for (int i = 0; i < arr.Length; i++) {
currentAngle = arr[i] / totalValues * 360; // 計算角度
g.FillPie(new SolidBrush(colors[i]), 100, 50, length, length, totalAngle, currentAngle); // 填充
g.DrawPie(Pens.Black, 100, 50, length, length, totalAngle, currentAngle); // 繪製邊框
totalAngle += currentAngle;
}
// 設定回應類型,避免非 IE 瀏覽器顯示異常
Response.ContentType = "image/GIF";
// 輸出至回應流
bmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
g.Dispose();
將上述代碼置於 Page_Load 中即可看到效果。若需在扇形上添加說明文字,可使用 DrawString 繪製,或在空白處以 FillRectangle 繪製圖例色塊。
網路資源發布時常需保護版權,最簡單有效的方式是添加水印。如同鈔票水印,難以塗改。逐張手動添加工作量大、反應慢,ASP.NET 可自動化處理。這裡介紹兩種:圖像水印與文字水印。
將一張水印圖片繪製到目標圖片上,形成合成圖。例如在風景照右下角加入版權標誌:

需準備水印圖 tg029.jpg 與目標圖 Element.jpg。使用 Graphics.DrawImage 將水印繪製至目標圖右下角:
string file = Server.MapPath("~/Element.jpg");
string mark = Server.MapPath("~/tg029.jpg");
System.Drawing.Image img = System.Drawing.Image.FromFile(file);
System.Drawing.Image imgMark = System.Drawing.Image.FromFile(mark);
Graphics g = Graphics.FromImage(img);
// 繪製於右下角
g.DrawImage(imgMark, img.Width - imgMark.Width, img.Height - imgMark.Height);
Response.ContentType = "image/JPEG";
img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
g.Dispose();
此操作僅在記憶體中生成新圖像物件,不損壞原圖,兼顧版權保護與原檔完整。
有時偏好直接在圖片上繪製文字版權,例如:

使用 DrawString 繪製文字,並設定淡灰色、半透明筆刷以減少干擾:
string file = Server.MapPath("~/Element.jpg");
System.Drawing.Image img = System.Drawing.Image.FromFile(file);
// 半透明淡灰色筆刷
Brush b = new SolidBrush(Color.FromArgb(100, Color.LightGray));
// 字體設定
FontFamily ff = new FontFamily("華文琥珀");
Font f = new Font(ff, 100, FontStyle.Bold);
float x = 50, y = 50; // 文字起始座標
Graphics g = Graphics.FromImage(img);
// 提升繪圖品質
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.DrawString("牛腩制作", f, b, new PointF(x, y));
Response.ContentType = "image/JPEG";
img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
g.Dispose();
批量處理時重複呼叫上述代碼即可,開發者也可設計更美觀的水印樣式。
Web 應用中圖片傳輸速度常是瓶頸。除壓縮格式外,縮略圖能加快瀏覽、節省版面。Image.GetThumbnailImage 方法可輕鬆生成:
// 取消回調
private bool ThumbnailCallback() {
return false;
}
// 產生縮略圖
private void Thumb(string imgPath, string thumbPath) {
System.Drawing.Image.GetThumbnailImageAbort myCallback =
new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
System.Drawing.Image img = System.Drawing.Image.FromFile(imgPath);
// 生成 100x50 縮略圖
System.Drawing.Image myThumbnail = img.GetThumbnailImage(100, 50, myCallback, IntPtr.Zero);
myThumbnail.Save(thumbPath); // 儲存
}
測試呼叫:
Thumb(Server.MapPath("~/Element.jpg"), Server.MapPath("~/Element_small.jpg"));
執行後即生成指定尺寸縮略圖,批量生成同理多次呼叫。
本章介紹 ASP.NET 中 GDI+ 圖形繪製核心知識,重點在於 Graphics 物件運用,從基本圖形延伸至複雜統計圖、水印、縮略圖等實務應用。雖然圖形操作較適合 Windows Forms,但 System.Drawing 作為 .NET 基類庫一部分,在 Web 應用中同樣適用。