ASP.NET2.0轻松搞定统计图表

abcdef133

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

效果图：



手把手教程：

原理：OWC是Office   Web   Compent的缩写，即Microsoft的Office   Web组件，它为在Web中绘制图形提供了灵活的同时也是最基本的机制。在一个intranet环境中，如果可以假设客户机上存在特定的浏览器和一些功能强大的软件（如IE6和Office   2000/XP/2003），那么就有能力利用Office   Web组件提供一个交互式图形开发环境。这种模式下，客户端工作站将在整个任务中分担很大的比重。理论上说Excel能做的图都可以通过OWC画。

第一步：
右键点击网站根目录引用。如图所示：



第二步：
点击“添加引用”后弹出一个窗口，添加OWC的引用。如图所示：



点“确定”。

第三步：
代码中引用Microsoft.Office.Interop.Owc11。

全部代码
后台代码：

1. using System;
   
2. using System.Data;
   
3. using System.Configuration;
   
4. using System.Web;
   
5. using System.Web.Security;
   
6. using System.Web.UI;
   
7. using System.Web.UI.WebControls;
   
8. using System.Web.UI.WebControls.WebParts;
   
9. using System.Web.UI.HtmlControls;
   
10. 
    
11. using System.Data.SqlClient;   //添加数据操作引用
    
12. using Microsoft.Office.Interop.Owc11;//添加Office组件引用
    
13. 
    
14. public partial class OWCdrawing : System.Web.UI.Page
    
15. {
    
16.     protected void Page_Load(object sender, EventArgs e)
    
17.     {
    
18. 
    
19.         //连接数据库并获取特定字符串
    
20.         string strSeriesName = "图例1";
    
21.         string ConnectString = "Server=(local);DataBase=web;Uid=sa;Pwd=sa";
    
22.         string Sql = "SELECT month,Allcount FROM Chart";
    
23.         SqlConnection myConn = new SqlConnection(ConnectString);
    
24.         myConn.Open();
    
25.         SqlDataAdapter Da = new SqlDataAdapter(Sql, myConn);
    
26.         DataSet ds = new DataSet();
    
27.         Da.Fill(ds);
    
28. 
    
29.         //存放月
    
30.         string[] MonNum = new string[12];
    
31.         //存放数据
    
32.         string[] MonCount = new string[12];
    
33.         //为数组赋值
    
34.         for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
    
35.         {
    
36.             MonNum[i] = ds.Tables[0].Rows[i][0].ToString();
    
37.             MonCount[i] = ds.Tables[0].Rows[i][1].ToString();
    
38.         }
    
39.         //为x轴指定特定字符串，以便显示数据
    
40.         string strXdata = String.Empty;
    
41.         foreach (string strData in MonNum)
    
42.         {
    
43.             strXdata += strData + "\t";
    
44.         }
    
45.         string strYdata = String.Empty;
    
46.         //为y轴指定特定的字符串，以便与x轴相对应
    
47.         foreach (string strValue in MonCount)
    
48.         {
    
49.             strYdata += strValue + "\t";
    
50.         }
    
51. 
    
52.         //创建ChartSpace对象来放置图表
    
53.         ChartSpace laySpace = new ChartSpaceClass();
    
54. 
    
55.         //在ChartSpace对象中添加图表
    
56.         ChChart InsertChart = laySpace.Charts.Add(0);
    
57. 
    
58.         //指定绘制图表的类型。类型可以通过OWC.ChartChartTypeEnum枚举值得到
    
59.         //InsertChart.Type = ChartChartTypeEnum.chChartTypeLine;//折线图
    
60.         //InsertChart.Type = ChartChartTypeEnum.chChartTypeArea;//面积图
    
61.         //InsertChart.Type = ChartChartTypeEnum.chChartTypeBarClustered;//条形图
    
62.         InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;//柱形图
    
63. 
    
64. 
    
65. 
    
66.         //指定图表是否需要图例标注
    
67.         InsertChart.HasLegend = false;
    
68. 
    
69.         
    
70.         InsertChart.HasTitle = true;//为图表添加标题
    
71.         InsertChart.Title.Caption = "2006年清清月儿每个月花销流水账";//标题名称
    
72. 
    
73.         //为x,y轴添加图示说明
    
74.         InsertChart.Axes[0].HasTitle = true;
    
75.         InsertChart.Axes[0].Title.Caption = "";//月份
    
76.         InsertChart.Axes[1].HasTitle = true;
    
77.         InsertChart.Axes[1].Scaling.SplitMinimum = 200;
    
78.         InsertChart.Axes[1].Title.Caption = "数量";
    
79. 
    
80.         //添加一个series系列
    
81.         InsertChart.SeriesCollection.Add(0);
    
82. 
    
83.         //给定series系列的名字
    
84.         InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimSeriesNames, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);
    
85. 
    
86.         //给定分类
    
87.         InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strXdata);
    
88. 
    
89.         //给定值
    
90.         InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, strYdata);
    
91.         //输出文件.
    
92.         string strAbsolutePath = (Server.MapPath(".")) + "\\ShowData.gif";
    
93.         laySpace.ExportPicture(strAbsolutePath, "GIF", 400, 250);
    
94. 
    
95.         //创建GIF文件的相对路径.
    
96.         string strRelativePath = "./ShowData.gif";
    
97. 
    
98.         //把图片添加到placeholder中，并在页面上显示
    
99.         string strImageTag = "";
    
100.         this.PlaceHolder1.Controls.Add(new LiteralControl(strImageTag));
     
101.     }
     
102. }
     
103. 
     
104. 
     
105. 前台代码：
     
106. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="OWCdrawing.aspx.cs" Inherits="OWCdrawing" %>
     
107. 
     
108. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
109. 
     
110. 
     
111. 
     
112.     清清月儿[url]http://blog.csdn.net/21aspnet[/url]
     
113. 
     
114. 
     
115.    
     
116.    
     
117.         
     
118.             
     
119.                
     
120.                     怎么样在ASP.NET2.0中使用OWC组件画图
     
121.             
     
122.             
     
123.                
     
124.         
     
125.                
     
126.             
     
127.             
     
128.             
     
129.         
     
130.    
     
131.    
     
132.    
     
133. 
     
134. 
     
135. 
     
136. 
     
137. 数据库SQL脚本：
     
138. USE [web]
     
139. GO
     
140. /****** 对象:  Table [dbo].[Chart]    脚本日期: 03/27/2007 22:26:00 ******/
     
141. SET ANSI_NULLS ON
     
142. GO
     
143. SET QUOTED_IDENTIFIER ON
     
144. GO
     
145. CREATE TABLE [dbo].[Chart](
     
146. [id] [int] IDENTITY(1,1) NOT NULL,
     
147. [month] [smallint] NULL,
     
148. [Allcount] [int] NULL
     
149. ) ON [PRIMARY]

复制代码

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



后台程序说明：
最关键就是InsertChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;

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



下面列出的是其他类型图：

折线图：



面积图：



条形图：


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

可以参考OWC手册，具体位置：
C:\Program Files\Common Files\Microsoft Shared\Web Components\11\2052\OWCVBA11.CHM