【asp源码栏目提醒】:本文主要为网学会员提供“ASP.NET典型模块与项目实战大全(第13章) - 网络与通信”,希望对需要ASP.NET典型模块与项目实战大全(第13章) - 网络与通信网友有所帮助,学习一下!
第 13 章 Web 图表模块 (Drawing 类OWC 组件) 图表是一种很好的将对象属性数据直观、形象地进行“可视化”的手段,也是 Web 页面中数据表现的一种形式。
图表通常分为柱状图、 在 饼图和折线图等多种类型。
Visual Studio 2010 中,可以使用 Office Web Components(简称 OWC)组件来创建各种各样的图 表。
本章将围绕使用 OWC 组件创建图表的实现方法进行讲解。
13.1 使用 OWC 组件生成图表 在 Microsoft Office 2003 中包含有一组称为 OWC 的新控件集合。
利用这些组件,可以 在 Web 浏览器及其他传统的编程环境下, 创建许多有用的数据分析解决方案和报表生成解 决方案。
本节将讲解使用 OWC 组件生成图表方面的相关知识。
13.1.1 OWC 介绍 OWC 是与 Microsoft Office 一起安装的一组 ActiveX 控件。
如果在计算机上安装了 Office Web 组件,则可以在 Internet Explorer 5.01 SP2 或更高版本中对电子表格、数据透视 表和图表进行交互访问。
如果在 Microsoft Access 的数据访问页中使用这些组件,则需要 安装 Internet Explorer 5.01 SP2 或更高版本。
如果计算机上未安装 Office Web 组件,可以从 Microsoft 公司的网站下载 Office Web 组件。
这样,用户无须在计算机上安装 Office 软件, 就可使用 OWC。
OWC 库中包含了 Spreadsheet(电子数据表)组件、Chart(图表)组件、PivotTable(数据透视表)组件和 Data Source(数据源)4 个组件。
Office Web Components 的非凡之 处在于它们可以在诸如 Web 页面、Visual Basic 表单等控件容器中使用,也可在内存中作 为不可见的对象使用。
大多数 COM 控件只能在控件容器中作为可视控件使用,而大多数 不可见对象则只能在内存中使用,而不能放入表单中或 Web 页面中。
13.1.2 使用 OWC 组件生成图表的设计思路 首先需要将 OWC 组件引用到网站工程中。
在使用 OWC 组件生成图片之前, 引用 OWC 组件之后,需要创建一个图表控件,然后在图表控件中添加一个图表对象,并且设置图表 对象的相关属性,获得图表块的数据信息,最后使用图表控件的方法生成一个保存有图表 第2篇
ASP.NET 典型模块开发与应用数据信息的图片,在 Web 网页中通过调用该图片显示生成的图表信息,具体实现的设计思路如图 13.1 所示。
图 13.1 生成 Web 图表的设计思路13.1.3 生成柱状图 在了解了 OWC 组件的相关知识之后,下面讲解如何使用 OWC 组件在 Web 网页中生成柱状 Web 图表,其具体实现的操作步骤如下所示。
(1)启动 Visual Studio 2010,新建一个网站,在网站中添加一个名称为 OWC 的 Web窗体。
(2)在网站的根目录下新建一个名称为 temp.jpg 的图片文件。
说明:可以将其他 JPG 格式的图片文件的名称修改为 temp,然后将该文件复制到网站 的根目录下。
(3)在 Web 窗体中添加一个具有 1 行 1 列的表格,然后在表格中添加一个图片控件,并将控件的 src 属性值设置为 temp.jpg。
添加到 Web 窗体中的表格及图片控件的 HTML 代码如下: lttable cellpaddingquot0quot cellspacingquot0quot classquotstyle1quotgt lttrgt lttd stylequottext-align: centerquotgt ltimg altquotquot srcquottemp.jpgquot stylequotwidth: 600px height: 450pxquot /gt lt/tdgt lt/trgt lt/tablegt 【代码解析】代码中,通过设置 src 属性的值实现在 Web 窗体中显示图片的功能。
(4)右击“解决方案资源管理器”中的网站根目录,在弹出的快捷菜单中选择“添加引用”命令,如图 13.2 所示。
(5)此时将弹出“添加引用”对话框,在该对话框中选择 COM 标签,进入 COM 选项卡,然后在其中选择 Microsoft Office Web Components 11.0 选项,如图 13.3 所示。
注意: OWC 组件的版本号也会不同。
根据所装的 Office 版本不同, 本例中使用的是 Office 2003 版本,所以选中的是 Microsoft Office Web Components 11.0 选项。
240 第 13 章 Web 图表模块(Drawing 类OWC 组件) 图 13.2 引用 OWC 组件 图 13.3 引用 OWC 组件对话框 (6)单击“确定”按钮,将 OWC 组件引用到网站工程中。
(7)在 Web 窗体的代码窗口中,添加如下引用 OWC 组件和数据对象的程序代码。
using System.Data.Sql using System.Data.SqlClient using OWC11 //引用 OWC 组件 (8)在 Web 窗体的 Load 事件下,添加生成柱状 Web 图表的程序代码,具体实现代码如下: protected void Page_Loadobject sender EventArgs e //创建图表控件 ChartSpace myspace new ChartSpace //添加一个图表对象 ChChart mychart myspace.Charts.Add0 //设置图表类型为柱形 mychart.Type ChartChartTypeEnum.chChartTypeColumnClustered //设置图表的相关属性 mychart.HasLegend true //添加图例 mychart.HasTitle true //添加主题 mychart.Title.Caption quot员工信息图表quot //设置主题内容 //设置 x,y 轴坐标 mychart.Axes0.HasTitle true mychart.Axes0.Title.Caption quot籍贯quot mychart.Axes1.HasTitle true mychart.Axes1.Title.Caption quot人数quot //连接并且打开数据库 SqlConnection sqlcon new SqlConnectionConfigurationManager.ConnectionStringsquotconnectionquot. ConnectionString sqlcon.Open string strsqls quotSELECT 籍贯 COUNT籍贯 AS 人数 FROM tb_ygxx GROUP BY 籍贯quot SqlDataAdapter adsa new SqlDataAdapterstrsqls sqlcon DataSet adds new DataSet adsa.Filladds if adds.Tables0.Rows.Count gt 0 //添加图表块 for int i 0 i lt adds.Tables0.Rows.Count i 241 第2篇
ASP.NET 典型模块开发与应用 mychart.SeriesCollection.Add0 //添加图表数据 for int j 0 j lt adds.Tables0.Rows.Count j //设置图表块属性 mychart.SeriesCollectionj.Caption adds.Tables0.Rowsj 0.ToString mychart.SeriesCollectionj.SetDataChartDimensionsEnum. chDimCategories intChartSpecialDataSourcesEnum. chDataLiteral adds.Tables0.Rowsj0.ToString mychart.SeriesCollectionj.SetDataChartDimensionsEnum. chDimValues intChartSpecialDataSourcesEnum.chDataLiteral Convert.ToInt32adds.Tables0.Rowsj1.ToString sqlcon.Close //生成图表 myspace.ExportPictureServer.MapPathquot.quot quottemp.jpgquot quotjpgquot 600 450 【代码解析】代码中的 ChartSpace 对象用于创建图表控件;ChChart 对象用于在创建的图表控件上创建柱状图表。
创建完图表之后,通过 for 循环语句向创建的图表对象中添加图表数据信息。
到此为止,生成柱状图表的操作就完成了。
运行程序之后,可以看到生成的柱状 Web图表,如图 13.4 所示。
图 13.4 生成的柱状 Web 图表13.1.4 生成饼状图 前面讲解了生成柱状图表的实现方法,本节再讲解一下如何使用 OWC 组件生成饼状图表。
在 Web 页面中生成饼状图表的设计思路和实现方法与生成柱状图表基本相同,下面就讲解具体实现的操作步骤。
(1)启动 Visual Studio 2010,新建一个网站,在网站中添加一个名称为 OWC 的 Web242 第 13 章 Web 图表模块(Drawing 类OWC 组件)窗体。
(2)在网站的根目录下新建一个名称为 temp.jpg 的图片文件。
(3)在 Web 窗体中添加一个具有 1 行 1 列的表格,然后在表格中添加一个图片控件,并将控件的 src 属性值设置为 temp.jpg。
说明:temp.jpg 文件是用于保存图表信息的图片文件,生成图片之后,在 Web 网页中通 过调用该图片在网页中显示图表数据。
(4)将 OWC 组件引用到网站工程中。
(5)在 Web 窗体的代码窗口中,添加前面讲过的引用 OWC 组件和数据对象的程序代码。
(6)在 Web 窗体的 Load 事件下,添加生成饼状 Web 图表的程序代码,具体实现代码如下: protected void Page_Loadobject sender EventArgs e //创建图表控件 ChartSpace myspace new ChartSpace //添加一个图表对象 ChChart mychart myspace.Charts.Add0 //设置图表类型为饼形 mychart.Type ChartChartTypeEnum.chChartTypePie //设置图表的相关属性 mychart.HasLegend true //添加图例 mychart.HasTitle true //添加主题 mychart.Title.Caption quot员工信息图表quot //设置主题内容 //连接并且打开数据库 SqlConnection sqlcon new SqlConnectionConfigurationManager.ConnectionStringsquotconnectionquot. ConnectionString sqlcon.Open //打开数据连接 string strsqls quotSELECT 籍贯 COUNT籍贯 AS 人数 FROM tb_ygxx GROUP BY 籍贯quot SqlDataAdapter adsa new SqlDataAdapterstrsqls sqlcon DataSet adds new DataSet //声明一个数据集对象 adsa.Filladds //执行加载数据信息的操作 if adds.Tables0.Rows.Count gt 0 string strDataName quotquot string strData quotquot //添加图表块 mychart.SeriesCollection.Add0 //添加图表数据 for int j 0 j lt adds.Tables0.Rows.Count j if j adds.Tables0.Rows.Count - 1 strDataName adds.Tables0.Rowsj0.ToString else strDataName adds.Tables0.Rowsj0.ToString quottquot strData adds.Tables0.Rowsj1.ToString quottquot 243 第2篇
ASP.NET 典型模块开发与应用 //设置图表块属性 mychart.SeriesCollection0.SetDataChartDimensionsEnum. chDimCategories intChartSpecialDataSourcesEnum.chDataLiteral strDataName mychart.SeriesCollection0.SetDataChartDimensionsEnum. chDimValues intChartSpecialDataSourcesEnum.chDataLiteral strData //设置百分比 ChDataLabels labels mychart.SeriesCollection0.DataLabels Collection.Add labels.HasPercentage true sqlcon.Close //关闭数据连接 //生成图表 myspace.ExportPictureServer.MapPathquot.quot quottemp.jpgquot quotjpgquot 600 450 【代码解析】代码中的 ChartSpace 对象用于创建图表控件;ChChart 对象用于在创建的图表控件上创建饼状图表。
创建完图表之后,通过 for 循环语句向创建的图表对象中添加图表数据信息。
说明:通过设置图表对象的 Type 属性值,设置图表的显示形式,如果将该属性值设置 为 ChartChartTypeEnum.chChartTypePie,则将生成饼状 Web 图表。
(7)运行程序之后,可以看到生成的饼状 Web 图表,如图 13.5 所示。
图 13.5 生成的饼状 Web 图表13.1.5 生成折线图 折线图表是 Web 图表中最常用的图表表示形式。
在讲解了生成柱状图和饼状图之后,下面接着讲解使用 OWC 组件生成折线图表的实现方法。
(1)启动 Visual Studio 2010,新建一个网站,在网站中添加一个名称为 OWC 的 Web244 第 13 章 Web 图表模块(Drawing 类OWC 组件)窗体。
(2)在网站的根目录下新建一个名称为 temp.jpg 的图片文件。
(3)在 Web 窗体中添加一个具有 1 行 1 列的表格,然后在表格中添加一个图片控件,并将控件的 src 属性值设置为 temp.jpg。
(4)将 OWC 组件引用到网站工程中。
(5)在 Web 窗体的 Load 事件下,添加生成折线 Web 图表的程序代码,具体的实现代码如下: protected void Page_Loadobject sender EventArgs e //连接并且打开数据库 SqlConnection sqlcon new SqlConnectionConfigurationManager.ConnectionStringsquotconnectionquot. ConnectionString sqlcon.Open string strsqls quotSELECT 籍贯 COUNT籍贯 AS 人数 FROM tb_ygxx GROUP BY 籍贯quot SqlDataAdapter adsa new SqlDataAdapterstrsqls sqlcon DataSet adds new DataSet //声明一个数据集对象 adsa.Filladds //执行加载数据信息的操作 //为 x 轴 y 轴指定特定字符串,以便显示数据 string strXdata String.Empty string strYdata String.Empty if adds.Tables0.Rows.Count gt 0 //生成折线 Web 图表 for int i 0 i lt adds.Tables0.Rows.Count i strXdata strXdata adds.Tables0.Rowsi0.ToString quottquot strYdata strYdata adds.Tables0.Rowsi1.ToString quottquot //创建 ChartSpace 对象来放置图表 ChartSpace laySpace new ChartSpaceClass //在 ChartSpace 对象中添加图表 ChChart InsertChart laySpace.Charts.Add0 //指定绘制图表的类型,类型可以通过 OWC.ChartChartTypeEnum 枚举值得到 InsertChart.Type ChartChartTypeEnum.chChartTypeLine //折线图 //指定图表是否需要图例标注 InsertChart.HasLegend false InsertChart.HasTitle true //为图表添加标题 InsertChart.Title.Caption quot员工信息图表quot //标题名称 //为 xy 轴添加图示说明 InsertChart.Axes0.HasTitle true InsertChart.Axes0.Title.Caption quot籍贯quot //x 轴说明 InsertChart.Axes1.HasTitle true InsertChart.Axes1.Title.Caption quot人数quot //y 轴说明 //添加一个 series 系列 InsertChart.SeriesCollection.Add0 ////给定 series 系列的名字 //InsertChart.SeriesCollection0.SetDataChartDimensionsEnum. chDimSeriesNames intChartSpecialDataSourcesEnum.chDataLiteral quot员工信息图表quot //给定分类 245 第2篇
ASP.NET 典型模块开发与应用 InsertChart.SeriesCollection0.SetDataChartDimensionsEnum. chDimCategories intChartSpecialDataSourcesEnum.chDataLiteral strXdata //给定值 InsertChart.SeriesCollection0.SetDataChartDimensionsEnum. chDimValues intChartSpecialDataSourcesEnum.chDataLiteral strYdata //输出文件 laySpace.ExportPictureServer.MapPathquot.quot quottemp.jpgquot quotjpgquot 600 450 【代码解析】代码中通过设置 InsertChart 对象的 Type 属性值设置图表的显示形式,如果将该属性值设置为 ChartChartTypeEnum.chChartTypeLine,则将生成折线 Web 图表。
(6)运行程序之后,可以看到生成的折线 Web 图表,如图 13.6 所示。
图 13.6 生成的折线 Web 图表 13.2 使用 OWC 组件生成 Excel 数据表 在实际应用中,可以将生成的图表导出至 Excel 数据表中进行保存。
本实例讲解使用OWC 组件将生成的 Web 图表,导出至 Excel 数据表中进行保存的实现方法,具体实现的操作步骤如下所示。
(1)在创建图表的网站工程中添加一个名称为 ChangeChart 的 Web 窗体。
(2)在 Web 窗体中不需要添加任何控件,直接进入 Web 窗体的代码窗口中。
(3)在代码窗口中首先添加如下引用 OWC 组件和数据对象的程序代码。
using System.Data.Sql using System.Data.SqlClient using Microsoft.Office.Interop.Owc11 (4)在 Web 窗体的 Load 事件下,添加生成 Excel 数据表的程序代码,具体的实现代246 第 13 章 Web 图表模块(Drawing 类OWC 组件)码如下: protected void Page_Loadobject sender EventArgs e //创建图表控件 ChartSpace myspace new ChartSpace //添加一个表容器 SpreadsheetClass myexcel new SpreadsheetClass Worksheet mysheet myexcel.ActiveSheet //添加表标题 mysheet.Cells1 1 quot籍贯quot mysheet.Cells1 2 quot人数quot //连接并且打开数据库 SqlConnection sqlcon new SqlConnectionConfigurationManager.ConnectionStringsquotconnectionquot. ConnectionString sqlcon.Open //打开数据连接 string strsqls quotSELECT 籍贯 COUNT籍贯 AS 人数 FROM tb_ygxx GROUP BY 籍贯quot SqlDataAdapter adsa new SqlDataAdapterstrsqls sqlcon DataSet adds new DataSet //声明一个数据连接 adsa.Filladds //执行加载数据信息的操作 if adds.Tables0.Rows.Count gt 0 for int j 0 j lt adds.Tables0.Rows.Count j mysheet.Cellsj 2 1 adds.Tables0.Rowsj0.ToString mysheet.Cellsj 2 2 adds.Tables0.Rowsj1.ToString //导出表格 myexcel.Exportquotd:test1.xlsquot SheetExportActionEnum.ssExport ActionOpenInExcel.