mschart控件使用详解

 

本来在考虑是否继续写图表 控件 的使用文章,毕竟,微软自带的例子已经非常详细了,花点时间参考一下基本上可以了解用法和使用特性,不过后来想想,还是写一下咯,抽出其中大家关心的内容,写出其中常用的使用方法,可以省去大家的时间,在需要深入的时候再去详细查看例子,也当是学习笔记 吧:)(BTW:我也是边学习边写的,因此,写的文章中难免有不足或失误的地方,希望各位朋友指正出来咯,大家一起提高~本文中基本上只会写出最简单常用的功能,复杂的数据操作请参考微软详细的例程)

一 . 数据源    

　　说到绘制图表,可能很多人的第一反应除了是图表呈现的方式外,更关心的便是数据如何添加,记得在很多年前,哪时要绘制一个数据曲线图,一直找不到好的呈现方式,后来使用了SVG的绘图模式,不过在添加数据的时候可谓吃尽了苦头,毕竟,SVG只是一种描述语言 ,要动态的实现一个图表的绘制,是非常困难的.对于微软的图表控件,数据添加是一件很简单的方式,它支持多种数据添加方式,如:

·         可以在图表的设计界面,在属性设置窗口中的Series属性下的Points中添加需要的数据.

·         可以在图表的设计界面中,在属性中绑定一个数据源.

·         可以在后台代码中,动态添加数据.

·         可以在后台代码中设置一个或多个数据源,直接绑定到图表中.

　　在此处,我只着重讲解一下第3,4两点.对于第3点,相对来说比较简单,在后台代码中,找到要添加代码的Series,通过它下面Points的Add、AddXY、AddY等方法,即可以实现数据的添加.例如:

1.    double t;

2.                for(t = 0; t <= (2.5 * Math.PI); t += Math.PI/6)

3.                {

4.                    double ch1 = Math.Sin(t);

5.                    double ch2 = Math.Sin(t-Math.PI/2);

6.                    Chart1.Series["Channel 1"].Points.AddXY(t, ch1);

7.                    Chart1.Series["Channel 2"].Points.AddXY(t, ch2);

8.                }

复制代码

注：代码摘自微软的例子，上例中，Chart1为图表的名字，Channel 1、Channel 2分别表示两个Series数据序列)
二 . 绑定数据
      先来看看图表控件都支持什么类型的数据绑定，根据官方文档的说法，只要是实现了IEnumerable接口 的数据类型，都可以绑定到图表控件中，例如：DataView, DataReader, DataSet, DataRow, DataColumn, Array, List, SqlCommand, OleDbCommand, SqlDataAdapter, 及OleDbDataAdapter对象。

      对于开发来说，最常用的还是DataView、DataReader、DataSet、DataRow、Array、List这几种类型了，有几点需要注意一下：

·         图表控件支持多数据源的绑定，例如：X轴绑定一个数据集ds1,Y轴可以绑定另一个数据集ds2，当然也可以是X轴绑定到一个List数据对象，Y轴绑定到一个DataView对象等等。

·         图表控件的绑定方式一般有两种，常规绑定及交差表的绑定。

·         图表控件的Y轴数据，支持一次绑定多个值，以绘制时间、区域、使用量等之类的图形。

　　绑定数据的流程如下：

2008111015142478.png (44.03 K)

2008-11-10 22:19:03

 大意是，绑定数据里面是否有分组数据需要绑定，如果有，则调用交叉表绑定的方法。否则判断是否时绑定X轴和Y轴（包括标签、超链接、图例文字等自定义属性），如果是，则调用Points.DataBind方法进行绑定操作。再判断是否有不同的X轴或Y轴数据，如果有，则分别调用X,Y轴的绑定方法 Points.DataBindX，Points.DataBindY进行数据绑定。最后，再判断是否需要进行多个Y轴值的绑定。

    下面分别对几种数据绑定的方法进行一下说明：
1. 绑定一张数据表
　　绑定一张数据表，例如绑定一张普通的数据表,表数据如下: 2008-11-10_214947.gif (3.24 K)

