【asp源码栏目提醒】:文章导读:在新的一年中,各位网友都进入紧张的学习或是工作阶段。
网学会员整理了asp源码-web统计图表 asp net c 转 - 技术总结的相关内容供大家参考,祝大家在新的一年里工作和学习顺利!
web统计图表
asp net c 转 web统计图表
asp.netc转 在Web程序开发中图形和图表是很好的数据表现形式。
往往是表格中的大量数据让用户产生无法处理无从获取所需要的信息。
而以图表方式提供数据的话就可以达到简单清爽简单易懂并且一目了然的效果。
利用图表管理人员可以方便的掌握销售与生产数据从而做出相应的判断。
在
ASP.NET Web程序中生成图表有以下的选择●
ASP.NET内建的图形库GDI位于System.Drawing命名空间使用简单的图形GDI能够创建饼图、柱状图、线性图。
但是这种方法过于底层不适于创建复杂的图形。
●各种
ASP.NET图表控件网上有一些
ASP.NET的图表控件但许多控件非常昂贵而且与最常用的图表应用Excel差别很大。
●Office Web Components Microsoft Office Web Components包含在Microsoft Office 2000中。
它们是用于向Web页添加电子表格、图表和数据处理功能的ActiveX控件的集合。
可以直接在浏览器中处理数据并以图表的形式显示数据。
由于其基于Office的强大功能以及与Office相同的用户界面无疑是
ASP.NET中图表生成的明智选择。
本章主要包括以下几个方面内容●基于GDI的图表生成。
●基于Office Web Components的图表生成。
●基于Office Web Components的报表生成。
经过本章的学习将掌握
ASP.NET中统计图表的实现利用图表将网站的数据完美呈现给用户。
方案设计本节分别介绍GDI与Office Web Components的具体使用为后面的章节打下基础。
使用GDIGDI是GDIWindows XP之前版本提供的图形设备接口的后续版本。
GDI是一种应用程序编程接口API负责在屏幕和打印机上显示信息。
在
ASP.NET中利用GDI可以创建简单的柱状图和饼图。
ASP.NET页面GDI图像使用在完整的生成柱状图和饼图之前先从简单的
ASP.NET页面图像使用开始。
在System.Draw命名空间中包含了创建、编辑图像的所有类。
创建图像时主要使用Bitmap类和Graphics类。
为了便于理解可以把Bitmap类想象成画板Graphics类想象成画笔。
Bitmap类主要用于创建画板以及在完成后图像的保存。
Graphics类主要用来绘制图像、图形和线条。
首先使用下面的代码创建画板。
本小节所有代码需要添加System.Drawing命名空间与System.Drawing.Image命名空间Bitmap myPalettenew Bitmap600400//创建600400的画板有了画板还需要创建Graphics类的实例来创建画笔指定画板。
代码如下Graphics myGraphicsGraphics.FromImagemyPalette有了画笔和画板只要使用Graphics类中的各种方法在画板上绘制图像、图形和线条就可以了。
Graphics类中的方法分为两类绘制方法与填充方法。
例如DrawRectangle方法与FillRectangle方法。
绘制方法仅仅绘制出图形的轮廓而填充方法绘制出图形的轮廓同时填充图形的内部。
下面的代码绘制了简单的图形int width150height50//创建黑色背景椭圆myGraphics.FillEllipsenew SolidBrushColor.Black300150widthheight//创建蓝色背景椭圆myGraphics.FillEllipsenew SolidBrushColor.LightBlue300150width-10height-10//创建输出文本string textOutquotASP.NETquot//指定字体Font fontOutnew FontquotTimes New Romanquot16FontStyle.BoldFontStyle.Italic//指定文本居中StringFormat stringFormatnew StringFormatstringFormat.AlignmentStringAlignment.CenterstringFormat.LineAlignmentStringAlignment.Center//绘制文本myGraphics.DrawStringtextOutfontOutnew SolidBrushColor.Blacknew Rectangle00widthheightstringFormat图已经画好了只剩下将图保存下来。
要将保存的图在网页中显示可以在下面两种方式中任选其一●将图像保存在服务器的文件系统中使用HTML的img标记来显示。
●直接将图像的二进制流输出到Response对象的输出流。
两种方式各有千秋。
第一种方式适合于创建不需要变动的图片例如网站广告图片能够创建一次满足今后的所有要求。
但会在服务器端保留下临时文件。
第二种方式适用于动态的创建图片供页面显示不能满足今后的需要却也不会留下临时文件。
下面分别写出这两种方式的代码●保存文件方式代码保存文件方式首先需要在Aspx文件中添加Img标记--指定显示文件为tmpFile.jpg--img srcquottmpFile.jpgquot然后在代码中保存文件即可//将文件保存为当前页面所在目录下的tmpFile.jpg myPalette.SaveServer.MapPathquotquotquottmpFile.jpgquotImageFormat.Jpeg●直接输出方式代码//直接将图片以二进制流的方式输出到Response对象的输出流。
myPalette.SaveResponse.OutputStreamImageFormat.Jpeg将代码加入页面的PageLoad事件中即可得到如图18-1效果。
图18-1 GDI图像使用效果创建柱状图在知道了如何使用GDI创建简单图像并显示到页面后创建复杂一些的柱状图就非常自然了。
使用简单的FillRectangleDrawRectangleDrawString方法即可实现基本的柱状图。
代码如下//初始化Bitmap类实例与Graphics类实例准备画图const int width600height400Bitmap myPalettenew BitmapwidthheightGraphics myGraphicsGraphics.FromImagemyPalette//绘制白色背景myGraphics.FillRectanglenew SolidBrushColor.White00widthheight//设定显示数据string DataNamequotJanquotquotFebquotquotMarquotquotAprquotquotMayquotquotJunquotint Data10020506024020//设定显示颜色Color myColorsColor.BlueColor.RedColor.YellowColor.PurpleColor.OrangeColor.Brown//绘制柱图forint i0i DataName.Lengthi//填充柱图myGraphics.FillRectanglenew SolidBrushmyColorsii4030300-Datai20Datai5//绘制柱图边界myGraphics.DrawRectanglenew PenColor.Blacki4030300-Datai20Datai5//绘制柱图上方数据myGraphics.DrawStringDatai.ToStringnew Fontquot宋体quot9Brushes.Blacknew PointFi4030300-Datai-20//绘制柱图下标myGraphics.DrawStringDataNameinew Fontquot宋体quot9Brushes.Blacknew PointFi4030320//输出图像myPalette.SaveResponse.OutputStreamImageFormat.Jpeg//清除所用绘图对象myGraphics.DisposemyPalette.Dispose将上述代码写入页面CodeBehind文件的PageLoad事件中即可看到如图18-2效果 图18-2 GDI柱状图效果使用Office Web Components Office Web Components是用于向Web页添加电子表格、图表和数据处理功能的ActiveX控件的集合。
利用Office Web Components可以方便的来绘制简单的柱状图与饼图。
不必像在GDI中需要考虑画图的细节。
使用Office Web Components要求使用Office Web Components需要系统中装有Office2000以上版本。
在工程的引用中添加Office Web Components即可。
具体步骤如下在解决方案资源管理器的引用文件夹上单击鼠标右键选择添加引用在出现的添加引用对话框中选择COM标签选择Microsoft Office Web Components双击选中点击确定即可。
图18-3、18-4显示了该过程。
图18-3添加引用图18-4添加Office Web Components引用使用Office Web Components绘制柱状图使用Office Web Components绘制图表不同于直接使用GDI主要的工作从绘图的细节转移到对于图表的设置。
步骤如下●Step1创建ChartSpace对象来放置图表ChartSpace是用来放置图表的类图表完成后用它来输出。
OWC.ChartSpace objCSpacenew OWC.ChartSpaceClass●Step2使用ChartSpace对象的Add方法创建图表ChartSpace的Add方法创建图表参数表示所创建图表的索引。
OWC.WCChart objChartobjCSpace.Charts.Add0●Step3指定图表的类型通过设定Chart类对象的Type属性来指定图表的类型。
objChart.TypeOWC.ChartChartTypeEnum.chChartTypeColumnClustered本例创建柱状图选择了chChartTypeColunmClustered类型。
其他的类型包括chChartTypeArea面积图、chChartTypeBarClustered条形图、chChartTypePie饼图、chChartType RadarLine雷达线图、chChartTypeSmoothLine平滑曲线图、chChartTypeDoughnut环形图等等。
图18-5至18-10显示了部分图表的简单实例。
图18-5曲线图图18-6条形图图18-7面积图 图18-8环形图图18-9饼图图18-10雷达图●Step4设定图示说明图示说明主要包括图例用颜色表示数据类型、图题图表的标题、XY轴的数据说明一般用来说明各轴上的数据单位。
设定代码如下//指定图表是否需要图例objChart.HasLegendtrue //给定标题objChart.HasTitletrueobjChart.Title.Captionquot上半年月收入图quot //给定xy轴的图示说明objChart.Axes0.HasTitletrueobjChart.Axes0.Title.Captionquot万元quotobjChart.Axes1.HasTitletrueobjChart.Axes1.Title.Captionquot月份quot●Step5添加数据添加数据主要设定Chart类对象的SeriesCollection属性。
首先使用SeriesCollection的Add方法创建一组数据。
然后使用SetData方法具体添加数据。
代码如下注意数据的格式是以t间隔的字符串//添加一组图表数据objChart.SeriesCollection.Add0//给定该组数据的名字objChart.SeriesCollection0.SetDataOWC.ChartDimensionsEnum.chDimSeriesNamesintOWC.ChartSpecialDataSourcesEnum.chDataLiteralquot上半年收入quot//给定数据分类objChart.SeriesCollection0.SetDataOWC.ChartDimensionsEnum.chDimCategoriesintOWC.ChartSpecialDataSourcesEnum.chDataLiteralquotJanquottquotFebquottquotMarquottquotAprquottquotMayquottquotJunquott//给定数据值objChart.SeriesCollection0.SetDataOWC.ChartDimensionsEnum.chDimValuesintOWC.ChartSpecialDataSourcesEnum.chDataLiteralquot100quottquot20quottquot50quottquot60quottquot240quottquot20quott●Step6显示数据显示数据是使用Chart类对象的ExportPicture方法将生成的图表创建为图片然后显示的。
代码如下//输出成GIF文件参数为文件名、格式、图片大小objCSpace.ExportPictureServer.MapPathquotquotquottmpFile.gifquotquotGIFquot400300//从生成的图片创建Bitmap对象输出到Response输出流Bitmap myPalettenew BitmapServer.MapPathquotquotquottmpFile.gifquottruemyPalette.SaveResponse.OutputStreamSystem.Drawing.Imaging.ImageFormat.Gif经过了以上的步骤将代码输入页面的PageLoad事件代码段中运行程序就可以得到如图18-11效果。
图18-11 Office Web Components柱状图示例使用Office Web Components绘制饼图绘制饼图与绘制柱状图的区别不是很大需要注意的是饼图没有XY轴所以不能设置XY轴的图示说明。
在绘制柱状图的代码上去掉关于XY轴图示说明的代码即可。
完整代码如下//初始化图表数据string DataNamequotJanquotquotFebquotquotMarquotquotAprquotquotMayquotquotJunquotint Data10020506024020//声明存储数据分类和数据值的字符串string strDataNamequotquotstring strDataquotquot//循环按格式生成存储数据分类与数据值的字符串forint i0i Data.LengthistrCategoryDataNameitstrValueDatai.ToStringt//创建ChartSpace对象来放置图表OWC.ChartSpace objCSpacenew OWC.ChartSpaceClass //在ChartSpace对象中添加图表Add方法返回chart对象OWC.WCChart objChartobjCSpace.Charts.Add0 //指定图表的类型为饼图objChart.TypeOWC.ChartChartTypeEnum.chChartTypePie//指定图表是否需要图例objChart.HasLegendtrue//给定标题objChart.HasTitletrueobjChart.Title.Captionquot上半年月收入图quot //添加一个series objChart.SeriesCollection.Add0 //给定数据分类objChart.SeriesCollection0.SetDataOWC.ChartDimensionsEnum.chDimCategoriesintOWC.ChartSpecialDataSourcesEnum.chDataLiteralstrDataName //给定数据值objChart.SeriesCollection0.SetDataOWC.ChartDimensionsEnum.chDimValuesintOWC.ChartSpecialDataSourcesEnum.chDataLiteralstrData//输出成GIF文件.objCSpace.ExportPictureServer.MapPathquotquotquottmpFile.gifquotquotGIFquot400300Bitmap myPalettenew BitmapServer.MapPathquotquotquottmpFile.gifquottruemyPalette.SaveResponse.OutputStreamSystem.Drawing.Imaging.ImageFormat.Gif将上述代码写入页面文件的PageLoad事件处理代码中运行得到如图18-12效果。
图18-12 Office Web Components饼图示例公司盈利状况统计前面介绍了Office Web Components的情况本节将通过公司盈利状况统计来介绍Office Web Components柱状图在具体实例中的使用。
数据库设计为了实现公司盈利状况统计。
首先需要设计相关的数据库表。
在实际情况中公司的盈利就是收入的总和与支出的总和之差。
而每笔收入与支出都是在一次交易中完成的。
基于以上考虑同时为了实现简单。
设计数据库表单如下表名T_Deal别名交易表表项说明类型是否可空DealTime交易时间DateTime否DealIncome交易金额int否DealContent交易内容Varchar50否DealObject交易对象Varchar20是Comment备注Varchar50是注意为了简单起见用交易金额统一表示收入与支出。
用正数的交易金额表示收入负数的交易金额表示支出。
这样计算盈利时只需将交易金额求和即可。
按照上表的格式在SqlServer中创建表。
添加样例数据供程序使用。
然后创建下面的存储过程来实现公司盈利状况的统计。
Create PROCEDURE sp_SelectIncomeyear int AS Select sumDealCountDatepartmmDealTimeFrom T_Deal where DATEPARTyyDealTimeyear Group By DatepartmmDealTimeGO该存储过程选择交易时间的年份与输入参数year相等的数据并将选择得到的数据按交易时间的月份分组。
返回每组交易金额的总和以及该组的交易月份。
界面设计新建Web工程WebChart。
将WebForm1.aspx改名为OWCChart.aspx。
同时将其代码文件中的类名改为OWCChart。
界面如图18-13所示 图18-13公司盈利统计界面该界面主要包括两部分一个PlaceHolder控件用来放置生成的图表构成显示图表部分。
一个用来选择统计年份的DropDownList控件一个用来确定生成图表的Button控件一个用来显示错误信息的Label控件构成了图表的生成部分。
同样为了界面整洁使用Table将所用控件放在表格中。
按照图18-13安排好界面后就可以为控件设置属性了主要包括以下几个方面的设置●PlaceHolder控件的设置PlaceHolder控件在本程序中用于放置生成的图表只需设置其Id属性为ChartPlaceHolder即可。
●DropDownList控件的设置DropDownList控件在本程序中用于选择统计年份设置其Id属性为ddlYear。
并为其添加ListItem 2000200120022003。
aspListItem Valuequot2000quot2000/aspListItem aspListItem Valuequot2001quot2001/aspListItem aspListItem Valuequot2002quot2002/aspListItem aspListItem Valuequot2003quot2003/aspListItem●Button控件的设置Button控件设置Id属性为btnSumbitText属性为quot确定quot即可。
●Label控件的设置Label控件设置Id属性为Info即可。
代码实现在完成了上面的界面设计后就要进入后台代码的编写了。
下面就将分模块介绍各部分功能的代码实现。
数据读入为了显示公司盈利状况统计首先需要将统计的结果从数据库中读入。
读入数据的代码包括以下两部分。
●创建数据库联接为了方便程序的配置将数据库联接字段保存在Web.Config文件中。
如此一来在需要修改数据库联接字段时只需要修改Web.Config文件即可不需要修改程序代码重新编译。
在Web.Config文件中的configuration字段中加入如下代码appSettings add keyquotConnectStrquotvaluequotserverlocalhostuidyouridpwdyourpasdatabaseInfoquot//appSettings其中localhost要改为自己的数据库服务器名uidpwd分别为数据库用户id和密码database为数据库名。
设置好联接字段后就可在代码中对其进行引用了。
主要使用AppSettingReader对象的GetValue方法获取quotConnectStrquot字段信息该方法需要两个参数第一个指定要引用的字段第二个参数指定需要的类型。
返回一个Object类型的变量。
需要使用Convert的ToString方法将其转换为字符串类型引用代码如下//全局数据库联接System.Data.SqlClient.SqlConnection MyConnectionprivate void Page_Loadobject senderSystem.EventArgs e//在此处放置用户代码以初始化页面ifPage.IsPostBackfalse//页面首次加载时 //创建Web.Config文件应用程序设置字段读取对象System.Configuration.AppSettingsReader ConnectionStringnew System.Configuration.AppSettingsReader//创建数据库联接MyConnectionnew System.Data.SqlClient.SqlConnection//设置数据库联接的连接字段MyConnection.ConnectionStringConvert.ToStringConnectionString.GetValuequotConnectStrquotSystem.Type.GetTypequotSystem.Stringquot●利用数据库联接读取数据有了前面创建的数据库联接就可以从数据库中读取数据了。
读取数据代码如下//读取数据函数参数为需要统计的年份返回DataSet DataSet ReadDatastring Year//创建DataSet DataSet dsIncomenew DataSet//设置存储过程名string SpNamequotsp_SelectIncomequot//创建Sql命令SqlCommand IncomeCmdnew SqlCommandSpNameMyConnection//设定数据库命令类型为存储过程IncomeCmd.CommandTypeCommandType.StoredProcedure//打开数据库联接MyConnection.Open//创建并设定存储过程参数SqlParameter IncomeYearnew SqlParameterquotyearquotSqlDbType.Int4IncomeYear.ValueConvert.ToInt16Year//为Sql命令添加参数IncomeCmd.Parameters.AddIncomeYear//创建Sql数据桥接器SqlDataAdapter adapternew SqlDataAdapterSpNameMyConnection//指定桥接器Sql命令adapter.SelectCommandIncomeCmd//填充DataSet adapter.FilldsIncomequotIncomequot//关闭数据库联接MyConnection.Close数据显示使用ReadData方法读出数据接下来就是显示数据了。
显示数据同样需要两个步骤。
●处理数据库读出的数据由于从数据库读出的数据不能完全满足显示的要求有可能某个月份没有交易那么返回的DataSet中就不会包含该月的数据。
但显示时需要所有月份的数据。
所以直接显示数据之前先要对数据进行加工。
代码如下//创建存储数据的数组MyMonthIncome存放每月数据MyMonthName存放月份缩写int MyMonthIncomenew int12string MyMonthNamequotJanquotquotFebquotquotMarquotquotAprquotquotMayquotquotJunquotquotJulquotquotAugquotquotSepquotquotOctquotquotNovquotquotDecquot //声明存放显示用字符串的变量strMonthName存放月份信息strMonthIncome存放数据string strMonthNamequotquotstring strMonthIncomequotquot//对存在数据的月份将数据保存在MyMonthName forint i0i dsIncome.TablesquotIncomequot.Rows.CountiMyMonthIncomeConvert.ToInt16dsIncome.TablesquotIncomequot.Rowsi1-1Convert.ToInt16dsIncome.TablesquotIncomequot.Rowsi0//用已有的数据来生成图表显示所需的字符串forint i0i 12istrMonthNameMyMonthNameitstrMonthIncomeMyMonthIncomei.ToStringt●使用Office Web Components显示数据经过上一步骤图表显示所需的字符串已经放入了strMonthName和strMonthIncome中下面使用18.2节中关于Office Web Components的知识就可以大功告成了。
需要注意的是在生成图片后使用了PlaceHolder的.Controls属性的Add方法将动态生成的img标签放入页面。
为了方便后面的使用将显示数据的代码写为函数。
代码如下private void MakeLineChartstring Year//使用ReadData函数读出数据DataSet dsIncomeReadDataYear//以下插入处理数据库读出的数据部分的代码不再重复//….上一步骤中处理数据库读出数据代码 //创建ChartSpace对象来放置图表OWC.ChartSpace mySpacenew OWC.ChartSpaceClass//在ChartSpace对象中添加图表Add方法返回chart对象OWC.WCChart myChartmySpace.Charts.Add0 //指定图表的类型为线性图myChart.TypeOWC.ChartChartTypeEnum.chChartTypeLine//指定图表是否需要图例myChart.HasLegendtrue//给定标题myChart.HasTitletruemyChart.Title.CaptionddlYear.SelectedItem.Textquot月收入图quot//给定xy轴的.