,net c# GDI 繪制圖形 報表

統計圖是最重要的統計描述方法之一 ，它具有直覺明了、易于了解的優點 ，是應用系統中對統計結果 <script type=text/javascript> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </script>

進行比較和分析最常用的一種方法。是以，在web系統開發中，統計圖也就成了最常用的資料表現方式。

早期的web應用程式開發工具 中沒有統計 圖繪制工具 ，在剛推 出的．NET Framework中，可以安裝使用水

晶報表元件來繪制統計圖，雖然水晶報表可以快速建立複雜 、具有專業外觀的報表 ，但是 ，使用水 晶報表并

不靈活 ，對于展示從資料庫中提取但要經過外部程式處理的資料，就難以實作某些特殊需求。

本文采用 Visual C撐．NET，應用 GDI+元件實作統計圖的繪制 ，該方法通用性強 ，可以滿足 Web系

統開發需求 。

1 GDI+簡介 ～。

GDI(Graphices device Interface)是通用的繪 圖技術 ，在．NET架構 中，更新為 GDI+，它為使用托管

代碼的程式員提供了一種基于類的應用程式程式設計接 口API。它使應用程式能夠在視訊顯示和列印機上

使用圖形和格式化文本。确切的說 ，GDI+是 由 ．NET Framework中的 System．Drawing命名空間提供的

一 組類 ，它使開發人員可以利用 Windows内置的圖形功能輕松地建立圖形應用程式。

利用 GDI+的優點是将應用程式 與圖形硬體 隔 表1 GDI+中常用對象簡介

離，這樣就允許開發人員建立與裝置無關的應用程

序。開發人員可利用 GDI+這樣的圖形裝置接 口在

螢幕或列印機上顯示資訊 ，而不需要考慮特定顯示

裝置的具體情況 。

GDI+繪圖由Graphics類表示。建立 Graphics

對 象 功 能

Brash 用于使 用圖案 、顔 色或位 圖填充封 閉表 面。

Pen 用于繪制線和 多邊形 ，包括 矩形、弧線和扇形 。

Font 用于描述 用來呈現文本的字型。

Color 用于描述 用來呈現特定對象的顔 色。在 GD1+中，

顔 色可 以 是 Alpha混 合 效 果 的 。

對 象後 ，可 以使用它繪制線 、填充形狀 、繪制文本等 ，II~ bGDI+支援各種圖像格式 ，包括 ．jpeg、．png、

． gif、．bmp、．tif、．exif和 ．icon檔案。GDI+中常用對象如表 1所示 。

2 統計 圖簡介及 實作 思路

2．1 統計 圖簡 介

統計圖是重要的統計描述方法 ，它将數字資料 以可視化方式呈現出來，可以簡明清晰地表達資料間

收稿 日期 ：2004—02—26

基金 項 目：總後勤部物資油料部資助項 目(油20030211)

作 者簡 介 ：羅少鋒(1980一)，男，陝西寶雞人，碩士生，從事倉儲勤務與後勤資訊化研究。

維普資訊 http://www.cqvip.com

2O 後 勤 工 程 學 院 學 報 2004年

的對應關系。同樣 的事實 ，用文字叙述可能需要進行長篇大論的解釋，而且還受語言不同的限制 ，而用

統計圖則可一 目了然。

統計圖按所在的空間可以分為二維平面統計圖和三維立體統計圖兩大類 。

平面統計圖中最常見的有折線圖、直方圖和圓餅圖。通常，折線 圖是用 以表示發展趨勢 ，反映事物

連續 的動态變化規律 ；直方圖則用來 比較各分類的大小，适用于互相獨立資料間的比較 ；而圓餅 圖的作

用是描述各部分 的百分比構成 ，可明顯看出各分類 占總數的比例。

立體統計圖實質上是平面統計圖在表現形式上 的延伸 ，其 中最常見的是柱狀統計 圖(見圖 1)和餅

<script type=text/javascript> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </script> 狀統計圖(見圖2)，它們的用途分别與直方圖和圓餅圖相同。

圖 1 柱 狀統計 圖示例

中專

高中 3} ％

擘 6．3％

21．4％

圖2 餅狀統計圖示例

