在ASP.NET页面中实现数据饼图

Category: 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中绘制各种图形的方法。