ASP中利用OWC控件绘制图表

'创建ChartSpace对象来放置图表Dim myChart As ChartSpaceClass = New ChartSpaceClass'在ChartSpace对象中添加图表，Add方法返回chart对象Dim Chart1 As ChChart = myChart.Charts.Add(0)'指定图表的类型。

类型由OWC.ChartChartTypeEnum枚举值得到Chart1.Type = OWC10.ChartChartTypeEnum.chChartTypeColumnClustered'指定图表是否需要图例Chart1.HasLegend = TrueChart1.Legend.Position = ChartLegendPositionEnum.chLegendPositionTop'给定标题Chart1.HasTitle = TrueChart1.Title.Caption = "1-6月数据分布图"'计算数据'X轴Dim strCategory As String = "1" + ControlChars.Tab + "2" + ControlChars.Tab _+ "3" + ControlChars.Tab + "4" + ControlChars.Tab + "5" + ControlChars.Tab _+ "6" + ControlChars.Tab'Y轴Dim strV alue As String = "9" + ControlChars.Tab + "8" + ControlChars.Tab _+ "4" + ControlChars.Tab + "10" + ControlChars.Tab + "12" + ControlChars.Tab _+ "6" + ControlChars.Tab'Z轴Dim strV alue2 As String = "0.3" + ControlChars.Tab + "0.63" + ControlChars.Tab _+ "0.48" + ControlChars.Tab + "0.86" + ControlChars.Tab + "0.95" + ControlChars.Tab _+ "0.18" + ControlChars.Tab'1. 添加一个seriesDim Ser1 As ChSeries = Chart1.SeriesCollection.Add(0)'给定series的名字Ser1.SetData(ChartDimensionsEnum.chDimSeriesNames, _ ChartSpecialDataSourcesEnum.chDataLiteral, "Product")'给定分类Ser1.SetData(ChartDimensionsEnum.chDimCategories, _ ChartSpecialDataSourcesEnum.chDataLiteral, strCategory)'给定值Ser1.SetData(ChartDimensionsEnum.chDimV alues, _ChartSpecialDataSourcesEnum.chDataLiteral, strV alue)'2. 再添加一个seriesDim Ser2 As ChSeries = Chart1.SeriesCollection.Add(1)'给定series的名字Ser2.SetData(ChartDimensionsEnum.chDimSeriesNames, _ ChartSpecialDataSourcesEnum.chDataLiteral, "Ratio")'给定分类Ser2.SetData(ChartDimensionsEnum.chDimCategories, _ ChartSpecialDataSourcesEnum.chDataLiteral, strCategory)'给定值Ser2.SetData(ChartDimensionsEnum.chDimV alues, _ ChartSpecialDataSourcesEnum.chDataLiteral, strV alue2)Ser2.Ungroup(True)Ser2.Type = ChartChartTypeEnum.chChartTypeLineMarkers'添加Z轴Dim AxesZ As ChAxis = Chart1.Axes.Add(Ser2.Scalings(ChartDimensionsEnum.chDimV alues))AxesZ.NumberFormat = "0.00%"AxesZ.Position = ChartAxisPositionEnum.chAxisPositionRight'给定x,y轴的图示说明'默认只有X,Y两个轴Chart1.Axes(-3).HasTitle = TrueChart1.Axes(-3).Title.Caption = "Y轴: 数量"Chart1.Axes(-2).HasTitle = TrueChart1.Axes(-2).Title.Caption = "X 轴：月份"AxesZ.HasTitle = TrueAxesZ.Title.Caption = "Z 轴：Ratio"'输出成GIF文件.Dim strAbsolutePath As String = "C:Images" & Format(Date.Now, "yyyyMMddhhmmss") & ".gif"myChart.ExportPicture(strAbsolutePath, "GIF", 600, 350)Me.Image1.ImageUrl = strAbsolutePath本文来自CSDN博客，转载请标明出处：/coso/archive/2006/09/17/1233263.aspx。

如何在中用OWC绘制图表一、概述在开发应用程序时，经常会遇到必须提供交互式图表的情况。

例如，你可能在开发一个管理销售和产品数据的应用程序，数据保存在SQL Server数据库上，应用程序允许用户添加数据、更新现有数据，但除了这些功能之外，客户还要求应用程序能够用饼图、柱形图或XY散点图的形式直观地描述数据。

