如何在ASP.NET中用OWC绘制图表（2）
2024-07-10 12:55:21
供稿：网友
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='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)
{
// 在此处放置用户代码以初始化页面
//创建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='277_files/" + 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');
microsoft.office.interop名称空间指向office xp pia，pia应该事先安装到web服务器上。编译源代码时要用到office xp pia owc的dll文件。如果用vs.net编译，只要加入一个microsoft.office.interop.owc.dll文件的引用即可（位于解开office xp pia文件的目录），如果从命令行编译，必须按照下列方式使用/r:参数：
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
上面的代码有许多值得一提的地方。首先，我们假定数据源位于mssql数据库owcdemo，该数据库有一个owcdata表，owcdata表有两个数值列，分别是x和y。getchart.aspx的目标就是从数据库获取记录，然后用散点图（xy）描述这些数据。
owc图表的数据点无法直接从asp.net的dataset获取，因此，我们首先要把数据库的数据装入数组，然后用数组的数据填写owc图表的数据点。如果要对本例作改进的话，最好开发一个asp.net服务器控件，它能够从抽象的数据源（包括dataset对象、xml文件或数组）获取数据并生成xy散点图。
datareader要比dataset快速、高效，不过，我们首先要确定数据库中的记录数量，根据记录数量来调整数组的大小。为此，我们先用一个sql select count(*)查询获取记录数量，然后定义数组大小，最后用第二个sql select查询获取数据库记录。
如果我们要让散点图的各个点用折线连接起来，记录必须依照x轴排序，这通过一个sql order by子句实现。
owc的图表建立在“绘图空间”上。一个绘图空间可以包含一个或多个图表，每一个图表可以有一个或多个数据系列。在生成owc图表时，我们首先创建一个绘图空间，将一个图表加入到绘图空间，设置图表的类型，添加数据系列，最后用数组的数据填写数据系列。
另外，我们还可以设置（可选）各种布局参数，例如颜色、坐标标题、图表标题、图例，等等。owc提供了数百个布局参数，我们可以随心所欲地调整图表。当然，对于不同的图表类型，绘图模式也略有不同，例如，饼图和散点图的参数设置方法是不同的。在owc 10安装包中有owc帮助文件，里面详细说明了owc图表模型。
最后，response.binarywrite参数指定了要输出的图形类型（gif），以及图形的宽度、高度（以像素为单位）。在这里，我们可以根据需要缩放从owc图表生成的图形。