2008-11-10 22:19:03

绑定方法的代码:

1.    string mySelectQuery="SELECT Name, Sales FROM REPS;";

2.    OleDbConnection myConnection = new OleDbConnection(myConnectionString);

3.    OleDbCommand myCommand = new OleDbCommand(mySelectQuery, myConnection);

4.    myCommand.Connection.Open();

5.    OleDbDataReader myReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);

6.    Chart1.DataBindTable(myReader, "Name");

7.    myReader.Close();

8.    myConnection.Close();

复制代码

因为数据源中只有两列Name和Sales,因此在调用Chart1.DataBindTable方法的时候,告诉了图表X轴的名称为Name,因此自动将Sales设置为Y轴的数据了.生成的图形如下: 2008111015495258.png (17.71 K)

2008-11-10 22:19:03

如果修改一下Sql语句为:SELECT Name,ID,RegionID FROM REPS;其它都不变化,再看看图表是如何处理另外两个字段的,生成的图表如下: 2008111015513437.png (16.09 K)

2008-11-10 22:19:03

此时,图表自动将ID,RegionID字段当成了Y值,生成了两个Series，因此每个用户都有两个值,生成的图形也有两个柱状图.
上面是一种动态绑定的方式,有人可能会问了,如果我想确定我要绑定的列,比如:X轴绑定某个字段,Y轴绑定某个字段如何操作呢?对于这种绑定,有几种方法可以实现.
第一种:这种方法可能是很常见的,在原来的.NET编程中出现的机率非常之高,方法如下:

1.    // 设置数据源,myDv是一个取出数据集的DataView

2.        chart1.DataSource = myDv;

3.     

4.        // 分别设置图表的X值和Y值

5.        chart1.Series["Series1"].XValueMember = "Name";

6.        chart1.Series["Series1"].YValueMembers = "Sales";

7.     

8.        // 绑定设置的数据

9.        chart1.DataBind();

复制代码

第二种:即直接调用点的绑定方法

1.    //myReader为取得的DataReader对象

2.    Chart1.Series["Series1"].Points.DataBindXY(myReader, "Name", myReader, "Sales");

复制代码

第三种:调用DataBind的方法实现

1.    Chart1.Series["Series1"].Points.DataBind(myReader, "Name", "Sales", "");

上面几种方法得到的效果都是一样的.当然了，上面三种方法需要自己建立Series，要显示两个柱状图，像上面的例子中的图形，那么得手动建立两个Series，然后分别进行上面的绑定操作。
此处说一下Label和Tooltip的绑定方式,要在绑定的图表中显示标签(Label)及提示(Tooltip),可以在绑定的时候,设置绑定的属性. 对于上面的第一、二种方法，可以调用如下的方法来设置Label和Tooltip；例如，两个数据序列名称分别为Series1和Series2，设置代码如下：

1.    Chart1.Series["Series1"].Label = "#VAL";

2.                Chart1.Series["Series1"].Points.DataBind(myDs.Tables[0].DefaultView, "Name", "ID", "");

3.                Chart1.Series["Series2"].Label = "#VAL";

4.                Chart1.Series["Series2"].Points.DataBind(myDs.Tables[0].DefaultView, "Name", "RegionID", "");

其中的#VAL是Label和Tooltip的通配符，表示取默认Y轴变量的意思。具体的详细操作可以参考例程：Chart Features/Labels下面的内容。以后有空我也写一篇Label的和其它变量的设置吧。
对于第三种调用的绑定则稍微不同，如下：

1.    Chart1.Series["Series1"].Points.DataBind(myDs.Tables[0].DefaultView, "Name", "ID", "Label=ID,ToolTip=RegionID");

2.                Chart1.Series["Series2"].Points.DataBind(myDs.Tables[0].DefaultView, "Name", "RegionID", "Label=RegionID,ToolTip=ID");