在Windows桌面应用程序中，这类要求从来不成为问题，可供选用的图形库和绘图组件实在太多了。

但对于Web应用程序，问题就变得复杂多了。

要在Web应用中绘制图表，可供选择的办法包括：■客户端：利用各种ActiveX组件，Web浏览器内完全有可能达到“丰富”Windows客户程序那样的功能。

缺点是客户端的设置复杂化，要求发布客户端软件，通常按照每客户端的方式计算许可证费用。

另外，非MS Windows/IE的客户端一般难以运行。

■服务器端：利用Web服务器上运行的服务器端代码，动态地生成图表，然后以GIF或JPG图形的形式发送给客户端。

这种办法的优点是，客户端只需要一个标准的浏览器。

与客户端技术相比的缺点是，图形的交互能力差（除非向服务器提交新的请求，否则就不能缩放、滚动）。

许多地图网站（例如）大量地运用了这一技术。

注意，地图图形不是保存在Web服务器上，而是用户发出一个请求时动态从地图数据库生成。

本文主要讨论如何利用服务器端的图表绘制技术在 Web页面中提供图形功能二、设置图表引擎如果要在应用程序中绘制图表，必须要有一个合适的图表引擎。

有一个内建的图形工具库，即System.Drawing名称空间的GDI+，可以用来创建简单的饼图、柱形图、折线图等，不过它属于低级的API，算不上绘制图表的引擎，特别是不适合绘制复杂的图表。

本文要讨论的主角是OWC，即Office Web Components，或者“Office Web组件”。

按照微软的定义，OWC是一种“将类似Office的功能扩展到Web的微软技术”。

中实时图表的实现⽅法分享在对⼤批量的数据进⾏分析⽐较时，最常⽤也是最直观明了的表现⽅法莫过于绘制趋势图表。

⼀般情况下，我们利⽤EXCEL 制作各种类型的趋势图表，但它们都是基于静态数据的，即数据是事先整理好的⽽不是动态⽣成的。

如果在⽹上发布，只能将绘制好的图表以静态GIF图像发布，这⽆法从根本上满⾜不同⽤户对不同数据的需求。

ASP擅长服务器端的Web编程，操作后台数据库更是它的强项。

但是⽤ASP制作实时数据库图表有点困难，因为ASP本⾝并不⽀持图表功能，只能借助第三⽅控件进⾏开发，如VB的MSChart控件。

微软推出的.NET Framework较好地解决了这个问题。

微软在.NET平台上集成了实时数据库图表制作组件—OWC（Microsoft Office Web Components）。

通过在页⾯中调⽤OWC，我们可以轻松地绘制出各种类型的实时图表。

OWC⽀持近50种图表类型，包括曲线图、折线图、柱状图、⾯积图、K线图等。

与MSChart相⽐，OWC功能强⼤，操作简单。

此外，由于OWC是基于服务端的，⽽MSChart只能应⽤在客户端，因此在服务器端的Web开发中，MSChart要⽐OWC逊⾊不少。

下⾯笔者将结合实例来具体阐述OWC在页⾯中的应⽤，这个实例是笔者开发的项⽬《化纤产品及其原料市场分析系统》中的⼀个⼦系统，笔者在该项⽬中⽤到OWC，充分享受到了OWC的强⼤功能给开发⼯作带来的⽅便。

三层结构系统整体架构采⽤了B/S三层结构模式，将系统分为⽤户界⾯层（也称为表现层）、业务逻辑层（也称为功能层）和数据库服务层（也称为数据层），开发平台则采⽤了.NET Framework，有效地降低了系统对客户机的要求，避免了在客户机上分发应⽤程序与版本控制的困难。

●⽤户界⾯层: ⽤户界⾯采⽤的是技术。

技术的应⽤增强了系统的通⽤性，客户端只需安装IE或Netscape 等任⼀款浏览器，⽆需加载任何组件。

●业务逻辑层: 采⽤了.NET Framework调⽤OWC的技术，能够根据⽤户的要求快速取得数据库中的数据动态⽣成图表。

