(一). 写本文章目的:
学了一段时间ComponentOne的图表,感觉ComponenOne图表控件还可以,图表样式也较丰富
不过它的帮助全是英文的,而且有些地方写的比较粗糙,示例程序也不够详细. 我把它总结了一下.
(二).使用方法
1.安装好ComponentOne软件.
2.建立一个WEB应用程序项目,名称为: TextChart
3.将ComponentOne软件自带的控件集DLL文件(不一定全部,只把需要的一部分)拷贝到自己刚建的
项目TextChart的Bin目录下面 (这里要手动放的原因是ComponentOne有时会找不到Dll)
4.双击项目里任何一个*.aspx文件,打开设计界面。 打开工具栏,在工具栏空白处右击,选“添加/删除”
项,打开自定义控件窗口,在.net frame 组件选项卡下选择ComponentOne相应的组件,如果有清楚,
就将所有的C1开头的全部勾选,点“确定按钮". 则ComponentOne的控件就显示在工具箱里面了 :)
5. 到了这一步,就可以将ComponentOne控件像一般控件一样直接拖动使用了. 拖C1WebChart控件到
窗体页面上. 然后右击控件,选 "Chart wizard..."就可以为其设置显示的样式(饼图/柱状图/折线图等)和
属性了,用法跟一般控件差不多。(如果感觉还是陌生的话,请看下面(三),除了用设计器设置外,
还可以代码用代码设置)
(三) . 代码设置
1. 限于篇幅,只讲解主要的属性
2.所有的图表样式原理差不多都一样的,这里只讲一下饼图的实现方法
using C1.Web.C1WebChart; //命名空间,必需加入,否则找不到里面的类和方法等
using C1.Web.C1WebChartBase;
using C1.Win.C1Chart;
protected C1.Web.C1WebChart.C1WebChart C1WebChart1; // 控件声明
1) <summary>主要属性</summary>
C1WebChart1.Header.Text="Chart 头"; //图表头标题
C1WebChart1.Footer.Text="Chart 尾"; //图表尾文本
C1WebChart1.BackColor = Color.LightSteelBlue; //背景色
C1WebChart1.ImageFormat = System.Drawing.Imaging.ImageFormat.Png; //图像存储格式
C1WebChart1.ChartGroups.Group0.ChartType = Chart2DTypeEnum.Bar; //图表
// 类型,Chart2DTypeEnum枚举下有所有的图表样式,如饼图/柱状图等
C1WebChart1.Width=800; //图表宽度
2) <summary>主要方法</summary>
a .X轴标签(坐标)的方法,直接调用即可
public void AddAxisX()
{
// label x axis with product names
Axis ax = C1WebChart1.ChartArea.AxisX;
ax.ValueLabels.Clear();
ax.AnnoMethod = AnnotationMethodEnum.ValueLabels;
for(int i = 0; i < 100; i++)
{
//DataRowView drv = dv[i];
ax.ValueLabels.Add(i, (i+1).ToString());
}
try
{
ax.Max = 10 - .5;
}
catch {}
}
a .Y轴标签(坐标)的方法,直接调用即可
public void AddAxisY()
{
// label y axis with product names
Axis ay = C1WebChart1.ChartArea.AxisY;
ay.ValueLabels.Clear();
ay.AnnoMethod = AnnotationMethodEnum.ValueLabels;
for(int i = 0; i < 10; i++)
{
//DataRowView drv = dv[i];
ay.ValueLabels.Add(i, (50*i).ToString());
}
try
{
ay.Max = 20 - .5;
}
catch {}
}
c.画图表的方法
public void GetPieData()
{
C1WebChart1.Legend.Visible = true; //图表区块注释.
this.AddAxisX(); //上面方法a
this.AddAxisY(); //上面方法b
//生成数据
PointF[] data = new PointF[10];
for (int i = 0; i < data.Length; i++)
{
float y = float.Parse((3*i+5).ToString());
data[i] = new PointF(i, y);
}
//清除现有的饼图
ChartDataSeriesCollection dscoll = C1WebChart2.ChartGroups[0].ChartData.SeriesList;
dscoll.Clear();
//汇图,即将点数组交给控件,它会自己分配,并画出图形
ChartDataSeries series = C1WebChart1.ChartGroups[0].ChartData.SeriesList[0];
series.PointData.CopyDataIn(data);// 这里的data是PointF类型
//给区块加标签
for(int i=0; i < data.Length; i++)
{
ChartDataSeries series = dscoll.AddNewSeries();
series.PointData.Length = 1;
series.Y[0] = data[i].Y;
series.Label="我是:"+(i+1).ToString();
//加标签
C1.Win.C1Chart.Label lbl = C1WebChart1.ChartLabels.LabelsCollection.AddNewLabel();
lbl.Text = string.Format("{0} ({1:c})","第:"+i.ToString()+"扇区", data[i].Y);
lbl.Compass = LabelCompassEnum.Radial;
lbl.Offset = 20;
lbl.Connected = true;
lbl.Visible = true;
lbl.AttachMethod = AttachMethodEnum.DataIndex;
AttachMethodData am = lbl.AttachMethodData;
am.GroupIndex = 0;
am.SeriesIndex = i;
am.PointIndex = 0;
}
}
二、设置图表引擎
三、OWC的许可证问题
四、OWC的运行机制
五、在Web服务器上安装OWC 10
六、OWC编程模式
━━━━━━━━━━━━━
正文:
━━━━━━━━━━━━━
一、概述
在开发应用程序时,经常会遇到必须提供交互式图表的情况。例如,你可能在开发一个管理销售和产品数据的应用程序,数据保存在SQL Server数据库上,应用程序允许用户添加数据、更新现有数据,但除了这些功能之外,客户还要求应用程序能够用饼图、柱形图或XY散点图的形式直观地描述数据。
在Windows桌面应用程序中,这类要求从来不成为问题,可供选用的图形库和绘图组件实在太多了。但对于Web应用程序,问题就变得复杂多了。要在Web应用中绘制图表,可供选择的办法包括:
■ 客户端:
利用各种ActiveX组件,Web浏览器内完全有可能达到“丰富”Windows客户程序那样的功能。缺点是客户端的设置复杂化,要求发布客户端软件,通常按照每客户端的方式计算许可证费用。另外,非MS Windows/IE的客户端一般难以运行。
■ 服务器端:
利用Web服务器上运行的服务器端代码,动态地生成图表,然后以GIF或JPG图形的形式发送给客户端。这种办法的优点是,客户端只需要一个标准的浏览器。与客户端技术相比的缺点是,图形的交互能力差(除非向服务器提交新的请求,否则就不能缩放、滚动)。许多地图网站(例如Mapquest.com)大量地运用了这一技术。注意,地图图形不是保存在Web服务器上,而是用户发出一个请求时动态从地图数据库生成。
本文主要讨论如何利用服务器端的图表绘制技术在ASP.NET Web页面中提供图形功能,具体地说,本文分析了如何利用MS SQL数据库中保存的数据生成一个散点图。
二、设置图表引擎
如果要在ASP.NET应用程序中绘制图表,必须要有一个合适的图表引擎。ASP.NET有一个内建的图形工具库,即System.Drawing名称空间的GDI+,可以用来创建简单的饼图、柱形图、折线图等,不过它属于低级的API,算不上绘制图表的引擎,特别是不适合绘制复杂的图表。
ASP.NET环境下还有许多商业化的图表绘制代码库,随便搜索一下Google,就可以找到:
Mycos Charts .NET Web Forms Edition
Dundas Chart for ASP.NET
.netCHARTING
Charting Controls at the ASP.NET Control Gallery
不过,许多产品都相当昂贵,而且与世界上应用最广泛的图表绘制工具——Excel相比,不免给人以陌生的感觉。MS Excel是一个相当强大的图表引擎,支持的图表类型非常丰富,而且提供了完备的图表布局调整功能。
正因为如此,所以本文要讨论的主角是OWC,即Office Web Components,或者“Office Web组件”。按照微软的定义,OWC是一种“将类似Office的功能扩展到Web的微软技术”。它可以在客户端使用,例如我们将Excel工作表保存为Web页面时就要用到,利用它可以方便地将交互式电子表格和图表发布到Web页面。同时,OWC也是一个优秀的服务器端图表引擎,具有与MS Excel同样强大的图表绘制能力。
三、OWC的许可证问题
如果你曾经用过版本较早的OWC,可能已经遇到过微软的许可证问题。以前这个问题相当令人烦恼,微软不仅要求服务器上必须有Office许可证,而且每一台客户PC上也同样要有。
实际上,这相当于将OWC的用途局限到了Intranet之内,只有Intranet之内才可以保证客户PC上都安装了Office许可证。不过现在微软的态度有所放缓——服务器上仍旧要安装Office许可证,但只要图表是“非交互式”用途,例如本文的服务器端图表绘制,客户端就不必再装Office许可证。实际上,就连服务器端也不必安装完整的Office许可证,Excel 2002或FrontPage 2002的许可证就已足够,从而使OWC变成了价廉物美的服务器端图表引擎。
那么,在服务器上安装MS Office?不,没有必要。虽然从许可证条件看,OWC应该是Office的一部分,但从技术上说,OWC是一个独立的产品。Web服务器上只需安装OWC软件包,不必安装整个Office。
OWC首次出现于Office 2000,即OWC 9.0。在Office XP中,OWC的编程模式已作了修改,这使得OWC XP(也就是OWC 10)不能与OWC 9.0完全兼容。OWC 10要求在ASP.NET环境中运行,所以OWC 10软件包必须安装到ASP.NET服务器上。
接下来,很自然的一个问题是:哪里可以下载OWC 10软件包?令人惊奇的是,它可以从微软的网站免费下载,地址是http://office.microsoft.com/downloads/2002/owc10.aspx,
四、OWC的运行机制
OWC是一组COM(ActiveX)控件的集合,涵盖电子表格、图表、数据透视表等功能。它经常被当作客户端技术使用,这时COM控件就安装在客户端PC上。如果在服务器端使用,人们主要感兴趣的是它的图表绘制功能。
有了OWC,我们可以在ASP.NET Web服务器上动态创建一个图表,然后将图表以GIF图形的形式发送到客户端。客户端看到的仅仅是一个普通的图形文件,但在“背后”,图形文件实际上是由服务器上ASP.NET回应客户请求时动态生成的。因此,这种技术对客户端没有特殊的要求,只要能够显示GIF图形就可以了,即使Netscape和Opera也不存在任何问题。
既然如此,为什么在ASP.NET开发领域中,OWC这一优秀的微软技术尚未被广泛采用呢?微软根本不为OWC作市场宣传,再加上令人迷惑的许可证问题,当然令许多开发者望而却步。也许微软认为该产品还没有完全成熟,即将到来的Office 2003将会带来OWC 11,它的编程模式还会有所改变。另外,还有一种可能是微软担心OWC技术的广泛采用会影响Office的销售。
再者,关于OWC的编程实例很少。微软知识库有几个客户端的例子和“传统”ASP的服务器端例子,但找不到在ASP.NET环境中使用OWC 10的例子。OWC的新闻组,microsoft.public.office.developer.web.components,主要讨论的也是客户端的应用。如果你要在ASP.NET环境中使用OWC 10,主要还是靠自己摸索。正是因为这些原因,所以本文从相当广泛的角度探讨了该技术的实际应用。
五、在Web服务器上安装OWC 10
要想在ASP.NET Web服务器上用OWC绘制图表,首先应当安装必要的软件和修改一些配置。
第一,Web服务器上当然应该有ASP.NET运行环境。除了.NET Framework Redistributable,还要有GACUTIL程序(属于.NET框架SDK)来配置OWC控件,也就是说,还要安装.NET Framework SDK工具。如果把.NET Framework 1.1 Redistributable和SDK安装到了默认目录,PATH环境变量的内容应当包含:C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322;C:\Program Files\Microsoft.NET\SDK\v1.1\Bin。
接下来再在Web服务器上安装OWC 10。OWC可以从微软免费下载,安装时只要采用所有默认选项即可。
由于OWC 10是一种COM技术,为了让.NET代码使用OWC 10组件,还必须安装Office XP的Primary Interop Assembly(PIA),PIA可以从微软网站下载(http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnoxpta/html/odc_oxppias.asp)。
这个命令把Office XP PIA导入到全局程序集缓冲区,修改注册表设置。注意观察REGISTER.bat命令的输出,确信GACUTIL命令确实在运行。如果PATH环境变量设置有误,PIA不可能正确导入。README文档说应当用VS.NET命令行环境,但Web服务器上可能没有安装VS.NET,这时就要手工修改PATH环境变量了(效果一样)。
最后,还要把下面这行代码加入Web服务器的machine.config文件的
|
浪子注明:如果发生不能编译的错误,可能要再次运行注册步骤!我这里这样,大家如果不一样,可以自己试试。
六、OWC编程模式
为了在ASP.NET页面中显示一个OWC图表,我们将创建一个简单的ASP.NET页面,该页面的唯一用途就是显示图表。Web页面的名称是getchart.aspx。要在Web页面中显示出图表,可以用一个标准的
|
getchart.aspx页面在服务器上动态生成OWC图表,然后把图表转换成GIF图形发送给客户端。因此,在客户端看来,getchart.aspx就相当于一个GIF图形。
下面我们分析一下getchart.aspx文件。如果使用ASP.NET的Codebehind机制,getchart.aspx实际上只要数条ASP.NET指令:
|
要生成图表的数据称为数据原,Chart Component组件支持的数据源有:实现IDataSource接口的任何数据源;ADO Recordset对象;XML文件;数组或者一定格式的文本字符串。在ASP中,我们可以用ADO Recordset对象;在.NET的ADO.NET中,由于ADO.NET没有实现IDataSource,.NET也没有提供ADO.NET DataSet对象向ADO Recordset对象的直接转换,如果你有一个 DataSet对象,你要么转换成XML文件,要么生成特殊格式的字符串才可以使用。下面就是本例子的结果:
[浪子注明:如果出错,可能是文件夹权限的问题,我的就是,要将虚拟目录的everyone的全部权限加上!]
下面是实现这种功能的VB.NET版本的ASP.NET例子与代码:
OWC.aspx:
OWC.aspx.vb:
下面是C#版本的OWC.asp.cs
如果用ADO.NET的DataSet对象,可以生成以TAB分割的字符串:
Microsoft.Office.Interop名称空间指向Office XP PIA,PIA应该事先安装到Web服务器上。编译源代码时要用到Office XP PIA OWC的DLL文件。如果用VS.NET编译,只要加入一个Microsoft.Office.Interop.Owc.dll文件的引用即可(位于解开Office XP PIA文件的目录),如果从命令行编译,必须按照下列方式使用/r:参数:
|
上面的代码有许多值得一提的地方。首先,我们假定数据源位于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图表生成的图形。