在ASP.NET中使用Office Web Components (OWC)创建统计图

来源：互联网发布：宇佐美舞知乎编辑：程序博客网时间：2024/05/16 07:50

图形和图表是Web上数据表现的很好的形式，在ASP.NET，可以使用Office Web Components (OWC)来创建统计图。Office Web Component (OWC)是包含在Microsoft Office 2000中的一套组件，利用这些组件，我们可以很方便地在浏览器中或者传统的编程环境中进行数据分析和报表。比如：电子报表，图表，数据透视表等。

要在浏览器中显示图表，可以按下面的步骤进行：

从数据库中读取要生成图表的数据；
创建OWC图表；
添加必要的数据系列；
为个数据列赋数据；
定义外观；
创建GIF图形；
用IMG标记显示图形。

要生成图表的数据称为数据原，Chart Component组件支持的数据源有：实现IDataSource接口的任何数据源；ADO Recordset对象；XML文件；数组或者一定格式的文本字符串。在ASP中，我们可以用ADO Recordset对象；在.NET的ADO.NET中，由于ADO.NET没有实现IDataSource，.NET也没有提供ADO.NET DataSet对象向ADO Recordset对象的直接转换，如果你有一个 DataSet对象，你要么转换成XML文件，要么生成特殊格式的字符串才可以使用。下面就是本例子的结果：

下面是实现这种功能的VB.NET版本的ASP.NET例子与代码：

OWC.aspx:

&lt;%@ Page Language=&quot;vb&quot; AutoEventWireup=&quot;false&quot; Codebehind=&quot;OWC.aspx.vb&quot; Inherits=&quot;aspxWeb.OWC&quot;%&gt;&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot; &gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;title&gt;WebForm1&lt;/title&gt;&lt;meta name=&quot;GENERATOR&quot; Content=&quot;Microsoft Visual Studio 7.0&quot;&gt;&lt;meta name=&quot;CODE_LANGUAGE&quot; Content=&quot;C#&quot;&gt;&lt;meta name=&quot;vs_defaultClientScript&quot; content=&quot;JavaScript&quot;&gt;&lt;meta name=&quot;vs_targetSchema&quot; content=&quot;http://schemas.microsoft.com/intellisense/ie5&quot;&gt;&lt;/HEAD&gt;&lt;body MS_POSITIONING=&quot;GridLayout&quot;&gt;&lt;form id=&quot;Form1&quot; method=&quot;post&quot; runat=&quot;server&quot;&gt;&lt;asp:placeholder id=&quot;ChartHolder&quot; runat=&quot;server&quot;&gt;&lt;/asp:placeholder&gt;&lt;/form&gt;&lt;/body&gt;&lt;/HTML&gt;

OWC.aspx.vb：

Imports SystemImports OWCImports System.Web.UIPublic Class OWCInherits System.Web.UI.PageProtected WithEvents ChartHolder As System.Web.UI.WebControls.PlaceHolder#Region &quot; Web 窗体设计器生成的代码 &quot;'该调用是 Web 窗体设计器所必需的。&lt;System.Diagnostics.DebuggerStepThrough()&gt; Private Sub InitializeComponent()End SubPrivate Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init'CODEGEN: 此方法调用是 Web 窗体设计器所必需的'不要使用代码编辑器修改它。InitializeComponent()End Sub#End RegionPrivate Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load'在此处放置初始化页的用户代码'创建ChartSpace对象来放置图表Dim objCSpace As ChartSpace = New ChartSpaceClass()'在ChartSpace对象中添加图表，Add方法返回chart对象Dim objChart As WCChart = objCSpace.Charts.Add(0)'指定图表的类型。类型由OWC.ChartChartTypeEnum枚举值得到objChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered'指定图表是否需要图例objChart.HasLegend = True'给定标题objChart.HasTitle = TrueobjChart.Title.Caption = &quot;1-6说数据分布图&quot;'给定x,y轴的图示说明objChart.Axes(0).HasTitle = TrueobjChart.Axes(0).Title.Caption = &quot;Y 轴 : 数量&quot;objChart.Axes(1).HasTitle = TrueobjChart.Axes(1).Title.Caption = &quot;X 轴：月份&quot;'计算数据'*categories 和 values 可以用tab分割的字符串来表示*Dim strSeriesName As String = &quot;图例 1&quot;Dim strCategory As String = &quot;1&quot; + ControlChars.Tab + &quot;2&quot; + ControlChars.Tab _+ &quot;3&quot; + ControlChars.Tab + &quot;4&quot; + ControlChars.Tab + &quot;5&quot; + ControlChars.Tab _+ &quot;6&quot; + ControlChars.TabDim strValue As String = &quot;9&quot; + ControlChars.Tab + &quot;8&quot; + ControlChars.Tab _+ &quot;4&quot; + ControlChars.Tab + &quot;10&quot; + ControlChars.Tab + &quot;12&quot; + ControlChars.Tab _+ &quot;6&quot; + ControlChars.Tab'添加一个seriesobjChart.SeriesCollection.Add(0)'给定series的名字objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimSeriesNames,_ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName)'给定分类objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimCategories,_ChartSpecialDataSourcesEnum.chDataLiteral, strCategory)'给定值objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimValues,_ChartSpecialDataSourcesEnum.chDataLiteral, strValue)'输出成GIF文件.Dim strAbsolutePath As String = (Server.MapPath(&quot;.&quot;)) + &quot;/Images/test.gif&quot;objCSpace.ExportPicture(strAbsolutePath, &quot;GIF&quot;, 600, 350)'创建GIF文件的相对路径.Dim strRelativePath As String = &quot;Images/test.gif&quot;'把图片添加到placeholder.Dim strImageTag As String = &quot;&lt;IMG SRC='&quot; + strRelativePath + &quot;'/&gt;&quot;ChartHolder.Controls.Add(New LiteralControl(strImageTag))End SubEnd Class

