top
Loading...
在ASP.NET頁面中實現數據餅圖

在《在ASP.NET頁面中實現數據棒圖》中已經介紹了ASP.NET中數據棒圖的繪制方法。前文已經說過,ASP.NET之所以能夠在客戶端瀏覽器中形成各種數據圖片,是因為在ASP.NET中提供了繪圖功能,具體的作法是先在服務器端創建一個Bitmap實例,然后利用ASP.NET中提供的繪圖功能,按照要生成的圖片的模樣,進行繪制,最后把繪制好的實例以數據流的方式傳送到客戶端的瀏覽器上,并形成圖片顯示出來。本文要介紹的在ASP.NET頁面中實現數據餅圖采用的基本也是這種方法。餅圖有時稱為"Pie"圖,本文要實現的數據餅圖模樣具體如圖01所示:


圖01:在ASP.NET頁面中產生的數據餅圖

一.本文程序設計和運行的軟件環境:

(1).微軟公司視窗2000服務器版。

(2).Visual Studio .Net正式版,.Net FrameWork SDK版本號3705。

(3).MDAC 2.6(Microsoft Data Acess Component)以上版本。

二.數據字典:

本文采用數據庫類型、結構和《在ASP.NET頁面中實現數據棒圖》一文中完全相同,Table01數據表中的數據記錄也和《在ASP.NET頁面中實現數據棒圖》中完全一樣。具體的細節內容這里就不介紹了,讀者可參閱前文。

三.ASP.NET頁面中實現數據Pie圖的關鍵步驟及其實現方法:

在本文中所要解決的問題和《在ASP.NET頁面中實現數據棒圖》中完全一樣。第一步實現數據庫連接和從數據庫中讀取數據,由于其解決方法和前文中完全一致,這里也就不具體介紹了,讀者可參閱前文。下面就要解決根據從數據庫中讀取的數據繪制Pie圖的方法。

(1).繪制數據Pie圖的實現方法:

圖01所示的Pie圖看似是由一個圓形按照從數據庫中得到數據值的大小分割而成的,其實在具體實現時并非如此,圖01所示的Pie圖其實由許多根據從數據庫中數值大小,繪制相應的扇型,并由這些扇型組合而成的

(2).簡介ASP.NET頁面中繪制扇型要使用到的類及其方法:

在本文和前文中,在ASP.NET頁面中實現繪圖功能主要使用的是Graphics類,Graphics類被封裝在命名空間"System.Drawing"中。Graphics類中定義了很多方法和屬性,這些方法和屬性都與繪圖有關,Graphics類中的常用成員具體可參閱表01和表02,表01是Graphics類中的常用方法及其說明,表02是Graphics類中常用屬性及其說明:

方法 說明
Clear清除整個繪圖面并以指定背景色填充。
Dispose釋放由此Graphics對象使用的所有資源。
DrawArc 繪制一段弧線,它表示由一對坐標、寬度和高度指定的橢圓部分。
DrawEllipse繪制一個由邊框定義的橢圓。
DrawIcon在指定坐標處繪制由指定的Icon對象表示的圖像。
DrawIconUnstretched 繪制指定的Icon對象表示的圖像,而不縮放該圖像。
DrawImage 在指定位置并且按原始大小繪制指定的Image對象。
DrawImageUnscaled在坐標對所指定的位置并且按其原始大小繪制指定的Image對象。
DrawLine繪制一條連接由坐標對指定的兩個點的線條。
DrawLines 繪制一系列連接一組Point結構的線段。
DrawPie 繪制一個扇形,該扇形由一個坐標對、寬度和高度以及兩條射線所指定的橢圓定義。
DrawPolygon 繪制由一組Point結構定義的多邊形。
DrawRectangle繪制由坐標對、寬度和高度指定的矩形。
DrawRectangles 繪制一系列由Rectangle結構指定的矩形。
DrawString 在指定位置并且用指定的Brush和Font對象繪制指定的文本字符串。
FillClosedCurve填充由Point結構數組定義的閉合基數樣條曲線的內部。
FillEllipse 填充邊框所定義的橢圓的內部,該邊框由一對坐標、一個寬度和一個高度指定。
FillPie填充由一對坐標、一個寬度、一個高度以及兩條射線指定的橢圓所定義的扇形區的內部。
FillPolygon
填充Point結構指定的點數組所定義的多邊形的內部。
FillRectangle填充由一對坐標、一個寬度和一個高度指定的矩形的內部。
FillRectangles填充由Rectangle結構指定的一系列矩形的內部。
FillRegion填充Region 對象的內部。
Flush 強制執行所有掛起的圖形操作并立即返回而不等待操作完成。
FromHdc 從設備上下文的指定句柄創建新的Graphics對象。
FromHwnd 從窗口的指定句柄創建新的Graphics對象。
FromImage 從指定的Image對象創建新Graphics對象。
GetHdc獲取與此Graphics對象關聯的設備上下文的句柄。
ReleaseHdc釋放通過以前對此Graphics對象GetHdc方法的調用獲得的設備上下文句柄。
ResetClip將此Graphics對象的剪輯區域重置為無限區域。
ResetTransform 將此Graphics對象的全局變換矩陣重置為單位矩陣。

