ASP.NET用OWC绘图控件画统计图表-asp.net-IT落伍者

OWC提供面积图柱状图条形图折线图平滑曲线图饼图圆环图股价图散点图雷达图其中有些图形包括二维和三维的有些图形又包含好几种比如柱状图包括单柱状图簇形柱状图一个柱好几个颜色的柱状图等具体类型请参看OWCDCHCHM文件中的枚举ChartChartTypeEnum

OWC有帮助文件安装Office之后在C:\Program Files\Common Files\Microsoft Shared\Web Components\\目录下面有几个*chm文件便是如果你没有这几个文件尝试把Office完全安装一下试试或者自定义安装的时候选中相应的选项但它们是针对如何在Excel中使用而不是在Net或Java或Dephi中如何使用的它只是按字母顺序列出了OWC组件所有的对象集合方法属性枚举以及少量的示例代码查找很不方便我主要参看了其中的OWCDCHCHM文件

OWC即Office Web Components是微软随Office提供的绘图控件使用它能够绘制绝大部分的图形但不幸的是OWC的帮助文件并不好用网上关于OWC的文章也都很简单稍微深入一点的问题就很难搜到它为在Web中绘制图形提供了灵活的同时也是最基本的机制

在一个intranet环境中如果可以假设客户机上存在特定的浏览器和一些功能强大的软件（如IE和Office /XP/）那么就有能力利用Office Web组件提供一个交互式图形开发环境这种模式下客户端工作站将在整个任务中分担很大的比重理论上说Excel能做的图都可以通过OWC画所以把自己研究OWC的一些心得写在这里希望能帮助有需要的朋友使他们不必再去翻看长长的对象（属性方法）列表

本文讲述如何绘制条形图折线图柱形图面积图等常见图形

效果图

前台代码

<%@ Page Language=C# AutoEventWireup=true CodeFile=OWCdrawingaspxcs Inherits=OWCdrawing %>

<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN <transitionaldtd>>

</head>

<body>

<div >

<tr>

<strong>怎么样在ASPNET中使用OWC组件画图</strong></td>

</tr>

<tr>

<asp:PlaceHolder ID=PlaceHolder runat=server></asp:PlaceHolder>

</td>

</tr>

<tr>

</tr>

</table>

</div>

</form>

</body>

</html>

手把手教程

第一步

右键点击网站根目录引用如图所示

第二步

点击添加引用后弹出一个窗口添加OWC的引用如图所示

点确定

第三步

代码中引用MicrosoftOfficeInteropOwc

全部代码

后台代码

using System;

using SystemData;

using SystemConfiguration;

using SystemWeb;

using SystemWebSecurity;

using SystemWebUI;

using SystemWebUIWebControls;

using SystemWebUIWebControlsWebParts;

using SystemWebUIHtmlControls;

using SystemDataSqlClient; //添加数据操作引用

using MicrosoftOfficeInteropOwc;//添加Office组件引用

public partial class OWCdrawing : SystemWebUIPage

{

protected void Page_Load(object sender EventArgs e)

{

//连接数据库并获取特定字符串

string strSeriesName = 图例;

string ConnectString = Server=(local);DataBase=web;Uid=sa;Pwd=sa;

string Sql = SELECT monthAllcount FROM Chart;

SqlConnection myConn = new SqlConnection(ConnectString);

myConnOpen();

SqlDataAdapter Da = new SqlDataAdapter(Sql myConn);

DataSet ds = new DataSet();

DaFill(ds);

//存放月

string[] MonNum = new string[];

//存放数据

string[] MonCount = new string[];

//为数组赋值

for (int i = ; i < dsTables[]RowsCount; i++)

{

MonNum[i] = dsTables[]Rows[i][]ToString();

MonCount[i] = dsTables[]Rows[i][]ToString();

}

//为x轴指定特定字符串以便显示数据

string strXdata = StringEmpty;

foreach (string strData in MonNum)

{

strXdata += strData + \t;

}

string strYdata = StringEmpty;

//为y轴指定特定的字符串以便与x轴相对应

foreach (string strValue in MonCount)

{

strYdata += strValue + \t;

}

//创建ChartSpace对象来放置图表

ChartSpace laySpace = new ChartSpaceClass();

//在ChartSpace对象中添加图表

ChChart InsertChart = laySpaceChartsAdd();

//指定绘制图表的类型类型可以通过OWCChartChartTypeEnum枚举值得到

//InsertChartType = ChartChartTypeEnumchChartTypeLine;//折线图

//InsertChartType = ChartChartTypeEnumchChartTypeArea;//面积图

//InsertChartType = ChartChartTypeEnumchChartTypeBarClustered;//条形图

InsertChartType = ChartChartTypeEnumchChartTypeColumnClustered;//柱形图

//指定图表是否需要图例标注

InsertChartHasLegend = false;

InsertChartHasTitle = true;//为图表添加标题

InsertChartTitleCaption = 年清清月儿每个月花销流水账;//标题名称

//为xy轴添加图示说明

InsertChartAxes[]HasTitle = true;

InsertChartAxes[]TitleCaption = ;//月份

InsertChartAxes[]HasTitle = true;

InsertChartAxes[]ScalingSplitMinimum = ;

InsertChartAxes[]TitleCaption = 数量;

//添加一个series系列

InsertChartSeriesCollectionAdd();

//给定series系列的名字

InsertChartSeriesCollection[]SetData(ChartDimensionsEnumchDimSeriesNames +(int)ChartSpecialDataSourcesEnumchDataLiteral strSeriesName);

//给定分类

InsertChartSeriesCollection[]SetData(ChartDimensionsEnumchDimCategories +(int)ChartSpecialDataSourcesEnumchDataLiteral strXdata);

//给定值

InsertChartSeriesCollection[]SetData(ChartDimensionsEnumchDimValues (int)ChartSpecialDataSourcesEnumchDataLiteral strYdata);

//输出文件

string strAbsolutePath = (ServerMapPath()) + \\ShowDatagif <file:///\\showdatagif\>;

laySpaceExportPicture(strAbsolutePath GIF );

//创建GIF文件的相对路径

string strRelativePath = /ShowDatagif;

//把图片添加到placeholder中并在页面上显示

string strImageTag = <IMG SRC= + strRelativePath + />;

thisPlaceHolderControlsAdd(new LiteralControl(strImageTag));

}

数据库SQL脚本

USE [web]

/****** 对象: Table [dbo][Chart] ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

CREATE TABLE [dbo][Chart](

[id] [int] IDENTITY() NOT NULL

[month] [smallint] NULL

[Allcount] [int] NULL

) ON [PRIMARY]

在数据库建好表以后要自己手动假想有条数据手动添加最终结果类似下图

后台程序说明

最关键就是InsertChartType = ChartChartTypeEnumchChartTypeColumnClustered;

你可以在ChartChartTypeEnum后点出其他方法如图所示

下面列出的是其他类型图

折线图

面积图

条形图

OWC什么图形都可以画还能画立体的请大家自己尝试

可以参考OWC手册具体位置

C:\Program Files\Common Files\Microsoft Shared\Web Components\\\OWCVBACHM