在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）以上版本。
二．數據字典：
為了方便起見，本文選擇的數據庫類型為本地數據庫--Access 2000，如果你使用的是其他數據庫類型，只需對下面介紹的程序中的關于數據庫連接的代碼進行相應的修改就可以了。Access數據庫名稱為"db2.mdb"，在此數據庫中只定義了一張數據表"MonthSale"，此表的結構如表01所示：
| 字段名稱 | 類型 | 說明 |
| ID | 自動編號 | 主鍵 ，遞增 |
| YF | 數字 | 銷售月份 |
| SL | 數字 | 銷量 |
在定義完"db2.mdb"數據庫中的"MonthSale"數據表后，在MonthSale數據表中按照表02所示添加記錄：
| ID | YF | SL |
| 1 | 1 | 12 |
| 2 | 2 | 5 |
| 3 | 3 | 7 |
| 4 | 4 | 20 |
| 5 | 5 | 16 |
| 6 | 6 | 10 |
| 7 | 7 | 19 |
| 8 | 8 | 8 |
| 9 | 9 | 7 |
| 10 | 10 | 13 |
| 11 | 11 | 11 |
| 12 | 12 | 15 |
在MonthSale數據表中添加完這12條記錄后，保存"db2.mdb"數據庫到C盤的根目錄中。
下面就要解決根據從數據庫中讀取的數據繪制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對象的可見剪輯區域的邊框。 |
（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 ) ; |
在實現數據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站點所在的目錄中新建的一個名稱為"WebPieDemo"的文件夾中
6. 把Visual Studio .Net的當前窗口切換到WebForm的代碼編輯窗口，即：WebForm1.aspx.cs文件的編輯窗口。
7. 在WebForm1.aspx.cs文件首部，用下列代碼替換WebForm1.aspx.cs中導入命名空間的代碼：
1//下面程序中使用的ImageFormat類所在的命名空間
2using?System?.?Drawing?.?Imaging?;
3//下面程序中使用到關于數據庫方面的類所在的命名空間
4using?System?.?Data?.?OleDb?;8. WebForm1.aspx.cs文件中的Page_Load事件處理代碼中添加下列代碼，下列代碼的作用是打開數據庫，讀取數據，并以此數據形成數據Pie圖：
??1private?void?Page_Load(object?sender,?System.EventArgs?e)
??2????????{
??3????????????//?在此處放置用戶代碼以初始化頁面
??4????????????string?sRouter?=?"c:\\db2.mdb"?;
??5
??6????????????//獲得當前Access數據庫在服務器端的絕對路徑
??7????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
??8
??9????????????//創建一個數據庫連接
?10????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
?11????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
?12????????????myConn.Open?(?)?;
?13????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
?14????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
?15????????????//創建OleDbDataReader實例，并以此實例來獲取數據庫中各條記錄數據
?16
?17????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
?18????????????//定義一個數組，用以存放從數據庫中讀取的銷售數據
?19
?20????????????string?[?]?sMoth?=?new?string?[?12?]?;
?21????????????//定義一個數組，用以存放從數據庫中讀取的銷售月份
?22
?23????????????int?iIndex?=?0?;
?24????????????while?(?myOleDbDataReader.Read?(?)?)?
?25????????????{
?26????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
?27????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString()?+?"月"?;
?28????????????????iIndex++?;
?29????????????}
?30????????????//讀取Table01數據表中的各條數據，并存放在先前定義的二個數組中
?31
?32????????????myConn?.?Close?(?)?;
?33????????????myOleDbDataReader?.?Close?(?)?;
?34?
?35????????????Bitmap?bm?=?new?Bitmap?(?600?,?300?)?;
?36????????????//創建一個長度為600，寬帶為300的Bitmap實例
?37
?38????????????Graphics?g?;
?39????????????g?=?Graphics.FromImage?(?bm?)?;
?40????????????g?.?Clear?(?Color?.?Snow?)?;
?41????????????g?.?DrawString?(?"?××公司××××年度銷售情況一覽表"?,?new?Font?(?"宋體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
?42????????????//在繪畫圖面的指定位置，以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
?43
?44????????????//以下代碼是是實現圖01中的右上部區域
?45????????????//以上是在圖01中為下面繪制定位
?46????????????Point?myRec?=?new?Point?(?515?,?30?)?;
?47????????????Point?myDec?=?new?Point?(?540?,?30?)?;
?48????????????Point?myTxt?=?new?Point?(?565?,?30?)?;
?49????????????g?.?DrawString?(?"單位：萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?515?,?12?)?)?;
?50????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
?51????????????{
?52????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
?53????????????????//填充小方塊
?54
?55????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
?56????????????????//繪制小方塊
?57
?58????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體",?9?)?,?Brushes?.?Black?,?myDec?)?;
?59????????????????//繪制小方塊右邊的文字
?60
?61????????????????g?.?DrawString?(?iXiaoSH[i].ToString?(),?new?Font?(?"宋體",?9?)?,?Brushes?.?Black?,?myTxt?)?;
?62????????????????myRec?.?Y?+=?15?;
?63????????????????myDec?.?Y?+=?15?;
?64????????????????myTxt?.?Y?+=?15?;
?65????????????}
?66
?67????????????//以下代碼是根據從數據庫中得到的數值大小，繪制扇型，并以相應色彩填充扇型，//從而構成圖01中的Pie圖
?68????????????int?iTatal?=?0?;?
?69????????????float?fCurrentAngle?=?0?;
?70????????????float?fStartAngle?=?0;
?71????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)
?72????????????{
?73????????????????iTatal?=?iTatal?+?iXiaoSH?[?i?]?;
?74????????????}
?75????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)
?76????????????{
?77????????????????//以下代碼是獲得要繪制扇型的開始角度
?78????????????????if?(?i?==?iXiaoSH?.?Length?-?1?)
?79????????????????{
?80????????????????????fCurrentAngle?=?360-?fStartAngle?;
?81????????????????}
?82????????????????else
?83????????????????{
?84????????????????????int?iTemp?=?iXiaoSH?[?i?]?;
?85????????????????????fCurrentAngle?=?(?iTemp?*?360?)?/?iTatal?;
?86????????????????}
?87????????????????//根據參數繪制扇型
?88
?89????????????????g.DrawPie?(?Pens.Black?,?100?,?40?,?250?,?250?,?fStartAngle?,?fCurrentAngle?)?;
?90????????????????//以指定色彩填充繪制的扇型
?91
?92????????????????g.FillPie?(?new?SolidBrush?(?GetColor?(?i?)?)?,?100?,?40?,?250?,?250?,?fStartAngle?,?fCurrentAngle?)?;
?93????????????????fStartAngle?+=?fCurrentAngle?;
?94????????????}
?95
?96????????????//畫出圖片的邊框
?97????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
?98????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?298?)?;
?99
100????????????//向客戶端輸出數據流，并以此數據流形成Jpeg圖片
101????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat?.?Jpeg?)?;
102????????}
9. WebForm1.aspx.cs文件中的InitializeComponent過程之后，添加下列代碼，下列代碼的作用是定義一個名稱為GetColor函數，此函數的功能根據索引號得到相應的系統顏色：
?1/**////?<summary>
?2????????///?獲取顏色
?3????????///?</summary>
?4????????///?<param?name="itemIndex">數組的索引</param>
?5????????///?<returns></returns>
?6????????private?Color?GetColor?(?int?itemIndex?)?
?7????????{
?8 ????????????Color?MyColor?;
?9 ????????????int?i?=?itemIndex?;
10????????????switch?(i)?
11 ????????????{
12 ????????????????case?0?:
13 ????????????????MyColor?=?Color.Green;
14 ????????????????return?MyColor;
15 ????????????????case?1?:
16 ????????????????MyColor?=?Color.Red;
17 ?????????????????return?MyColor;
18 ????????????????case?2:
19 ????????????????MyColor?=?Color.Yellow;
20 ????????????????return?MyColor;
21 ????????????????case?3?:
22 ????????????????MyColor?=?Color.Blue;
23 ????????????????return?MyColor;
24 ????????????????case?4?:
25 ????????????????MyColor?=?Color.Orange;
26 ????????????????return?MyColor;
27??????? ????????case?5?:
28 ????????????????MyColor?=?Color.Aqua;
29 ????????????????return?MyColor;
30 ????????????????case?6:
31 ????????????????MyColor?=?Color.SkyBlue;
32 ????????????????return?MyColor;
33 ????????????????case?7:
34 ????????????????MyColor?=?Color.DeepPink;
35 ????????????????return?MyColor;
36 ????????????????case?8:
37 ????????????????MyColor?=?Color.Azure;
38 ????????????????return?MyColor;
39 ????????????????case?9:
40 ????????????????MyColor?=?Color.Brown;
41 ????????????????return?MyColor;
42 ????????????????case?10:
43 ????????????????MyColor?=?Color.Pink;
44 ????????????????return?MyColor;
45 ????????????????case?11:
46 ????????????????MyColor?=?Color.BurlyWood;
47 ????????????????return?MyColor;
48 ????????????????case?12:
49 ????????????????MyColor?=?Color.Chartreuse;
50 ????????????????return?MyColor;
51 ????????????????default:
52 ????????????????MyColor?=?Color.Pink;
53 ????????????????return?MyColor;
54????????????}
55????????}
至此，在上述步驟都正確執行后，在ASP.NET頁面中實現數據Pie圖的全部工作就完成了。此時單擊快捷鍵F5，就可以得到如圖01所示的數據Pie圖了。
五．總結：
由于ASP.NET提供了豐富的繪圖功能，所以結合這二篇文章的介紹，我想再實現其他的數據圖表，應該也不算很困難。
完整的例子代碼：
??1using?System;
??2using?System.Collections;
??3using?System.ComponentModel;
??4using?System.Data;
??5using?System.Drawing;
??6using?System.Web;
??7using?System.Web.SessionState;
??8using?System.Web.UI;
??9using?System.Web.UI.WebControls;
?10using?System.Web.UI.HtmlControls;
?11//下面程序中使用的ImageFormat類所在的命名空間
?12using?System?.?Drawing?.?Imaging?;
?13//下面程序中使用到關于數據庫方面的類所在的命名空間
?14using?System?.?Data?.?OleDb?;
?15
?16
?17namespace?WebPieDemo
?18{
?19????/**////?<summary>
?20????///?WebForm1?的摘要說明。
?21????///?</summary>
?22????public?class?WebForm1?:?System.Web.UI.Page
?23????{
?24????????private?void?Page_Load(object?sender,?System.EventArgs?e)
?25????????{
?26????????????//?在此處放置用戶代碼以初始化頁面
?27????????????string?sRouter?=?"c:\\db2.mdb"?;
?28
?29????????????//獲得當前Access數據庫在服務器端的絕對路徑
?30????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
?31
?32????????????//創建一個數據庫連接
?33????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
?34????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
?35????????????myConn.Open?(?)?;
?36????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
?37????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
?38????????????//創建OleDbDataReader實例，并以此實例來獲取數據庫中各條記錄數據
?39
?40????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
?41????????????//定義一個數組，用以存放從數據庫中讀取的銷售數據
?42
?43????????????string?[?]?sMoth?=?new?string?[?12?]?;
?44????????????//定義一個數組，用以存放從數據庫中讀取的銷售月份
?45
?46????????????int?iIndex?=?0?;
?47????????????while?(?myOleDbDataReader.Read?(?)?)?
?48????????????{
?49????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
?50????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString()?+?"月"?;
?51????????????????iIndex++?;
?52????????????}
?53????????????//讀取Table01數據表中的各條數據，并存放在先前定義的二個數組中
?54
?55????????????myConn?.?Close?(?)?;
?56????????????myOleDbDataReader?.?Close?(?)?;
?57?
?58????????????Bitmap?bm?=?new?Bitmap?(?600?,?300?)?;
?59????????????//創建一個長度為600，寬帶為300的Bitmap實例
?60
?61????????????Graphics?g?;
?62????????????g?=?Graphics.FromImage?(?bm?)?;
?63????????????g?.?Clear?(?Color?.?Snow?)?;
?64????????????g?.?DrawString?(?"?××公司××××年度銷售情況一覽表"?,?new?Font?(?"宋體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
?65????????????//在繪畫圖面的指定位置，以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
?66
?67????????????//以下代碼是是實現圖01中的右上部區域
?68????????????//以上是在圖01中為下面繪制定位
?69????????????Point?myRec?=?new?Point?(?515?,?30?)?;
?70????????????Point?myDec?=?new?Point?(?540?,?30?)?;
?71????????????Point?myTxt?=?new?Point?(?565?,?30?)?;
?72????????????g?.?DrawString?(?"單位：萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?515?,?12?)?)?;
?73????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
?74????????????{
?75????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
?76????????????????//填充小方塊
?77
?78????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
?79????????????????//繪制小方塊
?80
?81????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體",?9?)?,?Brushes?.?Black?,?myDec?)?;
?82????????????????//繪制小方塊右邊的文字
?83
?84????????????????g?.?DrawString?(?iXiaoSH[i].ToString?(),?new?Font?(?"宋體",?9?)?,?Brushes?.?Black?,?myTxt?)?;
?85????????????????myRec?.?Y?+=?15?;
?86????????????????myDec?.?Y?+=?15?;
?87????????????????myTxt?.?Y?+=?15?;
?88????????????}
?89
?90????????????//以下代碼是根據從數據庫中得到的數值大小，繪制扇型，并以相應色彩填充扇型，//從而構成圖01中的Pie圖
?91????????????int?iTatal?=?0?;?
?92????????????float?fCurrentAngle?=?0?;
?93????????????float?fStartAngle?=?0;
?94????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)
?95????????????{
?96????????????????iTatal?=?iTatal?+?iXiaoSH?[?i?]?;
?97????????????}
?98????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)
?99????????????{
100????????????????//以下代碼是獲得要繪制扇型的開始角度
101????????????????if?(?i?==?iXiaoSH?.?Length?-?1?)
102????????????????{
103????????????????????fCurrentAngle?=?360-?fStartAngle?;
104????????????????}
105????????????????else
106????????????????{
107????????????????????int?iTemp?=?iXiaoSH?[?i?]?;
108????????????????????fCurrentAngle?=?(?iTemp?*?360?)?/?iTatal?;
109????????????????}
110????????????????//根據參數繪制扇型
111
112????????????????g.DrawPie?(?Pens.Black?,?100?,?40?,?250?,?250?,?fStartAngle?,?fCurrentAngle?)?;
113????????????????//以指定色彩填充繪制的扇型
114
115????????????????g.FillPie?(?new?SolidBrush?(?GetColor?(?i?)?)?,?100?,?40?,?250?,?250?,?fStartAngle?,?fCurrentAngle?)?;
116????????????????fStartAngle?+=?fCurrentAngle?;
117????????????}
118
119????????????//畫出圖片的邊框
120????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
121????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?298?)?;
122
123????????????//向客戶端輸出數據流，并以此數據流形成Jpeg圖片
124????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat?.?Jpeg?)?;
125????????}
126
127????????Web?窗體設計器生成的代碼#region?Web?窗體設計器生成的代碼
128????????override?protected?void?OnInit(EventArgs?e)
129????????{
130????????????//
131????????????//?CODEGEN:?該調用是?ASP.NET?Web?窗體設計器所必需的。
132????????????//
133????????????InitializeComponent();
134????????????base.OnInit(e);
135????????}
136????????
137????????/**////?<summary>
138????????///?設計器支持所需的方法?-?不要使用代碼編輯器修改
139????????///?此方法的內容。
140????????///?</summary>
141????????private?void?InitializeComponent()
142????????{????
143????????????this.Load?+=?new?System.EventHandler(this.Page_Load);
144????????}
145????????#endregion
146
147????????/**////?<summary>
148????????///?獲取顏色
149????????///?</summary>
150????????///?<param?name="itemIndex">數組的索引</param>
151????????///?<returns></returns>
152????????private?Color?GetColor?(?int?itemIndex?)?
153????????{
154 ????????????Color?MyColor?;
155 ????????????int?i?=?itemIndex?;
156????????????switch?(i)?
157 ????????????{
158 ????????????????case?0?:
159 ????????????????MyColor?=?Color.Green;
160 ????????????????return?MyColor;
161 ????????????????case?1?:
162 ????????????????MyColor?=?Color.Red;
163 ?????????????????return?MyColor;
164 ????????????????case?2:
165 ????????????????MyColor?=?Color.Yellow;
166 ????????????????return?MyColor;
167 ????????????????case?3?:
168 ????????????????MyColor?=?Color.Blue;
169 ????????????????return?MyColor;
170 ????????????????case?4?:
171 ????????????????MyColor?=?Color.Orange;
172 ????????????????return?MyColor;
173??????? ????????case?5?:
174 ????????????????MyColor?=?Color.Aqua;
175 ????????????????return?MyColor;
176 ????????????????case?6:
177 ????????????????MyColor?=?Color.SkyBlue;
178 ????????????????return?MyColor;
179 ????????????????case?7:
180 ????????????????MyColor?=?Color.DeepPink;
181 ????????????????return?MyColor;
182 ????????????????case?8:
183 ????????????????MyColor?=?Color.Azure;
184 ????????????????return?MyColor;
185 ????????????????case?9:
186 ????????????????MyColor?=?Color.Brown;
187 ????????????????return?MyColor;
188 ????????????????case?10:
189 ????????????????MyColor?=?Color.Pink;
190 ????????????????return?MyColor;
191 ????????????????case?11:
192 ????????????????MyColor?=?Color.BurlyWood;
193 ????????????????return?MyColor;
194 ????????????????case?12:
195 ????????????????MyColor?=?Color.Chartreuse;
196 ????????????????return?MyColor;
197 ????????????????default:
198 ????????????????MyColor?=?Color.Pink;
199 ????????????????return?MyColor;
200????????????}
201????????}
202????}
203}
204
轉載于:https://www.cnblogs.com/Terrylee/archive/2005/10/12/253099.html
總結
以上是生活随笔為你收集整理的在Asp.net页面中实现数据饼图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在ASP.NET页面中实现数据柱状图
- 下一篇： C/C++语言可变参数表深层探索