表01:Graphics類中的常用方法及其說明

在本文中使用最多,也是最重要的方法就是:FillPie和DrawPie方法。這二個方法的具體使用方法,在下文中又詳細介紹。

屬性說明
Clip獲取或設置Region對象,該對象限定此Graphics對象的繪圖區域。
ClipBounds 獲取RectangleF結構,該結構限定此Graphics對象的剪輯區域。
DpiX 獲取此Graphics對象的水平分辨率。
DpiY獲取此Graphics對象的垂直分辨率。
PageScale 獲取或設置此Graphics對象的全局單位和頁單位之間的比例。
PageUnit 獲取或設置用于此Graphics對象中的頁坐標的度量單位。
PixelOffsetMode 獲取或設置一個值,該值指定在呈現此Graphics對象的過程中像素如何偏移。
RenderingOrigin 為抵色處理和陰影畫筆獲取或設置此Graphics對象的呈現原點。
SmoothingMode 獲取或設置此Graphics對象的呈現質量。
TextRenderingHint 獲取或設置與此Graphics對象關聯的文本的呈現模式。
Transform 獲取或設置此Graphics對象的全局變換。
VisibleClipBounds 獲取或設置此Graphics對象的可見剪輯區域的邊框。
表02:Graphics類中的常用屬性及其說明

(3).利用FillPie和DrawPie方法繪制扇型的具體方法:

DrawPie方法功能是繪制一個扇型,下面是 DrawPie方法的一種調用語法,此語法也是本文中主要的調用方式,具體如下:

public void DrawPie ( Pen , float , float , float , float , float , float ) ;

此種DrawPie調用方法是由七個參數組成,這七個參數的具體說明如下:

第一個參數:定義繪制扇型的畫筆類型;

第二和第三個參數:定義扇型的坐標;

第四和第五個參數:定義組成扇型的二個射線的長度;

第六和第七個參數:定義扇型的開始角度和扇型旋轉的角度大小。其中把X坐標的正方向定為0度角,計算扇型的開始角度的按照順時針方向旋轉,最先到達的扇型的那條射線和0度角之間的夾角。

下列代碼就是在ASP.NET頁面中繪制一個扇型:

Bitmap bm = new Bitmap ( 600 , 300 ) ;
//創建一個長度為600,寬帶為300的Bitmap實例
Graphics g ;
g = Graphics.FromImage ( bm ) ;
//由此Bitmap實例創建Graphic實例
g . Clear ( Color . Snow ) ;
g.DrawPie ( Pens.Red , 50 , 50 , 150 , 150 , 0 , 30 ) ;

圖02就是上述代碼運行后繪制的扇型:


圖02:在ASP.NET頁面中繪制扇型

在上述代碼后,再添加下列代碼:

g.DrawPie ( Pens.Black , 50 , 50 , 150 , 150 , 30 , 60 ) ;

此時在運行,可得到圖03所示界面:


圖03:在ASP.NET頁面中繪制二個扇型

此時再利用FillPie方法以不通的色彩填充上述繪制的扇型,就可以得到圖01所示的Pie圖中的一部分了。FillPie方法在本文中的調用語法如下:

public void FillPie ( Brush , float , float , float , float , float , float ) ;

FillPie方法參數和DrawPie方法FillPie方法基本相同,只是第一個參數有所區別,FillPie方法第一個參數定義的是要填充扇型的刷子類型,而并非是畫筆類型。

在上述修改后的代碼后面再添加下列代碼:

g.FillPie ( new SolidBrush ( Color .Blue ) , 50 , 50 , 150 , 150 , 0 , 30 ) ;
g.FillPie ( new SolidBrush ( Color .Yellow ) , 50 , 50 , 150 , 150 , 30 , 60 ) ;

此時再運行就可得到圖04所示的界面:


圖04:在ASP.NET頁面中為扇型顏色后的界面

