柱状图
来源:互联网 发布:神的记事本小说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
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- 柱状图
- VML-柱状图
- JFreeChart -- 柱状图
- DotNetCharting >> 柱状图
- php 柱状图
- 饼图、柱状图
- JS柱状图
- jsp 柱状图
- IOS 柱状图
- Login控件
- 域名基本知识
- 注册表存储数据
- 安全许可
- 故乡文引【汝城县】
- 柱状图
- j2ee JAX-RS 简化 REST 应用开发 WEB SERVICE 开发
- 11个Java第三方类库
- 标志寄存器-转
- 一些有用的转换
- svchost进程解惑
- 如何把一个Group的信息归总到一列上.
- 怎样做好年末总结
- vs2005中 解决方案资源管理器 PLATFORM文件夹下拉菜单消失的问题