其实就是利用第三个属性，通过格式化的字符串来设置绑定属性，Label表示标签，ToolTip表示提示信息，Url表示超链接等等。最后生成的图片如下：
2. 绑定一个交叉表
　　微软的图表控件提供了一个交叉表数据的绑定方法DataBindCrossTable，它可以根据数据动态的生成数据序列（Series），借用官方的例子，数据库的表数据如下：

我们先看看DataBindCrossTable的参数，它有两个重载方法，分别是：

1.    public void DataBindCrossTable (

2.    IEnumerable dataSource,

3.    string seriesGroupByField,

4.    string xField,

5.    string yFields,

6.    string otherFields,

7.    PointSortOrder sortingOrder

8.    )

以及

1.    public void DataBindCrossTable (

2.    IEnumerable dataSource,

3.    string seriesGroupByField,

4.    string xField,

5.    string yFields,

6.    string otherFields

7.    )

每个参数的含义如下：
dataSource
要绑定的数据源.
seriesGroupByField
要分组统计的数据字段名称，例如按姓名、日期等.
xField
X轴绑定的字段名称.
yFields
Y轴绑定的字段名称，如果需要绑定多个字段，则用逗号将字段名分开.
otherFields
其它数据字段属性，就是上面刚讲的，标签、提示、Url等属性.
sortingOrder
设置数据是正确还是逆序排列.
　　此时要以统计每个用户的年销售曲线，那么分组统计的字段名应该设置为Name，如下：

1.    Chart1.DataBindCrossTable(

2.                    myReader,

3.                    "Name",

4.                    "Year" ,

5.                    "Sales",

6.                    "Label=Commissions{C}");

用如上的方法绑定，生成的图形如下：相反，如果要统计用户每年的曲线，则将字段反转一下即可，如下：

1.    Chart1.DataBindCrossTable(

2.                    myReader,

3.                    "Year",

4.                    "Name",

5.                    "Sales",

6.                    "Label=Commissions{C}");

