技术开发 频道

在Asp.net页面中实现数据饼图


【IT168技术文档】

  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 }

0
相关文章