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

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.Collections; 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; using System.Web.UI.MobileControls;//添加Office组件引用 using System.Drawing; public partial class Chart_Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //连接数据库并获取特定字符串 string strSeriesName = "花销费用"; string ConnectString = "Server=(local);DataBase=TongJi;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); myConn.Close(); myConn.Dispose(); //存放月 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 ChartSpace(); //在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.Type = ChartChartTypeEnum.chChartTypeColumnClustered3D;//柱形图 //如果指定图表具有图例，则返回 True。Boolean 类型，可读写 InsertChart.HasLegend = true; //Interior.Color指定底部，后墙，侧墙三个面的颜色，设置了此属性的值，则再分别设置Floor，BackWall，SideWall三面墙颜色无效 //InsertChart.PlotArea.Interior.Color = "RoyalBlue";//Interior内部的，指定三面墙颜色都是yellow InsertChart.PlotArea.Interior.SetTwoColorGradient(ChartGradientStyleEnum.chGradientDiagonalDown, ChartGradientVariantEnum.chGradientVariantEnd, "DodgerBlue", "White");//LightSkyBlue也行 //Thickness返回或设置一个 Long 类型，指定三维图表中指定数据系列或曲面的厚度。 InsertChart.PlotArea.Floor.Thickness = 0;//Floor底部，底部厚度 InsertChart.PlotArea.BackWall.Thickness = 0;//BackWall后墙，后墙厚度 InsertChart.PlotArea.SideWall.Thickness = 0;//SideWall侧墙，侧墙厚度 //InsertChart.PlotArea.Floor.Interior.Color = "Chartreuse";//Floor底部，底部厚度 //InsertChart.PlotArea.BackWall.Interior.Color = "RoyalBlue";//BackWall后墙，底部厚度 //InsertChart.PlotArea.SideWall.Interior.Color = "YellowGreen";//SideWall侧墙，底部厚度 //返回或设置一个 Double 类型，表示指定三维图表的旋转角度。有效范围为 0 到 360。可读写。 //InsertChart.Rotation = 180.00; //返回或设置一个 Double 类型，表示指定三维图表的视图斜率。有效范围为 -90 到 90。可读写。 //InsertChart.Inclination = 00.00; //返回或设置一个 Double 类型，指定三维图表中从 90 度射出的光照量。有效范围为 0 到 1。可读写。 InsertChart.LightNormal = 1; //返回或设置一个 Double 类型，指定方向性光源相对于指定图表 X-Z 平面的旋转角度。有效设置范围为 -90 到 90。设置该属性为 -90 将光源置于图表正下方。设置该属性为 90 将光源置于图表的正上方。可读写 InsertChart.DirectionalLightInclination = 90; //返回或设置一个 Double 类型，指定照亮三维图表的环境照明百分比。有效设置范围为 0 到 1。可读写。 InsertChart.AmbientLightIntensity = 1; //返回或设置一个 Double 类型，指定方向性光源相对于指定图表 X-Z 平面的旋转角度。有效设置范围为 -90 到 90。设置该属性为 -90 将光源置于图表正下方。设置该属性为 90 将光源置于图表的正上方。可读写。 InsertChart.DirectionalLightInclination = 35; //回或设置一个 Double 类型，指定三维图表方向性光源的亮度。有效设置范围为 0 到 1。可读写。 InsertChart.DirectionalLightIntensity = 0.1; //回或设置一个 Double 类型，指定三维图表的方向性光源的旋转角度。有效设置范围为 0 到 360。可读写。 InsertChart.DirectionalLightRotation = 90; //以列宽百分比返回或设置相邻分类标志之间的间距。零值表示在相邻分类标志之间没有间距，而正值将创建间距。Long 类型，可读写。 InsertChart.GapWidth = 40;//柱形图宽 //返回或设置一个 Long 类型，指定三维图表中 Z 轴上相邻数据系列之间的间距量。有效范围为 0 到 500。可读写。 InsertChart.GapDepth = 20;//柱形图立体深度 //返回或设置一个 Long 类型，指定特定三维图表的高度与宽度之比。将该属性设置为大于 100 将得到高大于宽的图表，而设置为小于 100 将得到宽大于高的图表。有效设置范围为 0 到 500。可读写。 //InsertChart.AspectRatio = 80; //返回或设置一个 Long 类型，指定三维图表的透视系数值。如果图表的 ProjectionMode 属性设置为 chProjectionModeOrthographic，该属性无效。有效范围为 0 到 80。可读写。 InsertChart.Perspective = 80; //返回或设置一个 Long 类型，指定三维图表相对于宽度的深度。设置该属性为大于 100 的值将得到深大于宽的图表，而设置小于 100 的值将得到宽大于深的图表。有效设置范围为 0 到 500。可读写。 InsertChart.ChartDepth = 20; //返回或设置单个类别中标志之间的重叠量。正数导致标志重叠，负数导致标志分离。默认值为零 (0)，有效范围从 –100 到 100。Long 类型，可读写。 InsertChart.Overlap = 50; //返回或设置指定三维图表透视视图的 ChartProjectionModeEnum 常量。可读写 InsertChart.ProjectionMode = ChartProjectionModeEnum.chProjectionModeOrthographic; //返回或设置一个 Double 类型，指定三维图表的延伸方向。该属性仅在图表的 ProjectionMode 属性设置为 chProjectionModeOrthographic 时有效。有效值范围为 0 到 360。默认值为 45。可读写。 InsertChart.ExtrudeAngle = 45; //必须为圆环图此设置才有效，返回或设置指定圆环图的内径大小。内径大小必须为 0 到 90（默认值为 50）之间的值。Long 类型，可读写。 //InsertChart.HoleSize = 100; //为图表添加标题 InsertChart.HasTitle = true; //图标标题名称 InsertChart.Title.Caption = "2008年杨跃庭每个月花销流水账"; //为x,y轴添加图示说明 //如果指定图表或坐标轴具有标题，则返回 True。默认值为 False。Boolean 类型，可读写。 InsertChart.Axes[0].HasTitle = true;//Axes[0]代表横轴（分类轴） InsertChart.Axes[0].Title.Caption = "月份"; //如果指定图表或坐标轴具有标题，则返回 True。默认值为 False。Boolean 类型，可读写。 InsertChart.Axes[1].HasTitle = true;//Axes[1]代表竖轴（数值轴） InsertChart.Axes[1].Title.Caption = "数量"; //这句话是控制分割线的位置，如果不相显示可以把它注释掉 //InsertChart.Axes[1].Scaling.SplitMinimum = 200; //添加一个series系列,图表上所有 ChSeries 对象的集合。图表最多可以包含 256 个系列。 InsertChart.SeriesCollection.Add(0); //for(int i=0;i<12;i++) //{ // InsertChart.SeriesCollection[0].Points[i].Interior. //} //给series系列指定名字 InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimSeriesNames, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName); //给series系列分类 InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories, +(int)ChartSpecialDataSourcesEnum.chDataLiteral, strXdata); //给series系列值 InsertChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, strYdata); //给series系列颜色 InsertChart.SeriesCollection[0].Interior.Color = "GreenYellow"; InsertChart.SeriesCollection[0].Interior.SetTwoColorGradient(ChartGradientStyleEnum.chGradientDiagonalDown, ChartGradientVariantEnum.chGradientVariantEnd, "red", "Pink"); //输出文件. string strAbsolutePath = (Server.MapPath(".")) + "//ShowData.gif"; laySpace.ExportPicture(strAbsolutePath, "GIF", 800, 500); //创建GIF文件的相对路径. string strRelativePath = "./ShowData.gif"; //把图片添加到placeholder中，并在页面上显示 string strImageTag = ""; this.PlaceHolder1.Controls.Add(new LiteralControl(strImageTag)); } }

 

 

 

 

前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Chart_Default" %>

怎么样在ASP.NET2.0中使用OWC组件画图

 

数据库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