　　这次就先说到这里咯，说几个需要注意的地方：
在进行Y轴数据绑定的时候，如果要绑定多个字段，默认情况会出错，那是因为需要设置Y轴的可保存值数量，设置为你需要保存的数量即可，设置的地点在：Series-》YValuesPrePoint，设置为你需要显示的个数即可。
在进行DataTable绑定的时候，Label、ToolTip等属性的字段格式化比较困难（otherFields 属性），我试了半天，也就试出了一次只能绑定一个字段，因为是和数据集绑定，如果要在标签上增加文字的话，可以使用:Field{xxxx#xxxx}，其中#会替换为相应的文字，例如：Field的值为45，那么最后的呈现的结果就是：xxxx45XXXX.
　　BTW:有很多东西我自己也在研究中，因此说得不是很完善，希望大家一起研究吧~下次再研究一下数据操作方面的东东以及标签等的显示。（文/ shuncy ）

（ 1 ）介绍 MSChart 的常用属性和事件

1.   
M SChart的元素组成
 

2.   
最常用的属性包括

1.   
ChartAreas：增加多个绘图区域，每个绘图区域包含独立的图表组、数据源，用于多个图表类型在一个绘图区不兼容时。

1.   
AlignmentOrientation：图表区对齐方向，定义两个绘图区域间的对齐方式。

2.   
AlignmentStyle：图表区对齐类型，定义图表间用以对其的元素。

3.   
AlignWithChartArea：参照对齐的绘图区名称。

4.   
InnerPlotPosition：图表在绘图区内的位置属性。

1.   
Auto：是否自动对齐。

2.   
Height：图表在绘图区内的高度（百分比，取值在0-100 ）

3.   
Width：图表在绘图区内的宽度（百分比，取值在0-100 ）

4.   
X,Y：图表在绘图区内左上角坐标

5.   
Position：绘图区位置属性，同InnerPlotPosition。

6.   
Name：绘图区名称。

7.   
Axis：坐标轴集合

1.   
Title：坐标轴标题

2.   
TitleAlignment：坐标轴标题对齐方式

3.   
Interval：轴刻度间隔大小

4.   
IntervalOffset：轴刻度偏移量大小

5.   
MinorGrid：次要辅助线

6.   
MinorTickMark：次要刻度线

7.   
MajorGrid：主要辅助线

8.   
MajorTickMark：主要刻度线

2.   
DataSourceID：MSChart的数据源。

3.   
Legends：图例说明。

4.   
Palette：图表外观定义。

5.   
Series：最重要的属性，图表集合，就是最终看到的饼图、柱状图、线图、点图等构成的集合；可以将多种相互兼容的类型放在一个绘图区域内，形成复合图。

1.   
IsValueShownAsLabel：是否显示数据点标签，如果为true，在图表中显示每一个数据值

2.   
Label：数据点标签文本

3.   
LabelFormat：数据点标签文本格式

4.   
LabelAngle：标签字体角度

5.   
Name：图表名称

6.   
Points：数据点集合

7.   
XValueType：横坐标轴类型

8.   
YValueType：纵坐标轴类型

9.   
XValueMember：横坐标绑定的数据源（如果数据源为Table，则填写横坐标要显示的字段名称 ）

10.
YValueMembers：纵坐标绑定的数据源（如果数据源为Table，则填写纵坐标要显示的字段名称，纵坐标可以有两个 ）

11.
ChartArea：图表所属的绘图区域名称

12.
ChartType：图表类型（柱形、饼形、线形、点形等）

13.
Legend：图表使用的图例名称

6.   
Titles：标题集合。

7.   
width：MSChart的宽度。

8.   
height：MSChart的高度。

3.   
常用事件：

1.   
Series1.Points.DataBind()
绑定数据点集合，如果要在一个MSChart控件的一个绘图区(ChartArea)内添加多个不同数据源的图表，就用这个主动绑定数据集合的方法。可以将表中指定字段的值绑定到指定的坐标轴上。

2.   
MSChart1.DataBind()
给整个MSChart绑定一个数据源，该MSChart中的图表全部可以使用该数据源作为统计来源

介绍MSChart的常用属性和事件

MSChart的元素组成

最常用的属性包括

ChartAreas：增加多个绘图区域，每个绘图区域包含独立的图表组、数据源，用于多个图表类型在一个绘图区不兼容时。

AlignmentOrientation：图表区对齐方向，定义两个绘图区域间的对齐方式。

AlignmentStyle：图表区对齐类型，定义图表间用以对其的元素。

AlignWithChartArea：参照对齐的绘图区名称。

InnerPlotPosition：图表在绘图区内的位置属性。

Auto：是否自动对齐。

Height：图表在绘图区内的高度（百分比，取值在0-100）

Width：图表在绘图区内的宽度（百分比，取值在0-100）

X,Y：图表在绘图区内左上角坐标

Position：绘图区位置属性，同InnerPlotPosition。

Name：绘图区名称。

Axis：坐标轴集合

Title：坐标轴标题

TitleAlignment：坐标轴标题对齐方式

Interval：轴刻度间隔大小

IntervalOffset：轴刻度偏移量大小

MinorGrid：次要辅助线

MinorTickMark：次要刻度线

MajorGrid：主要辅助线

MajorTickMark：主要刻度线

DataSourceID：MSChart的数据源。

Legends：图例说明。

Palette：图表外观定义。

Series：最重要的属性，图表集合，就是最终看到的饼图、柱状图、线图、点图等构成的集合；可以将多种相互兼容的类型放在一个绘图区域内，形成复合图。

IsValueShownAsLabel：是否显示数据点标签，如果为true，在图表中显示每一个数据值

Label：数据点标签文本

LabelFormat：数据点标签文本格式

LabelAngle：标签字体角度

Name：图表名称

Points：数据点集合

XValueType：横坐标轴类型

YValueType：纵坐标轴类型

XValueMember：横坐标绑定的数据源（如果数据源为Table，则填写横坐标要显示的字段名称）

YValueMembers：纵坐标绑定的数据源（如果数据源为Table，则填写纵坐标要显示的字段名称，纵坐标可以有两个）

ChartArea：图表所属的绘图区域名称

ChartType：图表类型（柱形、饼形、线形、点形等）

Legend：图表使用的图例名称

Titles：标题集合。

width：MSChart的宽度。

height：MSChart的高度。

常用事件：

Series1.Points.DataBind()
绑定数据点集合，如果要在一个MSChart控件的一个绘图区(ChartArea)内添加多个不同数据源的图表，就用这个主动绑定数据集合的方法。可以将表中指定字段的值绑定到指定的坐标轴上。

MSChart1.DataBind()
给整个MSChart绑定一个数据源，该MSChart中的图表全部可以使用该数据源作为统计来源。

示例：

private void BindGrid()
        {
            chart2.Width = 800;
            chart2.Height = 600;

            //作图区的显示属性设置
            //chart2.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false;
            //chart2.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
            //背景色设置
            chart2.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent;
            chart2.ChartAreas["ChartArea1"].BackColor = Color.FromArgb(209, 237, 254);         //该处设置为了由天蓝到白色的逐渐变化
            chart2.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom;
            chart2.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White;
            //X,Y坐标线颜色和大小
            chart2.ChartAreas["ChartArea1"].AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
            chart2.ChartAreas["ChartArea1"].AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
            chart2.ChartAreas["ChartArea1"].AxisX.LineWidth = 2;
            chart2.ChartAreas["ChartArea1"].AxisY.LineWidth = 2;
            chart2.ChartAreas["ChartArea1"].AxisX.Title = "时间";
            chart2.ChartAreas["ChartArea1"].AxisY.Title = "灰量";
            //中间X,Y线条的颜色设置
            chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            //X.Y轴数据显示间隔
            chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1.0; //X轴数据显示间隔
            chart2.ChartAreas["ChartArea1"].AxisX.IntervalType = DateTimeIntervalType.Days;
            chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffset = 0.0;
            chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffsetType = DateTimeIntervalType.Days;
            chart2.ChartAreas["ChartArea1"].AxisX.LabelStyle.Format = "M-d";
            chart2.ChartAreas["ChartArea1"].AxisY.Interval = 200;// y轴数据显示间隔
            //X轴线条显示间隔
            //chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.IntervalType = DateTimeIntervalType.Hours;
            chart2.Palette = ChartColorPalette.Pastel;

            string sql = "select sum(zhl) zhl, input_date, ash_type_name from (" +
            " select sum(t.second_load - t.first_load) as zhl," +
                   " to_date(to_char(t.input_date, 'dd/mm/yyyy')||'00:00','dd/mm/yyyy hh24:mi:ss') as input_date," +
                   " u.ash_type_name" +
             " from transportation_bill t, ash_type u" +
             " where t.ash_type_id = u.ash_type_id" +
              " and (t.input_date between to_date('2009-6-11','yyyy-mm-dd') and to_date('2009-6-20','yyyy-mm-dd'))" +//此处加按日期查询的条件
               " and t.sale_organization_id = 1" +//此处加用户所在机构查询条件
             " group by u.ash_type_name, t.input_date" +
             " order by t.input_date" +
             ")" +
             " group by ash_type_name,input_date" +
            " order by input_date";
            DataTable dt2 = OracleHelper.ExecuteDataTable(OracleHelper.ConnectionString, CommandType.Text, sql, "T", null);
            chart2.DataBindCrossTable(dt2.DefaultView, "ash_type_name", "input_date", "zhl", "", PointSortOrder.Ascending);

            foreach (Series sr in chart2.Series)
            {
                sr.ChartType = SeriesChartType.Spline;
                sr.XValueType = ChartValueType.Date;
                sr. MarkerStyle = MarkerStyle.Circle;// 散点样式
                sr. MarkerSize = 5;// 默认是 5 ，散点大小
                sr. MarkerStep = 1;// 默认是 1 ，散点频率
                sr. MarkerColor = 1;// 默认是透明，散点颜色
                sr.BorderWidth = 2;
            }

            //chart2.Legends["Default"].Docking = Docking.Left;
        }