MsChart是微软.Net的控件来的，在VS2010中已经集成了，图标为：
，该控件在工具箱的数据栏中，支持WinForm和ASP.NET开发，对数据图形报表的显示提供了强力的支持，但是网上所提供的教程少之又少，而且微软本身提供的示例都是写死的，而我们实际开发中的数据是从数据库读取出来的，这样对于学习Chart就加大了难度，对此就有了本课程，希望能帮助到想学习和正在学习中的朋友，本教程如有不当之处，还请多多指证。
首先我们看一看MsChart能实现些什么样的效果吧：
好的，既然MsChart能实现这么炫丽强悍的图形效果，那么我们就进入正题吧：
首先我们看看MsChart的组成：
了解了基本的组成之后，我们就来实践一下吧，所谓实践出真知
，在此以ASP.NET来实现。
我们拖选MsChart的控件到页面上时生成的原始代码如下：
<asp:Chart ID="ChartDemo" runat="server"> <Series> <asp:Series Name="Series1"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart>
Series:图表集合，就是最终看到的饼图、柱状图、线图、点图等构成的集合；可以将多种相互兼容的类型放在一个绘图区域内，形成复合图。
ChartAreas:绘图区域，可以增加多个绘图区域，每个绘图区域包含独立的图表组、数据源，用于多个图表类型在一个绘图区显示。
好的我们先来做一个简单图表，效果如下：
代码实现如下：
<asp:Chart ID="Chart1" runat="server"> <Series> <asp:Series Name="Series1"> <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 AxisLabel="Warriors" YValues="3" /> </Points> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart>
其中Points是指在图形区的点集合，而DataPoint是指在点集合中创建数据点，AxisLabel指X轴标题，YValues是指Y轴数据的大小。
其中产生的效果图是默认类型图，即如上所看到的条形图。如果我们想要显示其它类型的图形只需要指定：ChartType属性即可，例如想显示为饼图，代码如下：<asp:Series Name="Series1" ChartType="Pie">。
有了以上的小基础，那么我们就来进入后台数据绑定阶段：
数据库准备：
1.前台的代码如下（和控件生成的原码没什么区别，只是改了个ID）：
<asp:Chart ID="ChartDemo" runat="server"> <Series> <asp:Series Name="Series1"> </asp:Series> </Series> <Legends></Legends> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas> </asp:Chart>2.后台的加载代码： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindChartInfo6();//下面的方法在这里调用就行了 } }好的，先看看下面具体实现代码实现的效果：
具体实现代码1-3的效果如下，只是它们的绑定方式不一样：
具体实现代码4实现的效果如下：
具体实现代码5实现的效果如下：
具体实现代码6实现的效果如下：
3.具体实现代码1：
/// <summary> /// 绑定图形方法 /// </summary> protected void BindChartInfo1() { //据源中只有两列Name和Sales,因此在调用Chart1.DataBindTable方法的时候 //告诉了图表X轴的名称为Name,因此自动将Sales设置为Y轴的数据了 string sql = "select Name,Sales from reps"; SqlDataReader reader = DBHelper.ExecuteReader(CommandType.Text, sql); this.ChartDemo.DataBindTable(reader, "Name"); }具体实现代码2（只需在load方法中调用就行了，下面不在赘述）：/// <summary> /// 绑定图形方法二 /// </summary> protected void BindChartInfo2() { string sql = "select Name, Sales from reps"; SqlDataReader reader = DBHelper.ExecuteReader(CommandType.Text, sql); //指定X,Y轴绑定的数据 ChartDemo.Series["Series1"].Points.DataBindXY(reader, "Name", reader, "Sales"); }具体实现代码3： /// <summary> /// 绑定方法三 /// </summary> protected void BindChartInfo3() { string sql = "select Name, Sales from reps"; SqlDataReader reader = DBHelper.ExecuteReader(CommandType.Text, sql); this.ChartDemo.DataSource = reader; // 分别设置图表的X值和Y值 //Series[]括号中可以用索引表示,与前台的Series的Name名字对应 this.ChartDemo.Series["Series1"].XValueMember = "Name";//指定X轴数据 this.ChartDemo.Series["Series1"].YValueMembers = "Sales";//指定Y轴数据 // 绑定设置的数据 this.ChartDemo.DataBind(); }具体实现代码4：/// <summary> /// 绑定方法四 /// </summary> protected void BindChartInfo4() { string sql = "select Id,Name, Sales from reps"; SqlDataReader reader = DBHelper.ExecuteReader(CommandType.Text, sql); this.ChartDemo.Series[0].MarkerStyle = MarkerStyle.Circle;//线条上的数据点标志类型 this.ChartDemo.Series[0].MarkerSize = 8;//标志大小 ChartDemo.Series["Series1"].Label = "#VAL";//#VAL是Label和Tooltip的通配符，表示取默认Y轴变量的意思 //DataBind(数据源，X轴数据，Y轴数据，“”) ChartDemo.Series["Series1"].Points.DataBind(reader, "Name", "Sales", ""); }具体实现代码5： /// <summary> /// 绑定方法五 /// </summary> protected void BindChartInfo5() { string sql = "select Id,Name, Sales from reps"; SqlDataReader reader = DBHelper.ExecuteReader(CommandType.Text, sql); IList<REPS> list = new List<REPS>(); REPS reps = null; if (reader.HasRows) { while (reader.Read()) { reps = new REPS(); reps.Id = Convert.ToInt32(reader["Id"]); reps.Name = Convert.ToString(reader["Name"]); reps.Sales = Convert.ToInt32(reader["Sales"]); list.Add(reps); } } //数值显示百分比形式 this.ChartDemo.Series["Series1"].Label = "#PERCENT{P}"; //DataBind(数据源，X轴数据，Y轴数据，其它显示属性) this.ChartDemo.Series["Series1"].Points.DataBind(list, "Name", "Sales", "LegendText=Name,YValues=Sales,ToolTip=Sales"); //显示图表类型：pie饼图 this.ChartDemo.Series["Series1"].ChartType = SeriesChartType.Pie; //设置字体 this.ChartDemo.Series["Series1"].Font = new Font("Trebuchet MS", 8, FontStyle.Regular); //显示提示,标放置到节点上自动提示功能 this.ChartDemo.Series["Series1"].ToolTip = "#LEGENDTEXT: #VAL{C} million"; //设置调色板样式 this.ChartDemo.Series[0].Palette = ChartColorPalette.Bright; //显示3D样式 this.ChartDemo.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; }具体实现代码6： /// <summary> /// 绑定方法六 /// </summary> protected void BindChartInfo6() { string sql = "SELECT Id, Name, RegionID, Sales FROM REPS"; SqlDataReader reader = DBHelper.ExecuteReader(CommandType.Text, sql); this.ChartDemo.Width = 600;//设置图表宽度 this.ChartDemo.Height = 400;//设置图表高度 this.ChartDemo.BackColor = Color.Azure;//图表背景色 this.ChartDemo.Titles.Add("图表测试标题");//图表标题 //this.ChartDemo.Series[0].IsValueShownAsLabel = true;//是否显示数据 //this.ChartDemo.Series[0].IsVisibleInLegend = false;//是否显示数据说明 this.ChartDemo.Series[0].MarkerStyle = MarkerStyle.Circle;//线条上的数据点标志类型 this.ChartDemo.Series[0].MarkerSize = 8;//标志大小 this.ChartDemo.ChartAreas[0].AxisX.LineColor = Color.Blue;//X轴颜色 this.ChartDemo.ChartAreas[0].AxisY.LineColor = Color.Blue;//Y轴颜色 this.ChartDemo.ChartAreas[0].AxisX.LineWidth = 2;//X轴宽度 this.ChartDemo.ChartAreas[0].AxisY.LineWidth = 2;//Y轴宽度 this.ChartDemo.ChartAreas[0].AxisY.Title = "Y轴标题";//Y轴标题 this.ChartDemo.Series[0].ChartType = SeriesChartType.RangeColumn;//设置图表的类型,线图，饼图,RangeColumn等等 //是否启用3D显示 this.ChartDemo.ChartAreas[0].Area3DStyle.Enable3D = true; this.ChartDemo.ChartAreas[0].AxisY.Interval = 7000;//设置Y轴的轴刻度间隔大小 this.ChartDemo.Series[0].Palette = ChartColorPalette.SemiTransparent;//设置调色板样式 this.ChartDemo.Series["Series1"].Label = "#PERCENT{P}"; this.ChartDemo.Series["Series1"].ToolTip = "#LEGENDTEXT: #VAL{C} million"; //如果x 轴坐标过多，会显示不全,我们只需要设置横坐标的间隔和偏移都设为1就行了，代码解决如下： this.ChartDemo.ChartAreas[0].AxisX.Interval = 1; this.ChartDemo.ChartAreas[0].AxisX.IntervalOffset = 1; this.ChartDemo.ChartAreas[0].AxisX.LabelStyle.IsStaggered = true; //ChartDemo.Series["Series1"].Label = "#VAL";//#VAL是Label和Tooltip的通配符，表示取默认Y轴变量的意思 //DataBind(数据源，X轴数据，Y轴数据，其它显示属性) ChartDemo.Series["Series1"].Points.DataBind(reader, "Name", "Sales", "Label=Sales,ToolTip=Sales"); } 好的教程到此为止了，注释讲解尽在代码中，还位各位仔细阅读。