表格控件Spread for 导入图表控件及添加事件一、导入图表控件在日常办公总，使用Excel 会经常添加图表来使数据直观的展示出来。

Spread 兼容Excel 的巨大部分功能，当然，图表功能也是不可或缺的。

Spread 表格控件支持图表、波形图及条件格式化等多中数据可视化功能。

拼图下如何导入Excel 中的图表到Spread。

这里即阐述如何在 实现图表控件的导入。

详细操作步骤如下：1.使用Spread 打开Excel：1: this.FpSpread1.OpenExcel(this.Server.MapPath("ExcelChartI mport.xlsx"));2.如果Excel 中有多个图表，设置Excel 中各个图表都显示在第一个Sheet 中：1:2: for (int c = 0; c < FpSpread1.ActiveSheetView.C harts.Count; c++)3: {4:5: FpSpread1.ActiveSheetView.Charts[c].PageInd ex = 0;6: }3.在webconfig 文件中，添加图表配置节点。

1: <httpHandlers>2: <add path="FpChart.axd" verb="*" type="FarPoint.Web.Ch art.ChartImageHttpHandler" validate="true" />3: </httpHandlers>效果图如下：二、添加事件Spread for 中添加事件的方法十分简单方便-在前台的属性窗体中即可添加。

但是需要在后台重置Spread ，这样所有前台添加的事件都被重置。

这里我们介绍如何通过前台js 代码添加Spread 客户端事件。

MVC项⽬开发之统计图的使⽤（前⾔）接触这个项⽬，是项⽬组长已经完成了多数需求，并且有2个项⽬需要完⼯的情况下，让我加⼊，给了我2个表格，让我去设计出统计图。

第⼀次做统计图，可以说没有任何经验，不知道该如何下⼿，表格的数据量不少，重要的是分⽀很多，就准备先找下统计图插件，看下那个⽐较好⽤，并且做下对⽐。

⽹上说法很多，⽐较好⽤的就2个，1）echarts统计图插件（百度出品）优点：百度使⽤canvas可能考虑更多的是浏览器兼容性，只能通过api增加事件，更不容易出问题2） highcharts统计图（国外）优点：图表复杂度不⾼，但是要求⾼保真（即对放⼤与缩⼩的细节有要求），基于 svg 的表现会更好。

svg在这个场景⽐canvas快（性能/实现速度）很多也⽅便很多，使⽤⾃由度更⼤，更开放下⾯是⽹络上给的对⽐图。

图表类型ECharts Highcharts柱状图（条形图）⽀持⽀持折线图（⾯积图）⽀持⽀持饼图（环形图）⽀持⽀持散点图（⽓泡图）⽀持⽀持雷达图⽀持⽀持K线图⽀持Highstock⽀持⼒导布局图⽀持不⽀持和弦图⽀持不⽀持地图⽀持⽀持（另外还有独⽴的组件highmaps）特⾊图表（如仪表盘）不⽀持⽀持拖拽重计算⽀持不⽀持数据视图⽀持不⽀持图⽚导出⽀持⽀持动态类型切换⽀持⽀持（需要⾃⼰编写插件但是pie图切换⿇烦）值域漫游⽀持不⽀持⼤规模散点⽀持不⽀持数据区域缩放⽀持⽀持图例开关⽀持⽀持多维度堆积⽀持⽀持混搭⽀持⽀持3D暂不⽀持⽀持是否免费以及收费免费⾮商业免费价格在90美元~3600美元相对来说echarts⽐较容易⼊门，就选择了echarts。

画图全攻略（上）教程,研发本文代码是基于beta2研发越来越多的web应用需要使用图表来进行数据显示和分析。

例如：投票结果显示，公司生产情况统计图显示分析等等。

利用图表来显示数据，具备直观，清楚等长处。

传统的asp技术是不支持画图表的，那么就不得不利用active x或java applets来实现这个功能。

新近出现的解决了这个问题，只要利用中关于图像显示的类，就能够画出丰富，动态的图表(如图1)。

本文将要讲述如何利用技术结合技术画条形图和饼图。

图1首先建立一个c#的类库。

打开，建立一个名为insight_cs.webcharts新的类库工程，将解决方案的名称改为insight，将class.cs文档名改为insight_cs.webcharts.cs，最后打开insight_cs.webcharts.cs文档。

