如何在ASP.NET中用OWC繪制圖表（2）
2024-07-10 12:55:21
供稿：網(wǎng)友
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 窗體設(shè)計器生成的代碼 "
'該調(diào)用是 web 窗體設(shè)計器所必需的。
<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: 此方法調(diào)用是 web 窗體設(shè)計器所必需的
'不要使用代碼編輯器修改它。
initializecomponent()
end sub
#end region
private sub page_load(byval sender as system.object, byval e as system.eventargs) handles mybase.load
'在此處放置初始化頁的用戶代碼
'創(chuàng)建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說數(shù)據(jù)分布圖"
'給定x,y軸的圖示說明
objchart.axes(0).hastitle = true
objchart.axes(0).title.caption = "y 軸 : 數(shù)量"
objchart.axes(1).hastitle = true
objchart.axes(1).title.caption = "x 軸： 月份"
'計算數(shù)據(jù)
'*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)
'創(chuàng)建gif文件的相對路徑.
dim strrelativepath as string = "images/test.gif"
'把圖片添加到placeholder.
dim strimagetag as string = "<img src='277_files/" + 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)
{
// 在此處放置用戶代碼以初始化頁面
//創(chuàng)建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 ： 數(shù)量";
objchart.axes[1].hastitle = true;
objchart.axes[1].title.caption = "x ： 月份";
//計算數(shù)據(jù)
/*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(".")) + "http://i//test.gif";
objcspace.exportpicture(strabsolutepath, "gif", 600, 350);
//創(chuàng)建gif文件的相對路徑.
string strrelativepath = "./i/test.gif";
//把圖片添加到placeholder.
string strimagetag = "<img src='277_files/" + strrelativepath + "'/>";
chartholder.controls.add(new literalcontrol(strimagetag));
}
#region web form designer generated code
override protected void oninit(eventargs e)
{
//
// codegen：該調(diào)用是 asp.net web 窗體設(shè)計器所必需的。
//
initializecomponent();
base.oninit(e);
}
/// <summary>
/// 設(shè)計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內(nèi)容。
/// </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');
microsoft.office.interop名稱空間指向office xp pia，pia應(yīng)該事先安裝到web服務(wù)器上。編譯源代碼時要用到office xp pia owc的dll文件。如果用vs.net編譯，只要加入一個microsoft.office.interop.owc.dll文件的引用即可（位于解開office xp pia文件的目錄），如果從命令行編譯，必須按照下列方式使用/r:參數(shù)：
vbc /t:library /out:bin/getchart.dll /r:system.dll /r:system.web.dll
/r:system.data.dll
/r:c:/oxppia/microsoft.office.interop.owc.dll getchart.aspx.vb
上面的代碼有許多值得一提的地方。首先，我們假定數(shù)據(jù)源位于mssql數(shù)據(jù)庫owcdemo，該數(shù)據(jù)庫有一個owcdata表，owcdata表有兩個數(shù)值列，分別是x和y。getchart.aspx的目標就是從數(shù)據(jù)庫獲取記錄，然后用散點圖（xy）描述這些數(shù)據(jù)。
owc圖表的數(shù)據(jù)點無法直接從asp.net的dataset獲取，因此，我們首先要把數(shù)據(jù)庫的數(shù)據(jù)裝入數(shù)組，然后用數(shù)組的數(shù)據(jù)填寫owc圖表的數(shù)據(jù)點。如果要對本例作改進的話，最好開發(fā)一個asp.net服務(wù)器控件，它能夠從抽象的數(shù)據(jù)源（包括dataset對象、xml文件或數(shù)組）獲取數(shù)據(jù)并生成xy散點圖。
datareader要比dataset快速、高效，不過，我們首先要確定數(shù)據(jù)庫中的記錄數(shù)量，根據(jù)記錄數(shù)量來調(diào)整數(shù)組的大小。為此，我們先用一個sql select count(*)查詢獲取記錄數(shù)量，然后定義數(shù)組大小，最后用第二個sql select查詢獲取數(shù)據(jù)庫記錄。
如果我們要讓散點圖的各個點用折線連接起來，記錄必須依照x軸排序，這通過一個sql order by子句實現(xiàn)。
owc的圖表建立在“繪圖空間”上。一個繪圖空間可以包含一個或多個圖表，每一個圖表可以有一個或多個數(shù)據(jù)系列。在生成owc圖表時，我們首先創(chuàng)建一個繪圖空間，將一個圖表加入到繪圖空間，設(shè)置圖表的類型，添加數(shù)據(jù)系列，最后用數(shù)組的數(shù)據(jù)填寫數(shù)據(jù)系列。
另外，我們還可以設(shè)置（可選）各種布局參數(shù)，例如顏色、坐標標題、圖表標題、圖例，等等。owc提供了數(shù)百個布局參數(shù)，我們可以隨心所欲地調(diào)整圖表。當然，對于不同的圖表類型，繪圖模式也略有不同，例如，餅圖和散點圖的參數(shù)設(shè)置方法是不同的。在owc 10安裝包中有owc幫助文件，里面詳細說明了owc圖表模型。
最后，response.binarywrite參數(shù)指定了要輸出的圖形類型（gif），以及圖形的寬度、高度（以像素為單位）。在這里，我們可以根據(jù)需要縮放從owc圖表生成的圖形。
