在ASP.NET中使用Office Web Components (OWC)創建統計圖
2024-07-10 13:03:09
供稿：網友
圖形和圖表是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:
<%@ page language="vb" autoeventwireup="false" codebehind="owc.aspx.vb" inherits="aspxweb.owc"%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
<head>
<title>webform1</title>
<meta name="generator" content="microsoft visual studio 7.0">
<meta name="code_language" content="c#">
<meta name="vs_defaultclientscript" content="javascript">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body ms_positioning="gridlayout">
<form id="form1" method="post" runat="server">
<asp:placeholder id="chartholder" runat="server"></asp:placeholder>
</form>
</body>
</html>
owc.aspx.vb：
imports system
imports owc
imports system.web.ui
public class owc
inherits system.web.ui.page
protected withevents chartholder as system.web.ui.webcontrols.placeholder
#region " web 窗體設計器生成的代碼 "
'該調用是 web 窗體設計器所必需的。
<system.diagnostics.debuggerstepthrough()> private sub initializecomponent()
end sub
private sub page_init(byval sender as system.object, byval e as system.eventargs) handles mybase.init
'codegen: 此方法調用是 web 窗體設計器所必需的
'不要使用代碼編輯器修改它。
initializecomponent()
end sub
#end region
private 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 = true
objchart.title.caption = "1-6說數據分布圖"
'給定x,y軸的圖示說明
objchart.axes(0).hastitle = true
objchart.axes(0).title.caption = "y 軸 : 數量"
objchart.axes(1).hastitle = true
objchart.axes(1).title.caption = "x 軸： 月份"
'計算數據
'*categories 和 values 可以用tab分割的字符串來表示*
dim strseriesname as string = "圖例 1"
dim strcategory as string = "1" + controlchars.tab + "2" + controlchars.tab _
+ "3" + controlchars.tab + "4" + controlchars.tab + "5" + controlchars.tab _
+ "6" + controlchars.tab
dim strvalue as string = "9" + controlchars.tab + "8" + controlchars.tab _
+ "4" + controlchars.tab + "10" + controlchars.tab + "12" + controlchars.tab _
+ "6" + controlchars.tab
'添加一個series
objchart.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(".")) + "/images/test.gif"
objcspace.exportpicture(strabsolutepath, "gif", 600, 350)
'創建gif文件的相對路徑.
dim strrelativepath as string = "images/test.gif"
'把圖片添加到placeholder.
dim strimagetag as string = "<img src='" + strrelativepath + "'/>"
chartholder.controls.add(new literalcontrol(strimagetag))
end sub
end 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= "上半年分布圖";
//給定x,y軸的圖示說明
objchart.axes[0].hastitle = true;
objchart.axes[0].title.caption = "y ： 數量";
objchart.axes[1].hastitle = true;
objchart.axes[1].title.caption = "x ： 月份";
//計算數據
/*categories 和 values 可以用tab分割的字符串來表示*/
string strseriesname = "圖例 1";
string strcategory = "1" + '/t' + "2" + '/t' + "3" + '/t'+"4" + '/t' + "5" + '/t' + "6" + '/t';
string strvalue = "9" + '/t' + "8" + '/t' + "4" + '/t'+"10" + '/t' + "12" + '/t' + "6" + '/t';
//添加一個series
objchart.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(".")) + "//i//test.gif";
objcspace.exportpicture(strabsolutepath, "gif", 600, 350);
//創建gif文件的相對路徑.
string strrelativepath = "./i/test.gif";
//把圖片添加到placeholder.
string strimagetag = "<img src='" + strrelativepath + "'/>";
chartholder.controls.add(new literalcontrol(strimagetag));
}
#region web form designer generated code
override protected void oninit(eventargs e)
{
//
// codegen：該調用是 asp.net web 窗體設計器所必需的。
//
initializecomponent();
base.oninit(e);
}
/// <summary>
/// 設計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內容。
/// </summary>
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');