其中代码如下： /*自定义类，通过输入不同的参数，这些类能够画不同的图像*/using system;using system.io;//用于文档存取using system.data;//用于数据访问using system.drawing;//提供画gdi+图像的基本功能using system.drawing.text;//提供画gdi+图像的高级功能using system.drawing.drawing2d;//提供画高级二维，矢量图像功能using system.drawing.imaging;//提供画gdi+图像的高级功能namespace insight_cs.webcharts{public class piechart{public piechart(){}public void render(string title, string subtitle, int width, int height, dataset chartdata, stream target) {const int side_length = 400;const int pie_diameter = 200;datatable dt = chartdata.tables[0];//通过输入参数，取得饼图中的总基数float sumdata = 0;foreach(datarow dr in dt.rows){sumdata += convert.tosingle(dr[1]);}//产生一个image对象，并由此产生一个graphics对象bitmap bm = new bitmap(width,height);graphics g = graphics.fromimage(bm);//配置对象g的属性g.scaletransform((convert.tosingle(width))/side_length,(convert.tosingle(height))/side_length);g.smoothingmode = smoothingmode.default;g.textrenderinghint = textrenderinghint.antialias;//画布和边的设定g.clear(color.white);g.drawrectangle(pens.black,0,0,side_length-1,side_length-1);//画饼图标题g.drawstring(title,new font("tahoma",24),brushes.black,new pointf(5,5));//画饼图的图例g.drawstring(subtitle,new font("tahoma",14),brushes.black,new pointf(7,35));//画饼图float curangle = 0;float totalangle = 0;for(int i=0;i<dt.rows.count;i++){curangle = convert.tosingle(dt.rows[i][1]) / sumdata * 360;g.fillpie(newsolidbrush(chartutil.getchartitemcolor(i)),100,65,pie_diameter,pie_diameter,totalangle,curangle);g.drawpie(pens.black,100,65,pie_diameter,pie_diameter,totalangle,curangle);totalangle += curangle;}//画图例框及其文字g.drawrectangle(pens.black,200,300,199,99);g.drawstring("legend",new font("tahoma",12,fontstyle.bold),brushes.black,new pointf(200,300));//画图例各项pointf boxorigin = new pointf(210,330);pointf textorigin = new pointf(235,326);float percent = 0;for(int i=0;i<dt.rows.count;i++){g.fillrectangle(new solidbrush(chartutil.getchartitemcolor(i)),boxorigin.x,boxorigin.y,20,10);g.drawrectangle(pens.black,boxorigin.x,boxorigin.y,20,10);percent = convert.tosingle(dt.rows[i][1]) / sumdata * 100;g.drawstring(dt.rows[i][0].tostring() + " - " + dt.rows[i][1].tostring() + " (" + percent.tostring("0") + "%)",new font("tahoma",10),brushes.black,textorigin);boxorigin.y += 15;textorigin.y += 15;}//通过response.outputstream，将图像的内容发送到浏览器bm.save(target, imageformat.gif);//回收资源bm.dispose();g.dispose();}}//画条形图public class barchart{public barchart(){}public void render(string title, string subtitle, int width, int height, dataset chartdata, stream target) {const int side_length = 400;const int chart_top = 75;const int chart_height = 200;const int chart_left = 50;const int chart_width = 300;datatable dt = chartdata.tables[0];//计算最高的点float highpoint = 0;foreach(datarow dr in dt.rows){if(highpoint<convert.tosingle(dr[1])){highpoint = convert.tosingle(dr[1]);}}//建立一个graphics对象实例bitmap bm = new bitmap(width,height);graphics g = graphics.fromimage(bm);//配置条图图像和文字属性g.scaletransform((convert.tosingle(width))/side_length,(convert.tosingle(height))/side_length); g.smoothingmode = smoothingmode.default;g.textrenderinghint = textrenderinghint.antialias;//设定画布和边g.clear(color.white);g.drawrectangle(pens.black,0,0,side_length-1,side_length-1);//画大标题g.drawstring(title,new font("tahoma",24),brushes.black,new pointf(5,5));//画小标题g.drawstring(subtitle,new font("tahoma",14),brushes.black,new pointf(7,35));//画条形图float barwidth = chart_width / (dt.rows.count * 2);pointf barorigin = new pointf(chart_left + (barwidth / 2),0);float barheight = dt.rows.count;for(int i=0;i<dt.rows.count;i++){barheight = convert.tosingle(dt.rows[i][1]) * 200 / highpoint;barorigin.y = chart_top + chart_height - barheight;g.fillrectangle(newsolidbrush(chartutil.getchartitemcolor(i)),barorigin.x,barorigin.y,barwidth,barheight);barorigin.x = barorigin.x + (barwidth * 2);}//配置边g.drawline(new pen(color.black,2),new point(chart_left,chart_top),new point(chart_left,chart_top + chart_height));g.drawline(new pen(color.black,2),new point(chart_left,chart_top + chart_height),new point(chart_left + chart_width,chart_top + chart_height));//画图例框和文字g.drawrectangle(new pen(color.black,1),200,300,199,99);g.drawstring("legend",new font("tahoma",12,fontstyle.bold),brushes.black,new pointf(200,300));//画图例pointf boxorigin = new pointf(210,330);pointf textorigin = new pointf(235,326);for(int i=0;i<dt.rows.count;i++){g.fillrectangle(new solidbrush(chartutil.getchartitemcolor(i)),boxorigin.x,boxorigin.y,20,10);g.drawrectangle(pens.black,boxorigin.x,boxorigin.y,20,10);g.drawstring(dt.rows[i][0].tostring() + " - " + dt.rows[i][1].tostring(),newfont("tahoma",10),brushes.black,textorigin);boxorigin.y += 15;textorigin.y += 15;}//输出图像bm.save(target, imageformat.gif);//资源回收bm.dispose();g.dispose();}}public class chartutil{public chartutil(){}public static color getchartitemcolor(int itemindex){color selectedcolor;switch(itemindex){case 0:selectedcolor = color.blue;break;case 1:selectedcolor = color.red;break;case 2:selectedcolor = color.yellow;break;case 3:selectedcolor = color.purple;break;default:selectedcolor = color.green;break;}return selectedcolor;}}}代码分析：1.引入一些namespaceusing system;using system.io;//用于文档存取using system.data;//用于数据访问using system.drawing;//提供画gdi+图像的基本功能using system.drawing.text;//提供画gdi+图像的高级功能using system.drawing.drawing2d;//提供画高级二维，矢量图像功能 using system.drawing.imaging;//提供画gdi+图像的高级功能这些namespace将在后面被应用。