下面是C#版本的OWC.asp.cs

ublic class owc: System.Web.UI.Page{protected System.Web.UI.WebControls.PlaceHolder ChartHolder;private void Page_Load(object sender, System.EventArgs e){// 在此处放置用户代码以初始化页面//创建ChartSpace对象来放置图表OWC.ChartSpace objCSpace = new OWC.ChartSpaceClass ();//在ChartSpace对象中添加图表，Add方法返回chart对象OWC.WCChart objChart = objCSpace.Charts.Add (0);//指定图表的类型。类型由OWC.ChartChartTypeEnum枚举值得到objChart.Type = OWC.ChartChartTypeEnum.chChartTypeColumnClustered;//指定图表是否需要图例objChart.HasLegend = true;//给定标题objChart.HasTitle = true;objChart.Title.Caption= &quot;上半年分布图&quot;;//给定x,y轴的图示说明objChart.Axes[0].HasTitle = true;objChart.Axes[0].Title.Caption = &quot;Y ：数量&quot;;objChart.Axes[1].HasTitle = true;objChart.Axes[1].Title.Caption = &quot;X ：月份&quot;;//计算数据/*categories 和 values 可以用tab分割的字符串来表示*/string strSeriesName = &quot;图例 1&quot;;string strCategory = &quot;1&quot; + '/t' + &quot;2&quot; + '/t' + &quot;3&quot; + '/t'+&quot;4&quot; + '/t' + &quot;5&quot; + '/t' + &quot;6&quot; + '/t';string strValue = &quot;9&quot; + '/t' + &quot;8&quot; + '/t' + &quot;4&quot; + '/t'+&quot;10&quot; + '/t' + &quot;12&quot; + '/t' + &quot;6&quot; + '/t';//添加一个seriesobjChart.SeriesCollection.Add(0);//给定series的名字objChart.SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimSeriesNames,+ (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);//给定分类objChart.SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimCategories,+ (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strCategory);//给定值objChart.SeriesCollection[0].SetData(OWC.ChartDimensionsEnum.chDimValues,(int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strValue);//输出成GIF文件.string strAbsolutePath = (Server.MapPath(&quot;.&quot;)) + &quot;//i//test.gif&quot;;objCSpace.ExportPicture(strAbsolutePath, &quot;GIF&quot;, 600, 350);//创建GIF文件的相对路径.string strRelativePath = &quot;./i/test.gif&quot;;//把图片添加到placeholder.string strImageTag = &quot;&lt;IMG SRC='&quot; + strRelativePath + &quot;'/&gt;&quot;;ChartHolder.Controls.Add(new LiteralControl(strImageTag));}#region Web Form Designer generated codeoverride protected void OnInit(EventArgs e){//// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。//InitializeComponent();base.OnInit(e);}/// &lt;summary&gt;/// 设计器支持所需的方法 - 不要使用代码编辑器修改/// 此方法的内容。/// &lt;/summary&gt;private void InitializeComponent(){this.Load += new System.EventHandler(this.Page_Load);}#endregion}

如果用ADO.NET的DataSet对象，可以生成以TAB分割的字符串：

strValue += (nodes.Item(j).ChildNodes.Item(0).InnerText + '/t');strCategory += (nodes.Item(j).ChildNodes.Item(1).InnerText + '/t');引用OWC11的代码 using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using Microsoft.Office.Interop.Owc11;namespace eMeng.Exam{/// &lt;summary&gt;/// OWC 的摘要说明。/// &lt;/summary&gt;public class OWCExam : System.Web.UI.Page{protected System.Web.UI.WebControls.PlaceHolder ChartHolder;private void Page_Load(object sender, System.EventArgs e){//创建ChartSpace对象来放置图表Microsoft.Office.Interop.Owc11.ChartSpace objCSpace = new Microsoft.Office.Interop.Owc11.ChartSpaceClass ();//在ChartSpace对象中添加图表，Add方法返回chart对象Microsoft.Office.Interop.Owc11.ChChart objChart = objCSpace.Charts.Add (0);//指定图表的类型。类型由OWC.ChartChartTypeEnum枚举值得到objChart.Type = Microsoft.Office.Interop.Owc11.ChartChartTypeEnum.chChartTypeColumnClustered;//指定图表是否需要图例objChart.HasLegend = true;//给定标题objChart.HasTitle = true;objChart.Title.Caption= &quot;上半年分布图&quot;;//给定x,y轴的图示说明objChart.Axes[0].HasTitle = true;objChart.Axes[0].Title.Caption = &quot;Y ：数量&quot;;objChart.Axes[1].HasTitle = true;objChart.Axes[1].Scaling.SplitMinimum = 200;objChart.Axes[1].Title.Caption = &quot;X ：月份&quot;;//计算数据/*categories 和 values 可以用tab分割的字符串来表示*/string strSeriesName = &quot;图例 1&quot;;string strCategory = &quot;1&quot; + &quot;/t&quot; + &quot;2&quot; + '/t' + &quot;3&quot; + '/t'+&quot;4&quot; + '/t' + &quot;5&quot; + '/t' + &quot;6&quot; + '/t';string strValue = &quot;9&quot; + &quot;/t&quot; + &quot;8&quot; + '/t' + &quot;4&quot; + '/t'+&quot;10&quot; + '/t' + &quot;12&quot; + '/t' + &quot;6&quot; + '/t';//添加一个seriesobjChart.SeriesCollection.Add(0);//给定series的名字objChart.SeriesCollection[0].SetData (Microsoft.Office.Interop.Owc11.ChartDimensionsEnum.chDimSeriesNames,+ (int)Microsoft.Office.Interop.Owc11.ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);//给定分类objChart.SeriesCollection[0].SetData (Microsoft.Office.Interop.Owc11.ChartDimensionsEnum.chDimCategories,+ (int)Microsoft.Office.Interop.Owc11.ChartSpecialDataSourcesEnum.chDataLiteral, strCategory);//给定值objChart.SeriesCollection[0].SetData(Microsoft.Office.Interop.Owc11.ChartDimensionsEnum.chDimValues,(int)Microsoft.Office.Interop.Owc11.ChartSpecialDataSourcesEnum.chDataLiteral, strValue);//输出成GIF文件.string strAbsolutePath = (Server.MapPath(&quot;.&quot;)) + &quot;//test.gif&quot;;objCSpace.ExportPicture(strAbsolutePath, &quot;GIF&quot;, 600, 350);//创建GIF文件的相对路径.string strRelativePath = &quot;./test.gif&quot;;//把图片添加到placeholder.string strImageTag = &quot;&lt;IMG SRC='&quot; + strRelativePath + &quot;'/&gt;&quot;;ChartHolder.Controls.Add(new LiteralControl(strImageTag));}#region Web 窗体设计器生成的代码override protected void OnInit(EventArgs e){//// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。//InitializeComponent();base.OnInit(e);}/// &lt;summary&gt;/// 设计器支持所需的方法 - 不要使用代码编辑器修改/// 此方法的内容。/// &lt;/summary&gt;private void InitializeComponent(){this.Load += new System.EventHandler(this.Page_Load);}#endregion}}