至此我想大家應該了解到,圖01所示的Pie圖其實就是根據從數據庫中得到的數值大小計算各自在一個圓形中的360度所占度數的多少,分別繪制扇型,然后再以不同的顏色填充,最后加以組合而形成的。了解了這種思想,并掌握了FillPie和DrawPie方法,下面就來具體介紹在ASP.NET頁面中實現數據Pie圖的步驟。

四.ASP.NET頁面中實現數據Pie圖實現步驟

在實現數據Pie圖之前,首先要確保在C盤的根目錄存在"db.mdb"數據庫,并且此數據庫已經設定完畢,并且存在《在ASP.NET頁面中實現數據棒圖》一文中的數據。下面是ASP.NET實現數據Pie圖的具體步驟,開發工具使用的是Visual Studio .Net,采用的是C#語言。

1. 啟動Visual Studio .Net。

2. 選擇菜單【文件】|【新建】|【項目】后,彈出【新建項目】對話框。

3. 將【項目類型】設置為【Visual C#項目】。

4. 將【模板】設置為【ASP.NET Web 應用程序】。

5. 在【位置】的文本框中輸入"http://localhost/Pie"。然后單擊【確定】按鈕,這樣在Visual Studio .Net就會在當前項目文件所在目錄中建立一個名稱為"Pie"文件夾,里面存放是此項目的項目文件,項目中的其他文件存放的位置是計算機Internet信息服務的默認的Web站點所在的目錄中新建的一個名稱為"Pie"的文件夾中。具體如圖05所示:


圖05:新建一個ASP.NET項目對話框

6. 把Visual Studio .Net的當前窗口切換到WebForm的代碼編輯窗口,即:WebForm1.aspx.cs文件的編輯窗口。

7. 在WebForm1.aspx.cs文件首部,用下列代碼替換WebForm1.aspx.cs中導入命名空間的代碼:

using System ;
using System . Collections ;
using System . ComponentModel ;
using System . Data ;
using System . Drawing ;
using System . Web ;
using System . Web . SessionState ;
using System . Web . UI ;
using System . Web . UI . WebControls ;
using System . Web . UI . HtmlControls ;
using System . Drawing . Imaging ;
//下面程序中使用的ImageFormat類所在的命名空間
using System . Data . OleDb ;
//下面程序中使用到關于數據庫方面的類所在的命名空間

8. WebForm1.aspx.cs文件中的Page_Load事件處理代碼中添加下列代碼,下列代碼的作用是打開數據庫,讀取數據,并以此數據形成數據Pie圖:

string sRouter = "c:\db.mdb" ;
//獲得當前Access數據庫在服務器端的絕對路徑
string strCon = " Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + sRouter ;
//創建一個數據庫連接
OleDbConnection myConn = new OleDbConnection ( strCon ) ;
string strCom = " SELECT YF ,SL FROM Table01 ORDER BY YF" ;
myConn.Open ( ) ;
OleDbCommand myCommand = new OleDbCommand ( strCom , myConn ) ;
OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader ( ) ;
//創建OleDbDataReader實例,并以此實例來獲取數據庫中各條記錄數據
int [ ] iXiaoSH = new int [ 12 ] ;
//定義一個數組,用以存放從數據庫中讀取的銷售數據
string [ ] sMoth = new string [ 12 ] ;
//定義一個數組,用以存放從數據庫中讀取的銷售月份
int iIndex = 0 ;
while ( myOleDbDataReader.Read ( ) )
{
iXiaoSH [ iIndex ] = myOleDbDataReader.GetInt32 ( 1 ) ;
sMoth [ iIndex ] = myOleDbDataReader.GetInt32 ( 0 ) . ToString() + "月" ;
iIndex++ ;
}
//讀取Table01數據表中的各條數據,并存放在先前定義的二個數組中
myConn . Close ( ) ;
myOleDbDataReader . Close ( ) ;

