本文講述如何繪制條形圖,折線圖,柱形圖,面積圖等常見圖形。
效果圖:

手把手教程:
原理:OWC是Office Web Compent的縮寫,即Microsoft的Office Web組件,它為在Web中繪制圖形提供了靈活的同時也是最基本的機制。在一個intranet環(huán)境中,如果可以假設(shè)客戶機上存在特定的瀏覽器和一些功能強大的軟件(如IE6和Office 2000/XP/2003),那么就有能力利用Office Web組件提供一個交互式圖形開發(fā)環(huán)境。這種模式下,客戶端工作站將在整個任務(wù)中分擔(dān)很大的比重。理論上說Excel能做的圖都可以通過OWC畫。
第一步:
右鍵點擊網(wǎng)站根目錄引用。如圖所示:

第二步:
點擊“添加引用”后彈出一個窗口,添加OWC的引用。如圖所示:

點“確定”。
第三步:
代碼中引用Microsoft.Office.Interop.Owc11。
全部代碼
后臺代碼:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient; //添加數(shù)據(jù)操作引用
using Microsoft.Office.Interop.Owc11;//添加Office組件引用
public partial class OWCdrawing : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//連接數(shù)據(jù)庫并獲取特定字符串
string strSeriesName = "圖例1";
string ConnectString = "Server=(local);DataBase=web;Uid=sa;Pwd=sa";
string Sql = "SELECT month,Allcount FROM Chart";
SqlConnection myConn = new SqlConnection(ConnectString);
myConn.Open();
SqlDataAdapter Da = new SqlDataAdapter(Sql, myConn);
DataSet ds = new DataSet();
Da.Fill(ds);
//存放月
string[] MonNum = new string[12];
//存放數(shù)據(jù)
string[] MonCount = new string[12];
//為數(shù)組賦值
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
MonNum[i] = ds.Tables[0].Rows[i][0].ToString();
MonCount[i] = ds.Tables[0].Rows[i][1].ToString();
}
//為x軸指定特定字符串,以便顯示數(shù)據(jù)
string strXdata = String.Empty;
foreach (string strData in MonNum)
{
strXdata += strData + "\t";
}
string strYdata = String.Empty;
//為y軸指定特定的字符串,以便與x軸相對應(yīng)
foreach (string strValue in MonCount)
{
strYdata += strValue + "\t";
}
//創(chuàng)建ChartSpace對象來放置圖表
ChartSpace laySpace = new ChartSpaceClass();
//在ChartSpace對象中添加圖表
ChChart InsertChart = laySpace.Charts.Add(0);
//指定繪制圖表的類型。類型可以通過OWC.ChartChartTypeEnum枚舉值得到
//InsertChart.Type = ChartChartTypeEnum.chChartTypeLine;//折線圖
//InsertChart.Type = ChartChartTypeEnum.chChartTypeArea;//面積圖
//InsertChart.Type = ChartChartTypeEnum.chChartTypeBarClustered;//條形圖
InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;//柱形圖
//指定圖表是否需要圖例標(biāo)注
InsertChart.HasLegend = false;
InsertChart.HasTitle = true;//為圖表添加標(biāo)題
InsertChart.Title.Caption = "2006年清清月兒每個月花銷流水賬";//標(biāo)題名稱
//為x,y軸添加圖示說明
InsertChart.Axes[0].HasTitle = true;
InsertChart.Axes[0].Title.Caption = "";//月份
InsertChart.Axes[1].HasTitle = true;
InsertChart.Axes[1].Scaling.SplitMinimum = 200;
InsertChart.Axes[1].Title.Caption = "數(shù)量";
//添加一個series系列
InsertChart.SeriesCollection.Add(0);
//給定series系列的名字
InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimSeriesNames, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);
//給定分類
InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strXdata);
//給定值
InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, strYdata);
//輸出文件.
string strAbsolutePath = (Server.MapPath(".")) + "\\ShowData.gif";
laySpace.ExportPicture(strAbsolutePath, "GIF", 400, 250);
//創(chuàng)建GIF文件的相對路徑.
string strRelativePath = "./ShowData.gif";
//把圖片添加到placeholder中,并在頁面上顯示
string strImageTag = "<IMG SRC=‘" + strRelativePath + "‘/>";
this.PlaceHolder1.Controls.Add(new LiteralControl(strImageTag));
}
}
前臺代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OWCdrawing.aspx.cs" Inherits="OWCdrawing" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" >
<head runat="server">
<title>清清月兒
http://blog.csdn.net/21aspnet</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: left">
<table style="width: 600px">
<tr>
<td colspan="3" style="height: 20px">
<strong>怎么樣在ASP.NET2.0中使用OWC組件畫圖</strong></td>
</tr>
<tr>
<td colspan="3" rowspan="2" style="height: 21px">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</td>
</tr>
<tr>
</tr>
</table>
</div>
</form>
</body>
</html>
數(shù)據(jù)庫SQL腳本:
USE [web]
GO
/****** 對象: Table [dbo].[Chart] 腳本日期: 03/27/2007 22:26:00 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Chart](
[id] [int] IDENTITY(1,1) NOT NULL,
[month] [smallint] NULL,
[Allcount] [int] NULL
) ON [PRIMARY]
在數(shù)據(jù)庫建好表以后要自己手動假想有12條數(shù)據(jù),手動添加,最終結(jié)果類似下圖:

后臺程序說明:
最關(guān)鍵就是InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;
你可以在ChartChartTypeEnum后點出其他方法。如圖所示:

下面列出的是其他類型圖:
折線圖:

面積圖:

條形圖:

OWC什么圖形都可以畫,還能畫立體的,請大家自己嘗試。
可以參考OWC手冊,具體位置:
C:\Program Files\Common Files\Microsoft Shared\Web Components\11\2052\OWCVBA11.CHM