在ASP.NET页面中实现数据饼图（转载）
ASP.NET之所以能够在客户端浏览器中形成各种数据图片，是因为在ASP.NET中提供了绘图功能，具体的作法是先在服务器端创建一个Bitmap实例，然后利用ASP.NET中提供的绘图功能，按照要生成的图片的模样，进行绘制，最后把绘制好的实例以数据流的方式传送到客户端的浏览器上，并形成图片显示出来。本文要介绍的在ASP.NET页面中实现数据饼图采用的基本也是这种方法。饼图有时称为"Pie"图，本文要实现的数据饼图模样具体如图01所示：
图01：在ASP.NET页面中产生的数据饼图
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图实现步骤：
ACCESS数据库：
| ID | YF | SL |
|---|---|---|
| 1 | 1 | 10 |
| 2 | 2 | 6 |
| 3 | 3 | 14 |
| 4 | 4 | 17 |
| 5 | 5 | 15 |
| 6 | 6 | 10 |
| 7 | 7 | 16 |
| 8 | 8 | 10 |
| 9 | 9 | 7 |
| 10 | 10 | 11 |
| 11 | 11 | 9 |
| 12 | 12 | 15 |
源码：
pie
1 using System ;
2 using System . Collections ;
3 using System . ComponentModel ;
4 using System . Data ;
5 using System . Drawing ;
6 using System . Web ;
7 using System . Web . SessionState ;
8 using System . Web . UI ;
9 using System . Web . UI . WebControls ;
10 using System . Web . UI . HtmlControls ;
11 using System . Drawing . Imaging ;
12 //下面程序中使用的ImageFormat类所在的命名空间
13 using System . Data . OleDb ;
14 //下面程序中使用到关于数据库方面的类所在的命名空间
15 string sRouter = "c:\\db.mdb" ;
16 //获得当前Access数据库在服务器端的绝对路径
17 string strCon = " Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + sRouter ;
18 //创建一个数据库连接
19 OleDbConnection myConn = new OleDbConnection ( strCon ) ;
20 string strCom = " SELECT YF ,SL FROM Table01 ORDER BY YF" ;
21 myConn.Open ( ) ;
22 OleDbCommand myCommand = new OleDbCommand ( strCom , myConn ) ;
23 OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader ( ) ;
24 //创建OleDbDataReader实例，并以此实例来获取数据库中各条记录数据
25 int [ ] iXiaoSH = new int [ 12 ] ;
26 //定义一个数组，用以存放从数据库中读取的销售数据
27 string [ ] sMoth = new string [ 12 ] ;
28 //定义一个数组，用以存放从数据库中读取的销售月份
29 int iIndex = 0 ;
30 while ( myOleDbDataReader.Read ( ) )
31 {
32 iXiaoSH [ iIndex ] = myOleDbDataReader.GetInt32 ( 1 ) ;
33 sMoth [ iIndex ] = myOleDbDataReader.GetInt32 ( 0 ) . ToString() + "月" ;
34 iIndex++ ;
35 }
36 //读取Table01数据表中的各条数据，并存放在先前定义的二个数组中
37 myConn . Close ( ) ;
38 myOleDbDataReader . Close ( ) ;
39 Bitmap bm = new Bitmap ( 600 , 300 ) ;
40 //创建一个长度为600，宽带为300的Bitmap实例
41 Graphics g ;
42 g = Graphics.FromImage ( bm ) ;
43 //由此Bitmap实例创建Graphic实例
44 g . Clear ( Color . Snow ) ;
45 //用Snow色彩为背景色填充此绘画图面
46 g . DrawString ( " ××公司××器件2002年度销售情况一览表" , new Font ( "宋体" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ;
47 //在绘画图面的指定位置，以指定的字体、指定的颜色绘制指定的字符串。即为图表标题
48 //以下代码是是实现图01中的右上部区域
49 //以上是在图01中为下面绘制定位
50 Point myRec = new Point ( 515 , 30 ) ;
51 Point myDec = new Point ( 540 , 30 ) ;
52 Point myTxt = new Point ( 565 , 30 ) ;
53 g . DrawString ( "单位：万套" , new Font ( "宋体" , 9 ) , Brushes . Black , new Point ( 515 , 12 ) ) ;
54 for ( int i = 0 ; i < sMoth.Length ; i++ )
55 {
56 g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , myRec . X , myRec . Y , 20 , 10 ) ;
57 //填充小方块
58 g . DrawRectangle ( Pens.Black , myRec . X , myRec . Y , 20 , 10 ) ;
59 //绘制小方块
60 g . DrawString ( sMoth [ i ] . ToString ( ) , new Font ( "宋体", 9 ) , Brushes . Black , myDec ) ;
61 //绘制小方块右边的文字
62 g . DrawString ( iXiaoSH[i].ToString (), new Font ( "宋体", 9 ) , Brushes . Black , myTxt ) ;
63 myRec . Y += 15 ;
64 myDec . Y += 15 ;
65 myTxt . Y += 15 ;
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 g.DrawPie ( Pens.Black , 100 , 40 , 250 , 250 , fStartAngle , fCurrentAngle ) ;
89 //以指定色彩填充绘制的扇型
90 g.FillPie ( new SolidBrush ( GetColor ( i ) ) , 100 , 40 , 250 , 250 , fStartAngle , fCurrentAngle ) ;
91 fStartAngle += fCurrentAngle ;
92 }
93 //画出图片的边框
94 Pen p = new Pen ( Color.Black , 2 ) ;
95 g . DrawRectangle ( p , 1 , 1 , 598 , 298 ) ;
96 //向客户端输出数据流，并以此数据流形成Jpeg图片
97 bm.Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
98 9. WebForm1.aspx.cs文件中的InitializeComponent过程之后，添加下列代码，下列代码的作用是定义一个名称为GetColor函数，此函数的功能根据索引号得到相应的系统颜色：
99 private Color GetColor ( int itemIndex )
100 {
101 Color MyColor ;
102 int i = itemIndex ;
103 switch ( i )
104 {
105 case 0 :
106 MyColor = Color . Cornsilk ;
107 return MyColor ;
108 case 1 :
109 MyColor = Color . Red ;
110 return MyColor ;
111 case 2 :
112 MyColor = Color . Yellow ;
113 return MyColor ;
114 case 3 :
115 MyColor = Color . Peru ;
116 return MyColor ;
117 case 4 :
118 MyColor = Color . Orange ;
119 return MyColor ;
120 case 5 :
121 MyColor = Color . Coral ;
122 return MyColor ;
123 case 6:
124 MyColor = Color . Gray ;
125 return MyColor ;
126 case 7:
127 MyColor = Color . Maroon ;
128 return MyColor ;
129 case 8:
130 MyColor = Color . Azure ;
131 return MyColor ;
132 case 9:
133 MyColor = Color.AliceBlue ;
134 return MyColor ;
135 case 10:
136 MyColor = Color . Bisque ;
137 return MyColor ;
138 case 11:
139 MyColor = Color . BurlyWood ;
140 return MyColor ;
141 case 12:
142 MyColor = Color . Chartreuse ;
143 return MyColor ;
144 default:
145 MyColor = Color . Green ;
146 return MyColor ;
147 }
148 }