2．2 統 計 圖實作 的總 思路

在 Web應用程式中繪制統計圖，總的思路都可大緻分為如下 3個步驟 ：

資料準備。在實際應用開發中，要用于展示的資料通常大都來 自資料庫。是以 ，這部分具體又包含

如下步驟 ：與資料庫的連接配接、從資料庫中取得合适 的資料、對資料作進一步的處理、将合适 的資料存人數

據集合(如數組、哈希表等)。

圖形繪制。完成了資料準備工作 ，接下來就是按此資料繪制統計圖形。通常又可分為繪制背景、繪

制參照系 、繪制圖例、繪制主體等。

調用顯示。完成繪制過程後 ，就可以将繪制好的統計圖形返 回給調用頁面，顯示于合适的位置。

Web應用程式 中繪制統計圖的總思路是相 同的，但各種常用統計 圖的具體實作又有差別 ：折線圖

主要應用描點與繪制線段的方法實作，直方圖則主要應用矩形的繪制與填充 ，而圓餅圖則要用到扇形的

繪制與填充 ，柱狀統計圖要應用矩形和多邊形的繪制與填充，餅狀統計 圖要用到扇形與橢圓扇形的繪制

與填充。

下面就按上述思路 ，分别以柱狀統計 圖和餅狀統計圖為例 ，結合 Visual c#．NET與 Oracle資料庫來

闡述統計 圖實作的關鍵技術和具體步驟。

3 應用 GDI+實作 統計 圖繪制的關鍵技 術和具體 步驟

3．1 準 備工作

(1)建立 Web應用程式。在 Microsoft Visual Studio．NET中，建立一個 Visual C#項 目，在該項 目下

建立一個 ASP．NET應用程式 ，命名為WebCharts，設定起始頁名稱為 Default．aspx。

(2)在該應用程式中，建立名為 Chart．aspx的web窗體頁。在 Chart．aspx．CS頁中添加如下代碼 ：

using System．Data．OleDb； ／／．NET 資料提供程式 ，描述用于通路資料源的類的集合 。

using System．Drawing； ／／提供對 GDI+ 基本 圖形功能的通路。

using System．Drawing．Imaging； ／／提供進階的 GDI+ 圖像處理功能。

3．2 繪 制柱 狀統計 圖的關 鍵步 驟

3．2．1 數 據 準備

(1)與 Oracle資料庫的連接配接

維普資訊 http://www.cqvip.com

第 3期 羅少鋒等 WEB系統 中統計圖繪制研究 21

string connstr=”Provider=MSDAORA．1；Password=密碼 ；User ID=使用者名 ；Data Source=資料源”；

OleDbConnection Conn=new OleDbConnection(connstr)；

(2)從資料庫 中檢索所需的資料并存人駐 留記憶體 的資料集(DataSet)

OleDbDataAdapter adpt=new OleDbDataAdapter(”Orale中的 SQL指令”，Conn)；

DataSet pSet=new DataSet()；

adpt．Fill(pSet)；

(3)處理駐留記憶體 的資料 ，存人排序清單(SortedList)

SortedList pList=new SortedList()；

for(int i=O；i<pSet．Tables[0]．Rows．Count；i++)

{ double dcount=(double．Parse(pSet．Tables[0]．Rows[i][”數量”]．ToString()))；

pList．Add(pSet．Tables[0]．Rows[i][”種類”]．ToString()，dcount)；

}

3．2．2 圖形繪 制

(1)初始化

int H=300，W=420； ／／H、W為輸 出圖形 的高度、寬度

int th=H一100，tw=W 2／3； ／／内部主體圖形的高度、寬度

int Z=20，S=20； ／／内部主體圖形距左邊和上邊的距離

int Y=Z+tw+1O，X=S+th； ／／内部主體圖形距右邊和下邊的距離

Bitmap newBmp=new Bitmap(W，H，PixelFormat．Format32bppArgb)； ／／建立一個位圖對象

Graphics g=Graphics．FromImage(newBmp)； ／／聲 明一個圖形對象 ，在上面建立的位圖上畫圖

g．Clear(Color．White)； ／／清除整個繪圖面并以白色填充背景

(2)繪制坐标系

