在《在ASP.NET页面中实现数据棒图》中已经介绍了ASP.NET中数据棒图的绘制方法。前文已经说过,ASP.NET之所以能够在客户端浏览器中形成各种数据图片,是因为在ASP.NET中提供了绘图功能,具体的作法是先在服务器端创建一个Bitmap实例,然后利用ASP.NET中提供的绘图功能,按照要生成的图片的模样,进行绘制,最后把绘制好的实例以数据流的方式传送到客户端的浏览器上,并形成图片显示出来。本文要介绍的在ASP.NET页面中实现数据饼图采用的基本也是这种方法。饼图有时称为"Pie"图,本文要实现的数据饼图模样具体如图01所示:
表 01 : Graphics 类中的常用方法及其说明
在本文中使用最多,也是最重要的方法就是: FillPie 和 DrawPie 方法。这二个方法的具体使用方法,在下文中又详细介绍。
图02就是上述代码运行后绘制的扇型:
此时在运行,可得到图03所示界面:
FillPie 方法参数和 DrawPie 方法 FillPie 方法基本相同,只是第一个参数有所区别, FillPie 方法第一个参数定义的是要填充扇型的刷子类型,而并非是画笔类型。
在上述修改后的代码后面再添加下列代码:
此时再运行就可得到图04所示的界面:
在实现数据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所示:
8. WebForm1.aspx.cs 文件中的 Page_Load 事件处理代码中添加下列代码,下列代码的作用是打开数据库,读取数据,并以此数据形成数据 Pie 图:
![](http://www.chinamacro.com/blog/Images/user/gf/01.gif)
一.本文程序设计和运行的软件环境:
(1).微软公司视窗2000服务器版。
(2).Visual Studio .Net正式版,.Net FrameWork SDK版本号3705。
(3).MDAC 2.6(Microsoft Data Acess Component)以上版本。
二.数据字典:
本文采用数据库类型、结构和《在ASP.NET页面中实现数据棒图》一文中完全相同,Table01数据表中的数据记录也和《在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 类中常用属性及其说明:
在本文中所要解决的问题和《 在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 页面中绘制一个扇型:
( 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就是上述代码运行后绘制的扇型:
![](http://www.chinamacro.com/blog/Images/user/gf/02.gif)
在上述代码后,再添加下列代码:
g.DrawPie ( Pens.Black , 50 , 50 , 150 , 150 , 30 , 60 ) ;
|
此时在运行,可得到图03所示界面:
![](http://www.chinamacro.com/blog/Images/user/gf/03.gif)
此时再利用
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所示的界面:
![](http://www.chinamacro.com/blog/Images/user/gf/04.gif)
至此我想大家应该了解到,图
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所示:
![](http://www.chinamacro.com/blog/Images/user/gf/05.gif)
6.
把
Visual Studio .Net
的当前窗口切换到
WebForm
的代码编辑窗口,即:
WebForm1.aspx.cs
文件的编辑窗口。
7. 在 WebForm1.aspx.cs 文件首部,用下列代码替换 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 中绘制各种图形的方法。
五.总结:
由于 ASP.NET 提供了丰富的绘图功能,所以结合这二篇文章的介绍,我想再实现其他的数据图表,应该也不算很困难。在实现其他图表之前,首先要明确要绘制的图表的方法,本文和《在 ASP.NET 页面中实现数据棒图》在绘制图表方面就存在很大的不同。当然前提是熟练使用 ASP.NET 中绘制各种图形的方法。