竭诚为您提供优质文档/双击可除asp表格控件篇一：.net4.0表格控件4.0表格控件表格控件有三个控件组成，包括htmltable控件、htmltableRow控件和htmltable控件。

其中htmltable控件用来控制元素。

在html中，用来建立一个表格。

htmltablecell控件用来控制和元素。

在html中，这些元素用来建立表格单元格和表格标题单元格。

htmltableRow控件用来控制元素。

在html中，元素用来建立表格行。

htmltable 控件可以配合htmltableRow以及htmltablecell控件来动态的产生表格。

表格控件之间的关系可以这样认为：htmltable控件是由许多列（Row）所组成，而每一列中是由许多储存格（cell）所组成。

所以htmltable控件中有Rows集合，htmltableRow 控件中有cells集合。

我们依秩序利用htmltableRow中cells集合的add方法，将htmltablecell控件串成一列（Row）后，再将这一列加到htmltable的Rows集合中，这样一来表格就大功告成了。

下面是一个使用表格控件生成表格的实例，代码如下所示。

篇二：asp中利用owc控件绘制图表asp中利用owc控件绘制图表在页面动态绘制图表的问题。

在asp中动态生成图表主要有2种方式，一是使用表格控制生成；另一种方式是使用office的owc控件生成图表。

本文讨论的是如何实现在asp 中用owc控件动态生成图表图片，保存在服务器端然后发送到浏览器显示，客户端浏览器只要支持标签就能显示图表，可避免直接输出动态图表到客户端时有可能带来的一系列问题。

*owc简介owc是officewebcompent的缩写，即microsoft的officeweb组件，它为在web中绘制图形提供了灵活的同时也是最基本的机制。

通过在asp页面中调用owc，我们可以轻松地绘制出各种类型的实时图表。