微软Chart控件导学--从头开始

  微软在.NET 3.5的时候出了一个Chart控件，但是那时候要单独安装才可以使用，在.NET 4.0中，微软将这个控件集成到了Visual Studio 2010中，现在可是大大的提高了.NET做报表的能力，是一个非常有用的控件。呵呵，越有用的东西用起来就越不容易，这几天在研究这个东西，就把自己所学到的东西大家分享一下。

一．.NET 3.5控件的下载安装。

该图表控件支持多种图表，如饼图，柱状图，曲线图，散点图，雷达图，面积图，股票图等，同时支持Winform和Asp.net。 该控件只能用在.Net Framework 3.5和4.0上。据说在.NET 2.0上也是有的，但是要花钱，呵呵。

这个就不多说了，给一下下载的链接：

控件：Microsoft .NET Framework 3.5 的 Microsoft 图表控件(Microsoft Chart Controls for Microsoft .NET Framework 3.5)

包含英文版，中文版。上面提供的链接是中文版的，可以更改为英文版。

文档 ：Microsoft Chart Controls for .NET Framework Documentation

这个只有英文的，没找到中文的。只是些函数的API，只要英文好一点很有用处。

这个据说安装后还要配制什么的，没有用过，自己也不太清楚，想用的可以去网上找些资料。

二．.NET 4.0 Chart控件使用基础

新建一个ASP.NET的网站后，在工具栏中的Data分类中，就会出现一个Chart控件，和其他控件一样，你可以把它拖到页面上，就可以添加一个“图表”了。

生成的代码如下：

<asp:Chart ID="Chart1" runat="server"> <Series> <asp:Series Name="Series1"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart> 

                代码段1

 

 

2.1Chart控件组成

 

由上面的代码段可以清楚的看到，Chart控件由Series（数据列）和ChartArea（成图区域）两部分组成（这两部分的命名是自己的理解，现在还没有在网上看到中文的命名）。这两部分都是可以有一个或者多个的，例如当一个“图表”中要画多条曲线的时候我们就可能会用到多个“数据列”，并且把多个数据列的ChartArea属性设置为指定的“成图区域”。当我们想在一个“图表”中分区域多形式的显示一种或多种数据的时候，我们就需要多个ChartArea了。（从XML元素的命名也是可以看出这一点的，要不然在<asp:Series>和<asp:ChartArea>前面就不会再有一层复数的XML标签了。）

对于简单的图表，我们只用默认的样式就足够了，所以可以不用对ChartArea进行太多的修改，只要在“数据列”中添加一定数量的点就可以成图了，相当简单。

2.2向Chart中添加数据点

方法一：用XML在设计时直接添加数据点。

先找一个例子，下面的例子是NBA几个队伍胜利的场数据的“图表”，代码如下：

<asp:Chart ID="Chart1" runat="server"> <Series> <asp:Series Name="Series1" YValuesPerPoint="4"> <Points> <asp:DataPoint AxisLabel="Celtics" YValues="17" /> <asp:DataPoint AxisLabel="Lakers" YValues="15" /> <asp:DataPoint AxisLabel="Bulls" YValues="6" /> <asp:DataPoint AxisLabel="Spurs" YValues="4" /> <asp:DataPoint AxisLabel="76ers" YValues="3" /> <asp:DataPoint AxisLabel="Pistons" YValues="3" /> <asp:DataPoint AxisL对abel="Warriors" YValues="3" /> </Points> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart>

                        代码段2

生成的图表如下所示：

           图表1

 

对几个重要的属性解释如下：

AxisLabel：当X轴没有值时可以设置这个值，会在X轴上生成一些文字，效果就如上面所示。

XValue：这个更容易理解，一个点的X坐标值。

YValues：一般情况下只用一个YValue就可以生成图表了，但是在某些情况下要两个甚至多个值，多个值是只有当图表类型为bubble, candlestick和stock时才有意义。

方法二：在程序运行时动态添加数据点。

下面是代码段：

protected void Page_Load(object sender, EventArgs e) { System.Web.UI.DataVisualization.Charting.Chart chart1 = new System.Web.UI.DataVisualization.Charting.Chart(); var serial1 = chart1.Series.Add("serial"); serial1.Points.AddXY("Celtics", 17); serial1.Points.AddXY("Lakers", 15); serial1.Points.AddXY("Bulls", 6); serial1.Points.AddXY("Spurs", 4); serial1.Points.AddXY("76ers", 3); serial1.Points.AddXY("Pistons", 3); serial1.Points.AddXY("Warriors", 3); var chartarea = chart1.ChartAreas.Add("default"); serial1.ChartArea = "default"; form1.Controls.Add(chart1); chart1.Visible = true; }

                                        代码段3

 

 

  生成的图形还是上面那个，就不多说了。和上面用XML生成图表结构是一样，但注意最后要加入form1中，否则无法显示。

 

上面的两个例子是比较极端的，在实际应用时最多的是两种方法的结合。一般情况下我们知道哪里要有一个报表，但是其中的数据是动态的，所以可以在设计时用XML生成一部分的图表（无数据的图表），然后在程序中填充数据。

有人会觉得用程序来添加点是一件很麻烦的事，事实上也并不是太麻烦，在实际应用时多是在循环中使用加点的动作，所以可以很快的生成大量的点。

方法三：数据绑定。

在很多的情况下，我们都面临着这样一种情况，那就是从数据库中读取数据然后再生成图表。更普遍的是我们将数组中的数据拿出来成图尽管可以用上面的方法实现，但是如果能让自己的程序更简单那么何乐而不为呢？

首先向页面中添加一个Chart图表：代码段如上面的代码段一所示。

然后我们连接NorthWind数据库（没有这个数据库可以去下一个，实在不想下自己编点数据也行），然后用DataBindTable来进行绑定。代码段如下所示：

 

protected void Page_Load(object sender, EventArgs e) { SqlConnection cn = new SqlConnection(); cn.ConnectionString = @"Data Source=GERENLEI/SQLEXPRESS;Initial Catalog=Northwind;Integrated Security=True"; SqlCommand cmd=cn.CreateCommand(); cmd.CommandText="SELECT CategoryName, COUNT(*) as ProductCount FROM Products p INNER JOIN Categories c ON c.CategoryID = p.CategoryID GROUP BY CategoryName ORDER BY CategoryName"; cn.Open(); SqlDataReader dr = cmd.ExecuteReader(); Chart1.DataBindTable(dr,"CategoryName"); dr.Close(); cn.Close(); }

这样就生成了下面的这个表：（数据和文字是正常的，但是让我不明白的是颜色是橙色的，以前的默认色不是蓝色嘛！！！）。

上面的DataBindTable函数有两个重载，具体的情况可以参照文档，第一个变量不一定要是SQLDataReader，只要实现了IEnumerable接口就行了。对于数组元素的绑定，在下一节的教程中再做详述。

 

还有一种绑定方式就是:

Chart1.Series("Series1").XValueMember = "CategoryName" ;

Chart1.Series("Series1").YValueMembers = "ProductCount" ;

 

Chart1.DataSource = myReader ;

Chart1.DataBind();

用DataSource和DataBindTable的不同就在于用DataSource还要进一步的指定X和Y轴所对应的值。

现在我们就可以很轻松的做出一个符合自己心意的图表了吧。

 

 

想说这个是自己原创的有点不太好意思，想说这个是翻译自己又做了好多自己的工作在里面，而且以前是针对.NET 3.5的，但是.NET 3.5和4.0对本文没有太大的影响，把参考的文章也放出来：

Using Microsoft's Chart Controls In An ASP.NET Application: Getting Started