C#创建基本图表(Chart Controls)

Chart表格控件是 .netframework4.0之后才有的。所以在开发中请保持你使用的是4.0及以上版本。

首先一个Chart控件里面 可以有多个 ChartArea 每一个ChartArea 里面可以有自己的横轴和纵轴，可以有任意条线条。

1. 一个chart可以包含多个chartArea。 chartArea是具体的坐标区域。

2. 每一个chartArea主要包含X轴，Y轴，副X轴(上方)，副Y轴(右方)，绑定的线条，绑定的图例。

3. 线条可以有许多，只要将线条绑定到chartArea就可以在对应的chartArea显示。

4. 其树形实体结构如下所示： 对于每个实体里面的许多样式属性可以自行尝试研究。



图 1 Chart树形结构

chart控件的属性很多，主要用到Chart控件图表区域的属性有五个属性

1.Annotations ：批注集合（我没怎么用到，但是配置的话会在图标区域出现一些可以备注的东西吧）

2.ChartAreas： 图表区属性；主要设置图标数据的背景，比如3D或者隐藏还是显示横纵轴交叉线，分块颜色显示等

3.Lengends： 图表图例集合 主要设置图表边说明的一些东西，这次项目没什么用到，但是觉得这个基本没啥用，有什么说明一般都另外添加的，用不到自带的属性

4.Series ：图表序列属性，chart设置中基本大多数的设置都在这里了，用来设置数据的一下外观，数据类型（饼图，折线图，树状图等等）

5.Title： 图表标题集合，用来设置图表的标题

6.ToolTip：映射区：鼠标放在数据点上出现的小提示，建议用代码控制



图 2 Chart图例

主要内容

重要的是各种属性和方法的使用：

1.ChartAreas属性

ChartAreas属性指绘图区，一个控件可以有多个绘图区，比如我要在同一个控件内显示饼图和柱状图，肯定不能放在同一个ChartAreas区域内，应该在同一个Chart控件里增加两个ChartAreas并分别绑定Series对象。所以ChartAreas属性对应的是一个集合。

2.Series属性

Series属性就是各种图表的图形啦，比如我们要显示某月的天气变化，那么应该有这样两组数据，一组是天数，一组是每天对应的温度值，同时绑定到Series对象中，再将Series对象Add()到Chart控件的Series属性里即可。为了横向比较，例如我要看本月与上月的天气曲线变化图，并同时显示在同一个ChartAreas中，那该怎么办呢？很简单，再实例一个Series对象，将上月的天数数组与温度值数组绑定到一个新的Series2实例中，再将Series2实例Add()到Chart控件的Series属性里，此时，Chart控件的第一个绘图区ChartArea里就会有两条曲线。

3.Legends属性

Legend就是指一个图标的图例，当一个Series属性有多个Series时，或是一个Series有几组数据时，为了区分各自的颜色，通常每个Serie对象一种颜色，这就需要用到图例来指明哪个颜色的代表的是什么数据。如下图所示：

简单实践

以下是学习代码

public partial class Form1 : Form
{
Series mSeries = new Series();
Random r = new Random();
//存放y轴数据的数组链表
private List<int> DataL = new List<int>();
Timer DynaT = new Timer();
//图表区域
ChartArea chartarea = new ChartArea ();

public Form1()
{
InitializeComponent();
DynaT.Interval = 300;
DynaT.Tick += DynaT_Tick;
//数据数组
for (int i = 0; i < 40; i++)
{
DataL.Add(i);
}
creatchart();
}

void DynaT_Tick(object sender, EventArgs e)
{
DataL.RemoveAt(0);//移除链表第一个
int N =r.Next (50);
DataL.Insert(DataL.Count, N);
//绑定数据
mSeries.Points.DataBindY(DataL);
//重绘
chart1.Series.Invalidate ();
}
private void Form1_Load(object sender, EventArgs e)
{
DynaT.Start();
}

private void creatchart()
{
　　　　　　//图表设置
chartarea.AxisX.Interval = 2;
chartarea.AxisY.Interval = 2;
this.chart1.ChartAreas.Add(chartarea);

mSeries.ChartType = SeriesChartType.Spline;
mSeries.Points.DataBindY(DataL);

mLegend.Name = "随机数组";
mLegend.Docking = Docking.Right ;
mLegend.DockedToChartArea = chartarea.Name;//将图例放在所在表中
mLegend.IsDockedInsideChartArea = true ;

mSeries.LegendToolTip = "随机数据";// 鼠标放到系列上出现的文字
mSeries.LegendText = "随机数组";// 系列名字

mSeries.ChartArea = chartarea.Name ;
chart1.Series.Add(mSeries);
chart1.Legends.Add(mLegend);

//线属性设置
chart1.Series [0].IsValueShownAsLabel = true;//是否显示值
chart1.Series[0].MarkerStyle = MarkerStyle.Circle;//标记点形状
chart1.Series[0].MarkerSize = 10;//标记点大小
chart1.Series[0].MarkerColor = Color.Tomato;//标记点颜色
}
}

测试图例

图 3 测试范例

数据绑定

其余笔记：

其中绑定数据源，得到折线图的方法有两种。

1、读取数据库，得到数据集，绑定对应列得到折线图：

DataSet ds = 读取数据库;
DataView dv=new DataView(ds.Tables[0]);
this.chart1.Series[0].ChartType=SeriesChartType.Line;
this.chart1.Series[0].Points.DataBindXY(dv, "时间列列名",dv, "温度列列名");

//创建表，添加数据
DataTable dt = new DataTable();
dt.Columns.Add("月份");
dt.Columns.Add("数量");

//绑定表格数据
DataTable dt = default(DataTable);
dt = CreateDataTable();
//dt = GetTable();
//设置图表的数据源
//绑定数据
crtShow.DataBind();

//数据库操作
public DataTable GetTable()
{
//连接SQL数据库，绑定数据
string collectionstring = "server=(local);database=Wsbm_db;Trusted_Connection=SSPI";
SqlConnection conn = new SqlConnection(collectionstring);
SqlDataAdapter sad = new SqlDataAdapter("select * from grades ", conn);
DataSet ds = new DataSet();
sad.Fill(ds, "grades");
conn.Close();
return ds.Tables[0];
}

2、读取数据库，得到数据列表，绑定列表得到折线图：

List<DateTime> x = 读取数据库得到时间列表;
List<double> y = 读取数据库得到温度列表;
this.chart1.Series[0].ChartType=SeriesChartType.Line;
this.chart1.Series[0].Points.DataBindXY(x,y);