本文講述如何繪製條形圖,折線圖,柱形圖,面積圖等常見圖形。
效果圖:
手把手教程:
原理:OWC是Office Web Compent的縮寫,即Microsoft的Office Web組件,它爲在Web中繪製圖形提供了靈活的同時也是最基本的機制。在一個intranet環境中,如果可以假設客戶機上存在特定的瀏覽器和一些功能強大的軟件(如IE6和Office 2000/XP/2003),那麼就有能力利用Office Web組件提供一個交互式圖形開發環境。這種模式下,客戶端工作站將在整個任務中分擔很大的比重。理論上說Excel能做的圖都可以通過OWC畫。
第一步:
右鍵點擊網站根目錄引用。如圖所示:
第二步:
點擊“添加引用”後彈出一個窗口,添加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; //添加數據操作引用
using Microsoft.Office.Interop.Owc11;//添加Office組件引用
public partial class OWCdrawing : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//連接數據庫並獲取特定字符串
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];
//存放數據
string[] MonCount = new string[12];
//爲數組賦值
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軸指定特定字符串,以便顯示數據
string strXdata = String.Empty;
foreach (string strData in MonNum)
{
strXdata += strData + "/t";
}
string strYdata = String.Empty;
//爲y軸指定特定的字符串,以便與x軸相對應
foreach (string strValue in MonCount)
{
strYdata += strValue + "/t";
}
//創建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;//柱形圖
//指定圖表是否需要圖例標註
InsertChart.HasLegend = false;
InsertChart.HasTitle = true;//爲圖表添加標題
InsertChart.Title.Caption = "2006年清清月兒每個月花銷流水賬";//標題名稱
//爲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 = "數量";
//添加一個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);
//創建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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>
數據庫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]
在數據庫建好表以後要自己手動假想有12條數據,手動添加,最終結果類似下圖:
後臺程序說明:
最關鍵就是InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;
你可以在ChartChartTypeEnum後點出其他方法。如圖所示:
下面列出的是其他類型圖:
折線圖:
面積圖:
條形圖:
OWC什麼圖形都可以畫,還能畫立體的,請大家自己嘗試。
可以參考OWC手冊,具體位置:
C:/Program Files/Common Files/Microsoft Shared/Web Components/11/2052/OWCVBA11.CHM