MsChart图表格控件必懂教程
MsChart图报表控件必懂教程
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");
} 好的教程到此为止了，注释讲解尽在代码中，还位各位仔细阅读。