ASP.NET2.0輕鬆搞定統計圖表

本文講述如何繪製條形圖折線圖柱形圖面積圖等常見圖形。

效果圖

手把手教程:

原理: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 

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章