g．DrawLine(bpen，new Point(Z一2，S+5)，new Point(Z，S))； ／／繪制一段直線 ，bpen為 已定義的

鋼筆

g．DrawString(tmp，new Font(”宋體”，9)，Brushes．Black，new PointF(Z+5，i一5))；／／标參照高度，

tmp為要繪制 的字元 串

(3)繪制柱體和圖例并标示

foreach(DictionaryEntry entry in pList)

{

／／用僞随機函數随機生成顔色 ，并以此顔色定義筆刷

Random md=new Random()；

int R=(int)(md．NextDouble() 255)；

int G=(int)(md．NextDouble() 255)；

int B=(int)(md．NextDouble() 255)；

Brush bru=new SolidBrush(Color．FromArgb(R，G，B))；

／／繪制圖例

g．FillRectangle(bru，Y，flag，10，10)； ／／填充矩形 ，flag為要繪制 圖例左上頂點縱坐标

string tmp=string．Fo~at(”{0}：{1： ．#}''，entry．Key，(decima1)entry．Value)；

g．DrawString(tmp，new Font(”宋體 ”，9)，Brushes．Black，new PointF(Y+13，flag))； ／／标示 圖

例 意義

／／計算柱體在參照系中的高度 height(略)

／／填充柱體正面(其 中start為該柱體左上頂點橫坐标 ，permwidth為柱體正面寬度)

g．FillRectangle(bru，start，X—height，permwidth，height)；

維普資訊 http://www.cqvip.com

22 後 勤 工 程 堂 院 堂 報 QQ璺

／／填充柱體頂側面(其中 ew為柱體側面寬度，dw為頂面高度)

PointF[]ZMPoints={new PointF((float)(start)，(float)(x—height))，

new PointF((float)(start+ew)，(float)(X—height—dw))，

new PointF((float)(start+ew+permwidth)，(float)(X—height—dw))，

new PointF((float)(start+permwidth)，(float)(X—height))，}；

g．FiUPolygon(bru，ZMPoints)；

／／填充柱體右側面(類似頂側面，略)

／／繪制三面相交的棱(略)

／／繪制柱體所代表 的實際數量及種類(略)

}

3．2．3 調 用 顯 示

(1)将繪制好的圖形在記憶體中存為．gif格式圖檔 ，供外部程式調用

newBmp．Save(Response．OutputStream，System．Drawing．Imaging．ImageFormat．Gif)；

(2)在起始頁Default．aspx的 HTML代碼中加入如下代碼段 ，調用上面生成 的圖檔

<img SrC=”Chart．aspx”>

繪制 的柱狀統計 圖示例如圖 1所示。至此 ，已完成 了柱狀統計 圖的整個繪制過程 。餅狀統計 圖的

繪制過程與柱狀統計 圖類似 ，有了上述基礎 ，下面僅簡要闡述其不同之處 。

3．3 繪 制餅狀 統計 圖的關 鍵步 驟

3．3．1 資料 準備

(1)、(2)參 見“3．2．1”。

(3)與3．2．1中不同之處：存人排序清單(SortedList)中的資料不是資料庫中的原資料 ，而是轉化為

每個種類所對應的百分 比小數。

3．3．2 圖形繪制

(1)初始化

int H=260，W=400； ／／H、W為輸出圖形的高度 、寬度

int th=150，tw=130； ／／内部主體圖形的高度、寬度

int YX_ x=50，Yx-y=50； ／／圓心坐标

(2)繪制主體和圖例

foreaeh(DietionaryEntry entry in pList)

{

／／用僞随機函數随機生成顔色 ，并以此顔色定義筆刷(略)

／／繪制圖例(略)

g．FiUPie(bru，new Rectangle(YX_x，YX ，th，tw)，start，(int)((double)(entry．Value)}3．6))；

g．DrawPie(bpen，new Rectangle(YX—X，YX—Y，th，tw)，start，(int)((double)(entry．Value)}

3．6))；

start+=(int)((double)(entry．Value)}3．6)；／／下次繪制起始角度

count+ + ：

}

3．3．3 調用顯示(參見3．2．3)

繪制的餅狀統計 圖示例見圖2。