Bitmap bm = new Bitmap ( 600 , 300 ) ;
//創建一個長度為600,寬帶為300的Bitmap實例
Graphics g ;
g = Graphics.FromImage ( bm ) ;
//由此Bitmap實例創建Graphic實例
g . Clear ( Color . Snow ) ;
//用Snow色彩為背景色填充此繪畫圖面
g . DrawString ( " ××公司××器件2002年度銷售情況一覽表" , new Font ( "宋體" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ;
//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
//以下代碼是是實現圖01中的右上部區域
//以上是在圖01中為下面繪制定位
Point myRec = new Point ( 515 , 30 ) ;
Point myDec = new Point ( 540 , 30 ) ;
Point myTxt = new Point ( 565 , 30 ) ;
g . DrawString ( "單位:萬套" , new Font ( "宋體" , 9 ) , Brushes . Black , new Point ( 515 , 12 ) ) ;
for ( int i = 0 ; i < sMoth.Length ; i++ )
{
g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , myRec . X , myRec . Y , 20 , 10 ) ;
//填充小方塊
g . DrawRectangle ( Pens.Black , myRec . X , myRec . Y , 20 , 10 ) ;
//繪制小方塊
g . DrawString ( sMoth [ i ] . ToString ( ) , new Font ( "宋體", 9 ) , Brushes . Black , myDec ) ;
//繪制小方塊右邊的文字
g . DrawString ( iXiaoSH[i].ToString (), new Font ( "宋體", 9 ) , Brushes . Black , myTxt ) ;
myRec . Y += 15 ;
myDec . Y += 15 ;
myTxt . Y += 15 ;
}
//以下代碼是根據從數據庫中得到的數值大小,繪制扇型,并以相應色彩填充扇型,//從而構成圖01中的Pie圖
int iTatal = 0 ;
float fCurrentAngle = 0 ;
float fStartAngle = 0;
for ( int i = 0 ; i < iXiaoSH . Length ; i++ )
{
iTatal = iTatal + iXiaoSH [ i ] ;
}
for ( int i = 0 ; i < iXiaoSH . Length ; i++ )
{
//以下代碼是獲得要繪制扇型的開始角度
if ( i == iXiaoSH . Length - 1 )
{
fCurrentAngle = 360- fStartAngle ;
}
else
{
int iTemp = iXiaoSH [ i ] ;
fCurrentAngle = ( iTemp * 360 ) / iTatal ;
}
//根據參數繪制扇型
g.DrawPie ( Pens.Black , 100 , 40 , 250 , 250 , fStartAngle , fCurrentAngle ) ;
//以指定色彩填充繪制的扇型
g.FillPie ( new SolidBrush ( GetColor ( i ) ) , 100 , 40 , 250 , 250 , fStartAngle , fCurrentAngle ) ;
fStartAngle += fCurrentAngle ;
}
//畫出圖片的邊框
Pen p = new Pen ( Color.Black , 2 ) ;
g . DrawRectangle ( p , 1 , 1 , 598 , 298 ) ;
//向客戶端輸出數據流,并以此數據流形成Jpeg圖片
bm.Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
9. WebForm1.aspx.cs文件中的InitializeComponent過程之后,添加下列代碼,下列代碼的作用是定義一個名稱為GetColor函數,此函數的功能根據索引號得到相應的系統顏色:
private Color GetColor ( int itemIndex )
{
Color MyColor ;
int i = itemIndex ;
switch ( i )
{
case 0 :
MyColor = Color . Cornsilk ;
return MyColor ;
case 1 :
MyColor = Color . Red ;
return MyColor ;
case 2 :
MyColor = Color . Yellow ;
return MyColor ;
case 3 :
MyColor = Color . Peru ;
return MyColor ;
case 4 :
MyColor = Color . Orange ;
return MyColor ;
case 5 :
MyColor = Color . Coral ;
return MyColor ;
case 6:
MyColor = Color . Gray ;
return MyColor ;
case 7:
MyColor = Color . Maroon ;
return MyColor ;
case 8:
MyColor = Color . Azure ;
return MyColor ;
case 9:
MyColor = Color.AliceBlue ;
return MyColor ;
case 10:
MyColor = Color . Bisque ;
return MyColor ;
case 11:
MyColor = Color . BurlyWood ;
return MyColor ;
case 12:
MyColor = Color . Chartreuse ;
return MyColor ;
default:
MyColor = Color . Green ;
return MyColor ;
}
}

至此,在上述步驟都正確執行后,在ASP.NET頁面中實現數據Pie圖的全部工作就完成了。此時單擊快捷鍵F5,就可以得到如圖01所示的數據Pie圖了。

五.總結:

由于ASP.NET提供了豐富的繪圖功能,所以結合這二篇文章的介紹,我想再實現其他的數據圖表,應該也不算很困難。在實現其他圖表之前,首先要明確要繪制的圖表的方法,本文和《在ASP.NET頁面中實現數據棒圖》在繪制圖表方面就存在很大的不同。當然前提是熟練使用ASP.NET中繪制各種圖形的方法。

作者:http://www.zhujiangroad.com
來源:http://www.zhujiangroad.com
北斗有巢氏 有巢氏北斗