柱状图

来源:互联网 发布:神的记事本小说9淘宝 编辑:程序博客网 时间:2024/04/29 04:42

ASP.NET页面中实现数据Bar图的关键步骤及其实现方法:

  在ASP.NET页面中实现数据Bar图首先必须解决二大问题:

  (1).首先要解决在ASP.NET页面中实现数据库连接和从数据库中读取数据的方法。

  程序要实现从数据库中一条条的读取数据,则要使用OleDbDataReader类,
  OleDbDataReader类提供了从数据库中逐条读取数据的方法。
  下面代码是连接C盘根目录下的"db2.mdb"数据库,
  逐条读取MonthSale数据表中的记录,
  并把数据存放到定义的二个数组中:
 1  tring sRouter = "c://db2.mdb" ;
 2            //获得当前Access数据库在服务器端的绝对路径
 3
 4            string strCon = " Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + sRouter ;
 5            //创建一个数据库连接
 6
 7            OleDbConnection myConn = new OleDbConnection ( strCon ) ;
 8            string strCom = " SELECT YF ,SL FROM MonthSale ORDER BY YF" ;
 9            myConn.Open ( ) ;
10            OleDbCommand myCommand = new OleDbCommand ( strCom , myConn ) ;
11            OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader ( ) ;
12            //创建OleDbDataReader实例,并以此实例来获取数据库中各条记录数据
13
14            int [ ] iXiaoSH = new int [ 12 ] ;
15            //定义一个数组,用以存放从数据库中读取的销售数据
16
17            string [ ] sMoth = new string [ 12 ] ;
18            //定义一个数组,用以存放从数据库中读取的销售月份
19
20            int iIndex = 0 ;
21            while ( myOleDbDataReader.Read ( ) )
22            {
23                iXiaoSH [ iIndex ] = myOleDbDataReader.GetInt32 ( 1 ) ;
24                sMoth [ iIndex ] = myOleDbDataReader.GetInt32 ( 0 ) . ToString ( ) + "月" ;
25                iIndex++ ;
26            }
27            //读取Table01数据表中的各条数据,并存放在先前定义的二个数组中
28
29            myConn . Close ( ) ;
30            myOleDbDataReader . Close ( ) ;
31            //关闭各种资源
(2).根据得到数据,绘制图片,并显示出来:

  通过第一步,已经把从数据库中的读取的数据存放到"iXiaoSH"和"sMoth"数组中。
 下面就要解决依据这些数据绘制出Bar图?
 首先先了解一下在ASP.NET页面中将要实现的数据Bar图的模样。
 具体可如图01所示:

图01:在ASP.NET中实现的数据Bar图

  程序中把图01所示各个元素,按照区域分成了五个部分,这五个部分将在后面介绍的程序中分别实现:

  1. 构建整个图片

  首先要创建一Bitmap实例,并以此来构建一个Graphics实例,Graphics实例提供了各种绘制方法,
 这样才能按照数据的要求在Bitmap实例上绘制各种图形。
 下面代码是在ASP.NET中创建Bitmap实例,
 并以此实例来构建 Graphics实例的具体方法:
 1Bitmap bm = new Bitmap ( 600 , 250 ) ;
2            //创建一个长度为600,宽带为250的Bitmap实例
3
4            Graphics g ;
5            g = Graphics.FromImage ( bm ) ;
6            //由此Bitmap实例创建Graphic实例
7
8            g . Clear ( Color.Snow) ;
9            //用Snow色彩为背景色填充此绘画图面2. 图01中的标题部分文字:

  这是通过Graphics实例中提供的DrawString方法以指定的字体、颜色、在指定的位置绘制指定的字符串。
 下面代码的作用是绘制图01中标题:
1 g . DrawString ( " ××公司××××年度销售情况统计表" ,
 new Font ( "黑体" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ;
2            //在绘画图面的指定位置,以指定的字体、指定的颜色绘制指定的字符串。即为图表标题
3 3. 图01中的提示区域,即图01中的右上角显示的内容:

  要绘制这部分内容首先要定位,可以把这部分要绘制的内容分成三个小部分:

  其一,是图01中的"单位:万套"文字,这部分处理起来比较简单,

 当选定要在图片中输出的文字坐标后,调用Graphics实例中提供的DrawString方法就可以了;
  
  其二,是绘制图01中的小方块,首先要调用Graphics实例中的DrawRectangle方法在指定位置,
 以指定的颜色,绘制指定大小的方块,然后再条约Graphics实例中的FillRectangle填充这个小方块就完成了;

  其三,是绘制小方块右边的文字。同样要使用Graphics实例中提供的DrawString方法,
 只不过位置坐标和字体要进行相应改变罢了。下面代码功能是绘制图01右上角显示的内容:
 1  //以下代码是是实现图右上部
 2            Point myRec = new Point ( 535 , 30 ) ;
 3            Point myDec = new Point ( 560 , 26 ) ;
 4
 5            //以上是在图01中为下面绘制定位
 6            g . DrawString ( "单位:万套" , new Font ( "宋体" , 9 ) , Brushes . Black , new Point ( 525 , 12 ) ) ;
 7  
 8  
 9            for ( int i = 0 ; i < sMoth.Length ; i++ )
10            {
11                g . DrawRectangle ( Pens.Black , myRec . X , myRec . Y , 20 , 10 ) ;
12                //绘制小方块
13
14                g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , myRec.X , myRec.Y , 20 , 10 ) ;
15                //填充小方块
16
17                g . DrawString ( sMoth [ i ] . ToString ( ) , new Font ( "宋体" , 9 ) , Brushes . Black , myDec ) ;
18                //绘制小方块右边的文字
19
20                myRec . Y += 15 ;
21                myDec . Y += 15 ;
22            }

  4. 根据从数据库中读取的数据,绘制数据Bar图:

  此部分与第三部分比较类似,最主要的区别在于,
 绘制的位置不相同,下面代码是在图01中绘制数据Bar图,并提示Bar图所代表的数量:

 

 1  //以下代码是绘制Bar图,及其销售数量
 2            int iBarWidth = 40 ;
 3            int scale = 10 ;
 4            for ( int i = 0 ; i < iXiaoSH . Length ; i++ )
 5            {
 6                g . DrawRectangle ( Pens.Black, ( i * iBarWidth ) + 15 ,
  250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ;
 7                //绘制Bar图
 8
 9                g . FillRectangle ( new SolidBrush (GetColor ( i )) ,
  ( i * iBarWidth ) + 15 , 250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ;
10                //以指定的色彩填充Bar图
11
12                g . DrawString ( iXiaoSH [ i ] . ToString ( ) ,
  new Font ( "宋体" , 9 ) , Brushes . Black , ( i * iBarWidth ) + 20 ,
  235 - ( iXiaoSH [ i ] * scale ) ) ;
13                //显示Bar图代表的数据
14            }5. 绘制图片边框,并形成Jpeg文件格式在客户端显示:

    绘制图片边框,使用的Graphics实例中的DrawRectangle方法。
  至于采用Jpeg格式文件在客户端显示,是因为Jpeg文件占用的空间较小,
  利于网络传送。下面代码是绘制图01中的边框,并形成Jpeg文件:
1  //以下代码是绘制边框,并形成Jpeg文件,供浏览器显示出来
2            Pen p = new Pen ( Color.Black , 2 ) ;
3            g . DrawRectangle ( p , 1 , 1 , 598 , 248 ) ;
4            bm.Save ( Response . OutputStream , ImageFormat.Gif) ;
  四.ASP.NET页面中实现数据Bar图实现步骤:

  掌握了上面的关键步骤及其解决方法后,在ASP.NET实现数据Bar相对就容易许多了,
 下面是ASP.NET页面中实现数据Bar图的具体实现步骤,
 在开发工具上选用的是Visual Stuido .Net企业构建版,采用的开发语言是C#。

  1. 启动Visual Studio .Net

  2. 选择菜单【文件】|【新建】|【项目】后,弹出【新建项目】对话框

  3. 将【项目类型】设置为【Visual C#项目】

  4. 将【模板】设置为【ASP.NET Web 应用程序】

  5. 在【位置】的文本框中输入"http://localhost/Bar"。
 然后单击【确定】按钮,这样在Visual Studio .Net
 就会在当前项目文件所在目录中建立一个名称为"WebBarDemo"文件夹,
 里面存放是此项目的项目文件,项目中的其他文件存放的位置是计算机
 Internet信息服务的默认的Web站点所在的目录中新建的一个名称为
 "WebBarDemo"的文件夹中。具体如图02所示:

 图02:新建一个ASP.NET项目对话框

  6. 把Visual Studio .Net的当前窗口切换到WebForm的代码编辑窗口,即:WebForm1.aspx.cs文件的编辑窗口。

  7. 在WebForm1.aspx.cs文件首部,用下列代码替换WebForm1.aspx.cs中导入命名空间的代码
1 //下面程序中使用的ImageFormat类所在的命名空间
2 using System.Drawing.Imaging;
3 //下面程序中使用到关于数据库方面的类所在的命名空间
4 using System.Data.OleDb; 
8. WebForm1.aspx.cs文件中的Page_Load事件处理代码中添加下列代码,
 下列代码的作用是打开数据库,读取数据,并以此数据形成数据Bar图:

 1private void Page_Load(object sender, System.EventArgs e)
 2        {
 3            // 在此处放置用户代码以初始化页面
 4
 5            string sRouter = "c://db2.mdb" ;
 6            //获得当前Access数据库在服务器端的绝对路径
 7
 8            string strCon = " Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + sRouter ;
 9            //创建一个数据库连接
10
11            OleDbConnection myConn = new OleDbConnection ( strCon ) ;
12            string strCom = " SELECT YF ,SL FROM MonthSale ORDER BY YF" ;
13            myConn.Open ( ) ;
14            OleDbCommand myCommand = new OleDbCommand ( strCom , myConn ) ;
15            OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader ( ) ;
16            //创建OleDbDataReader实例,并以此实例来获取数据库中各条记录数据
17
18            int [ ] iXiaoSH = new int [ 12 ] ;
19            //定义一个数组,用以存放从数据库中读取的销售数据
20
21            string [ ] sMoth = new string [ 12 ] ;
22            //定义一个数组,用以存放从数据库中读取的销售月份
23
24            int iIndex = 0 ;
25            while ( myOleDbDataReader.Read ( ) )
26            {
27                iXiaoSH [ iIndex ] = myOleDbDataReader.GetInt32 ( 1 ) ;
28                sMoth [ iIndex ] = myOleDbDataReader.GetInt32 ( 0 ) . ToString ( ) + "月" ;
29                iIndex++ ;
30            }
31            //读取Table01数据表中的各条数据,并存放在先前定义的二个数组中
32
33            myConn . Close ( ) ;
34            myOleDbDataReader . Close ( ) ;
35            //关闭各种资源
36
37            Bitmap bm = new Bitmap ( 600 , 250 ) ;
38            //创建一个长度为600,宽带为250的Bitmap实例
39
40            Graphics g ;
41            g = Graphics.FromImage ( bm ) ;
42            //由此Bitmap实例创建Graphic实例
43
44            g . Clear ( Color.Snow) ;
45            //用Snow色彩为背景色填充此绘画图面
46
47            g . DrawString ( " ××公司××××年度销售情况统计表" ,
   new Font ( "黑体" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ;
48            //在绘画图面的指定位置,以指定的字体、指定的颜色绘制指定的字符串。即为图表标题
49
50            //以下代码是是实现图右上部
51            Point myRec = new Point ( 535 , 30 ) ;
52            Point myDec = new Point ( 560 , 26 ) ;
53
54            //以上是在图01中为下面绘制定位
55            g . DrawString ( "单位:万套" , new Font ( "宋体" , 9 ) , Brushes . Black , new Point ( 525 , 12 ) ) ;
56  
57  
58            for ( int i = 0 ; i < sMoth.Length ; i++ )
59            {
60                g . DrawRectangle ( Pens.Black , myRec . X , myRec . Y , 20 , 10 ) ;
61                //绘制小方块
62
63                g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , myRec.X , myRec.Y , 20 , 10 ) ;
64                //填充小方块
65
66                g . DrawString ( sMoth [ i ] . ToString ( ) , new Font ( "宋体" , 9 ) , Brushes . Black , myDec ) ;
67                //绘制小方块右边的文字
68
69                myRec . Y += 15 ;
70                myDec . Y += 15 ;
71            }
72
73            //以下代码是绘制Bar图,及其销售数量
74            int iBarWidth = 40 ;
75            int scale = 10 ;
76            for ( int i = 0 ; i < iXiaoSH . Length ; i++ )
77            {
78                g . DrawRectangle ( Pens.Black, ( i * iBarWidth ) + 15 , 250 - ( iXiaoSH [ i ] * scale ) ,
   20 , ( iXiaoSH [ i ] * scale ) + 5 ) ;
79                //绘制Bar图
80
81                g . FillRectangle ( new SolidBrush (GetColor ( i )) , ( i * iBarWidth ) + 15 ,
  250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ;
82                //以指定的色彩填充Bar图
83
84                g . DrawString ( iXiaoSH [ i ] . ToString ( ) , new Font ( "宋体" , 9 ) ,
   Brushes . Black , ( i * iBarWidth ) + 20 , 235 - ( iXiaoSH [ i ] * scale ) ) ;
85                //显示Bar图代表的数据
86            }
87
88            //以下代码是绘制边框,并形成Jpeg文件,供浏览器显示出来
89            Pen p = new Pen ( Color.Black , 2 ) ;
90            g . DrawRectangle ( p , 1 , 1 , 598 , 248 ) ;
91            bm.Save ( Response . OutputStream , ImageFormat.Gif) ;
92        }
9.      WebForm1.aspx.cs文件中的InitializeComponent过程之后,添加下列代码,
  下列代码的作用是定义一个名称为GetColor函数,此函数的功能根据索引号得到相应的系统颜色:
 1   /**//// <summary>
 2        /// 获取颜色
 3        /// </summary>
 4        /// <param name="itemIndex">数组的索引</param>
 5        /// <returns></returns>
 6        private Color GetColor ( int itemIndex )
 7        {
 8             Color MyColor ;
 9             int i = itemIndex ;
10            switch (i)
11             {
12                  case 0 :
13                   MyColor = Color.Green;
14                   return MyColor;
15                  case 1 :
16                   MyColor = Color.Red;
17                    return MyColor;
18                  case 2:
19                   MyColor = Color.Yellow;
20                   return MyColor;
21                  case 3 :
22                   MyColor = Color.Blue;
23                   return MyColor;
24                  case 4 :
25                   MyColor = Color.Orange;
26                   return MyColor;
27                 case 5 :
28                   MyColor = Color.Aqua;
29                   return MyColor;
30                  case 6:
31                   MyColor = Color.SkyBlue;
32                   return MyColor;
33                  case 7:
34                   MyColor = Color.DeepPink;
35                   return MyColor;
36                  case 8:
37                   MyColor = Color.Azure;
38                   return MyColor;
39                  case 9:
40                   MyColor = Color.Brown;
41                   return MyColor;
42                  case 10:
43                   MyColor = Color.Pink;
44                   return MyColor;
45                  case 11:
46                   MyColor = Color.BurlyWood;
47                   return MyColor;
48                  case 12:
49                   MyColor = Color.Chartreuse;
50                   return MyColor;
51                  default:
52                   MyColor = Color.Pink;
53                   return MyColor;
54            }
55        }
10. 至此,在上述步骤都正确执行后,
在ASP.NET页面中实现数据Bar图的全部工作就完成了。
在确定上面建立的Access数据库"db.mdb"位于C盘的根目录中之后
,单击快捷键F5,就可以得到如图01所示的数据Bar图了。

  五.总结:

  在ASP.NET页面中实现各种图表,其所使用的就是ASP.NET的绘图功能,
而这一功能是ASP.NET的前一个版本所不具备的。上面的这些介绍,
不仅介绍了在ASP.NET绘制各种图片的方法,
还介绍了数据库连接和从数据库中逐条读取记录的方法。
这些方法对您了解和掌握在ASP.NET中操作数据库是非常有用的。

完整的例子程序:
  1using System;
  2using System.Collections;
  3using System.ComponentModel;
  4using System.Data;
  5using System.Drawing;
  6using System.Web;
  7using System.Web.SessionState;
  8using System.Web.UI;
  9using System.Web.UI.WebControls;
 10using System.Web.UI.HtmlControls;
 11
 12//下面程序中使用的ImageFormat类所在的命名空间
 13using System.Drawing.Imaging;
 14//下面程序中使用到关于数据库方面的类所在的命名空间
 15using System.Data.OleDb;
 16
 17namespace WebBarDemo
 18{
 19    /**//// <summary>
 20    /// WebForm1 的摘要说明。
 21    /// </summary>
 22    public class WebForm1 : System.Web.UI.Page
 23    {
 24        private void Page_Load(object sender, System.EventArgs e)
 25        {
 26            // 在此处放置用户代码以初始化页面
 27
 28            string sRouter = "c://db2.mdb" ;
 29            //获得当前Access数据库在服务器端的绝对路径
 30
 31            string strCon = " Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + sRouter ;
 32            //创建一个数据库连接
 33
 34            OleDbConnection myConn = new OleDbConnection ( strCon ) ;
 35            string strCom = " SELECT YF ,SL FROM MonthSale ORDER BY YF" ;
 36            myConn.Open ( ) ;
 37            OleDbCommand myCommand = new OleDbCommand ( strCom , myConn ) ;
 38            OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader ( ) ;
 39            //创建OleDbDataReader实例,并以此实例来获取数据库中各条记录数据
 40
 41            int [ ] iXiaoSH = new int [ 12 ] ;
 42            //定义一个数组,用以存放从数据库中读取的销售数据
 43
 44            string [ ] sMoth = new string [ 12 ] ;
 45            //定义一个数组,用以存放从数据库中读取的销售月份
 46
 47            int iIndex = 0 ;
 48            while ( myOleDbDataReader.Read ( ) )
 49            {
 50                iXiaoSH [ iIndex ] = myOleDbDataReader.GetInt32 ( 1 ) ;
 51                sMoth [ iIndex ] = myOleDbDataReader.GetInt32 ( 0 ) . ToString ( ) + "月" ;
 52                iIndex++ ;
 53            }
 54            //读取Table01数据表中的各条数据,并存放在先前定义的二个数组中
 55
 56            myConn . Close ( ) ;
 57            myOleDbDataReader . Close ( ) ;
 58            //关闭各种资源
 59
 60            Bitmap bm = new Bitmap ( 600 , 250 ) ;
 61            //创建一个长度为600,宽带为250的Bitmap实例
 62
 63            Graphics g ;
 64            g = Graphics.FromImage ( bm ) ;
 65            //由此Bitmap实例创建Graphic实例
 66
 67            g . Clear ( Color.Snow) ;
 68            //用Snow色彩为背景色填充此绘画图面
 69
 70            g . DrawString ( " ××公司××××年度销售情况统计表" ,
  new Font ( "黑体" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ;
 71            //在绘画图面的指定位置,
  以指定的字体、指定的颜色绘制指定的字符串。即为图表标题
 72
 73            //以下代码是是实现图右上部
 74            Point myRec = new Point ( 535 , 30 ) ;
 75            Point myDec = new Point ( 560 , 26 ) ;
 76
 77            //以上是在图01中为下面绘制定位
 78            g . DrawString ( "单位:万套" , new Font ( "宋体" , 9 ) , Brushes . Black , new Point ( 525 , 12 ) ) ;
 79  
 80  
 81            for ( int i = 0 ; i < sMoth.Length ; i++ )
 82            {
 83                g . DrawRectangle ( Pens.Black , myRec . X , myRec . Y , 20 , 10 ) ;
 84                //绘制小方块
 85
 86                g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , myRec.X , myRec.Y , 20 , 10 ) ;
 87                //填充小方块
 88
 89                g . DrawString ( sMoth [ i ] . ToString ( ) , new Font ( "宋体" , 9 ) , Brushes . Black , myDec ) ;
 90                //绘制小方块右边的文字
 91
 92                myRec . Y += 15 ;
 93                myDec . Y += 15 ;
 94            }
 95
 96            //以下代码是绘制Bar图,及其销售数量
 97            int iBarWidth = 40 ;
 98            int scale = 10 ;
 99            for ( int i = 0 ; i < iXiaoSH . Length ; i++ )
100            {
101                g . DrawRectangle ( Pens.Black, ( i * iBarWidth ) + 15 ,
250    - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ;
102                //绘制Bar图
103
104                g . FillRectangle ( new SolidBrush (GetColor ( i )) ,
  ( i * iBarWidth ) + 15 , 250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ;
105                //以指定的色彩填充Bar图
106
107                g . DrawString ( iXiaoSH [ i ] . ToString ( ) ,
  new Font ( "宋体" , 9 ) , Brushes . Black , ( i * iBarWidth ) + 20 ,
 235   - ( iXiaoSH [ i ] * scale ) ) ;
108                //显示Bar图代表的数据
109            }
110
111            //以下代码是绘制边框,并形成Jpeg文件,
  供浏览器显示出来
112            Pen p = new Pen ( Color.Black , 2 ) ;
113            g . DrawRectangle ( p , 1 , 1 , 598 , 248 ) ;
114            bm.Save ( Response . OutputStream , ImageFormat.Gif) ;
115        }
116
117        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
118        override protected void OnInit(EventArgs e)
119        {
120            //
121            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
122            //
123            InitializeComponent();
124            base.OnInit(e);
125        }
126       
127        /**//// <summary>
128        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
129        /// 此方法的内容。
130        /// </summary>
131        private void InitializeComponent()
132        {   
133            this.Load += new System.EventHandler(this.Page_Load);
134        }
135        #endregion
136       
137        /**//// <summary>
138        /// 获取颜色
139        /// </summary>
140        /// <param name="itemIndex">数组的索引</param>
141        /// <returns></returns>
142        private Color GetColor ( int itemIndex )
143        {
144             Color MyColor ;
145             int i = itemIndex ;
146            switch (i)
147             {
148                  case 0 :
149                   MyColor = Color.Green;
150                   return MyColor;
151                  case 1 :
152                   MyColor = Color.Red;
153                    return MyColor;
154                  case 2:
155                   MyColor = Color.Yellow;
156                   return MyColor;
157                  case 3 :
158                   MyColor = Color.Blue;
159                   return MyColor;
160                  case 4 :
161                   MyColor = Color.Orange;
162                   return MyColor;
163                 case 5 :
164                   MyColor = Color.Aqua;
165                   return MyColor;
166                  case 6:
167                   MyColor = Color.SkyBlue;
168                   return MyColor;
169                  case 7:
170                   MyColor = Color.DeepPink;
171                   return MyColor;
172                  case 8:
173                   MyColor = Color.Azure;
174                   return MyColor;
175                  case 9:
176                   MyColor = Color.Brown;
177                   return MyColor;
178                  case 10:
179                   MyColor = Color.Pink;
180                   return MyColor;
181                  case 11:
182                   MyColor = Color.BurlyWood;
183                   return MyColor;
184                  case 12:
185                   MyColor = Color.Chartreuse;
186                   return MyColor;
187                  default:
188                   MyColor = Color.Pink;
189                   return MyColor;
190            }
191        }
192
193    }
194}
195

原创粉丝点击