科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件在ASP.NET页面中实现数据饼图

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

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

本文要介绍的在ASP.NET页面中实现数据饼图采用的基本也是这种方法

作者:阿虎 来源:yesky 2007年11月8日

关键字: Windows

  • 评论
  • 分享微博
  • 分享邮件
四.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中绘制各种图形的方法。

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章