ASP.NET 使用 GDI+ 動態繪製曲線圖完整實作

此處展示從 DataSet 資料生成曲線圖的過程。我的 DataSet 從 Sendrec 資料表讀取資料，分別有 Id、Sendid（訂單號）、Sendtime（記錄時間）、Sendnum（單位時間發送量/這裡是五分鐘）等欄位。

過程如下：

public void draw(Page page,DataSet ds,int Tnum){}

其中 page 用於傳遞引用此過程的頁面，讓頁面以 JPG 方式直接向客戶端輸出生成的曲線圖。ds 為取出的資料集。Tnum 為訂單總量，不想讓此類別接觸讀取過程，故直接取出後傳遞給它。

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Drawing;
using System.IO;
public class imgdraw
{
public imgdraw()
{
}
public void draw(Page page,DataSet ds,int Tnum)
{
//取得記錄數量
int count = ds.Tables[0].Rows.Count;
//計算圖表寬度
int wd = 80 + 20 * (count - 1);
//設定最小寬度為800
if (wd < 800) wd = 800;
//生成Bitmap物件
Bitmap img=new Bitmap(wd,400);
//生成繪圖物件
Graphics g = Graphics.FromImage(img);
//定義黑色畫筆
Pen Bp = new Pen(Color.Black);
//定義紅色畫筆
Pen Rp = new Pen(Color.Red);
//定義銀灰色畫筆
Pen Sp = new Pen(Color.Silver);
//定義大標題字體
Font Bfont = new Font("Arial", 12, FontStyle.Bold);
//定義一般字體
Font font = new Font("Arial", 6);
//定義大一點字體
Font Tfont = new Font("Arial", 9);
//繪製底色
g.DrawRectangle(new Pen(Color.White, 400), 0, 0, img.Width, img.Height);
//定義黑色漸層筆刷
LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, img.Width, img.Height), Color.Black, Color.Black, 1.2F, true);
//定義藍色漸層筆刷
LinearGradientBrush Bluebrush = new LinearGradientBrush(new Rectangle(0, 0, img.Width, img.Height), Color.Blue, Color.Blue, 1.2F, true);
//繪製大標題
g.DrawString(ds.Tables[0].Rows[0]["sendid"].ToString() + "號訂單發送情況曲線圖", Bfont, brush, 40, 5);
//取得當前發送量
int nums=0;
for (int i = 0; i < count; i++)
{
nums+=Convert.ToInt32(ds.Tables[0].Rows[i]["sendnum"]);
}
//繪製資訊簡報
string info="訂單發送時間："+ds.Tables[0].Rows[0]["sendtime"].ToString()+" 曲線圖生成時間："+DateTime.Now.ToString()+" 訂單總量："+Tnum.ToString()+" 當前發送總量："+nums.ToString();
g.DrawString(info, Tfont, Bluebrush, 40, 25);
//繪製圖片邊框
g.DrawRectangle(Bp, 0, 0, img.Width - 1, img.Height - 1);
//繪製垂直座標線
for (int i = 0; i < count; i++)
{
g.DrawLine(Sp, 40+20 * i, 60, 40+20 * i, 360);
}
//繪製時間軸座標標籤
for (int i = 0; i < count; i+=2)
{
string st = Convert.ToDateTime(ds.Tables[0].Rows[i]["sendtime"]).ToString("hh:mm");
g.DrawString(st, font, brush, 30 + 20 * i, 370);
}
//繪製水平座標線
for (int i = 0; i < 10; i++)
{
g.DrawLine(Sp, 40, 60+30*i, 40+20*(count-1), 60+30*i);
int s = 2500 - 50 * i * 5;
//繪製發送量軸座標標籤
g.DrawString(s.ToString(), font, brush, 10, 60 + 30 * i);
}
//繪製垂直座標軸
g.DrawLine(Bp, 40, 55, 40, 360);
//繪製水平座標軸
g.DrawLine(Bp, 40, 360, 45 + 20 * (count - 1), 360);
//定義曲線轉折點
Point[] p = new Point[count];
for (int i = 0; i < count; i++)
{
p[i].X = 40 + 20 * i;
p[i].Y = 360- Convert.ToInt32(ds.Tables[0].Rows[i]["sendnum"]) / 5*3/5;
}
//繪製發送曲線
g.DrawLines(Rp, p);
for (int i = 0; i < count; i++)
{
//繪製發送記錄點的發送量
g.DrawString(ds.Tables[0].Rows[i]["sendnum"].ToString(), font, Bluebrush, p[i].X, p[i].Y - 10);
//繪製發送記錄點
g.DrawRectangle(Rp, p[i].X - 1, p[i].Y - 1, 2, 2);
}
//繪製垂直座標標題
g.DrawString("發送量", Tfont, brush, 5, 40);
//繪製水平座標標題
g.DrawString("發送時間", Tfont, brush, 40, 385);
//儲存繪製的圖片
MemoryStream stream = new MemoryStream();
img.Save(stream, ImageFormat.Jpeg);
//圖片輸出
page.Response.Clear();
page.Response.ContentType = "image/jpeg";
page.Response.BinaryWrite(stream.ToArray());
}
}

嘿嘿！發表這個，就是一個圖片繪製方法的記錄。裡面還有很多不當之處，望指教。