Dundas

 

整个图形控件主要由以下几个部份组成：

1.Annotations --图形注解集合

2.ChartAreas  --图表区域集合

3.Legends      --图例集合

4.Series　　　 --图表系列集合（即图表数据对象集合）

5.Titles　　　　--图标的标题集合

Annotations注解集合

     Annotations是一个对图形的一些注解对象的集合，所谓注解对象，类似于对某个点的详细或者批注的说明，比如，在图片上实现各个节点的关键信息，如下图方框和黄色的小方框：

 

  一个图形上可以拥有多个注解对象，可以添加十多种图形样式的注解对象，包括常见的箭头、云朵、矩行、图片等等注解符号，通过各个注解对象的属性，可以方便的设置注解对象的放置位置、呈现的颜色、大小、文字内容样式等常见的属性。

ChartAreas图表区域集合

    ChartAreas可以理解为是一个图表的绘图区，例如，你想在一幅图上呈现两个不同属性的内容，一个是用户流量，另一个则是系统资源占用情况，那么你要在一个图形上绘制这两种情况，明显是不合理的，对于这种情况，可以建立两个ChartArea，一个用于呈现用户流量，另一个则用于呈现系统资源的占用情况。

    当然了，图表控件并不限制你添加多少个绘图区域，你可以根据你的需要进行添加。对于每一个绘图区域，你可以设置各自的属性，如：X,Y轴属性、背景等。

    需要注意的是，绘图区域只是一个可以作图的区域范围，它本身并不包含要作图形的各种属性数据。

    多绘图区效果图如下，分为上下两个绘图区域，分别表示不同的绘图数据：

 

   Legends图例集合

    Legends是一个图例的集合，即标注图形中各个线条或颜色的含义，同样，一个图片也可以包含多个图例说明，比如像上面说的多个图表区域的方式，则可以建立多个图例，每别说明各个绘图区域的信息，具体的图例配置说明此处就不详细说明了，可以参考一下官网的例子，写得丰富的详细了：）也上一张图例的效果图 吧~

 

Series图表系列

     图表系列，应该是整个绘图中最关键的内容了，通俗点说，即是实际的绘图数据区域，实际呈现的图形形状，就是由此集合中的每一个图表来构成的，可以往集合里面添加多个图表，每一个图表可以有自己的绘制形状、样式、独立的数据等。

    需要注意的是，每一个图表，你可以指定它的绘制区域（见ChartAreas的说明），让此图表呈现在某个绘图区域，也可以让几个图表在同一个绘图区域叠加，如下图：

 

 

上面两幅图，分别表示了把图表放在不同的绘制区域和放在同一个绘制区域的情况。

     继续回到ChartAreas章节举的例子，同时要显示用户的流量还要显示系统的占用情况，对于这种时候，应该建立两个Series，一个用于呈现用户的流量，另一个则用于呈现系统的占用情况。它们分别属于各自的绘图区域。

Titles标题合集

    根据字面含义即可以理解，是图表的标题配置，同样可以添加多个标题，以及设置标题的样式及文字、位置等属性。多看一下它的属性即能明白各自的含义。

三。其它属性

    相对来说，我觉得比较有用的属性有三个，分别是：Label、Tooltip以及Url链接。

    Label即标签的含义，可以在图片的关键位置进行一些关键数字或文字的描述，如下图：

 

像上图：X轴和Y轴的文字便是标签，以及图表曲线中的红点上的文字，也是标签，添加了标签，可以让人更容易的对内容进行理解。

    Tooltip即提示的含义，用于在各个关键点，如：标签、图形关键点、标题等当鼠标移动上去的时候，提示用户一些相关的详细或说明信息，例如上图，可以给曲线中的每一个点增加Tooltip的属性，写上需要详细说明的内容，比如：详细的销售明细，那么，在鼠标移动到这个点的时候，会自动弹出提示信息。

    Tooltip可以支持简单方式以及自定义的方式，简单方式即像平时Html页面设置的title之类的属性效果，而自定义的方式，则可以实现图形、文本等各种复杂的提示信息显示。详细的方式请参考官方例子的：Interactivity and AJAX/Tooltips以及Interactivity and AJAX/Client Side Scripts下面的相关例子。

    Url链接，图表控件中，有一大半的控件都有Url及Tooltip的属性，你可以设置此属性，在鼠标点击的时候，代到其它相应的页面去。

 

Annotation:备注内容

 

 

axis (X, Y, Secondary X, and Secondary Y)

 

Multiple Axes

 

1.Series系列:

 

属性Series集合出现Series集合编辑器:

 

 

 

 

 

 

 

 

 

 

 

 

常用属性:

  Name:显示名称,Points点的连接,BorderStyle连线的方式:Color:线条颜色

  Axes:

 

 

 

 

2.Legends

 

3.ChartAreas

 

 

HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);

Chart1.RenderControl(writer);

 

Chart 元素:

 

Axis label 轴的刻度

Axis title  轴上文件标注

Chart Area 可以画 Series, Labels,Axis Grid Lines, Tick Marks 可以包含多个.

 

1.Axis

Aixs属于一个ChartArea，因此对它的设置都需要通过某个ChartArea来进行。

1.1Axis Types

1.2Axis Scale 

1）设置X轴显示间隔

      chart1.ChartAreas[0].AxisX.Interval  =1;

2）设置Y轴数值最小值自动计算

chart.ChartAreas["Chart Area 1"].AxisY.StartFromZero = false;

最小值会根据要绘制的数据自动计算出来。

3）设置Y或X轴数值显示的极值

缺省情况，极值为Auto模式，即将Minimum 和Maximum 值设为double.NaN;

chart.ChartAreas["Chart Area 1"].AxisY.Minimum = double.NaN;
chart.ChartAreas["Chart Area 1"].AxisY.Maximum = double.NaN;

设置为某一具体值时，表示

Both the Minimum and Maximum axis properties can be set to a specific value, or they can be set to Auto

  

4.Lable

1）设置X轴的标签为竖向显示。当标签比较长时，竖向显示比较方便

chart1.ChartAreas[0].AxisX.LabelsAutoFitStyle = LabelsAutoFitStyle.LabelsAngleStep90;

6.Series

1）数据点的形状

chart1.Series["切丝水分"].MarkerStyle = MarkerStyle.Diamond;

2）数据点旁显示数值

chart.Series[seriesName].ShowLabelAsValue = true;

 

其他

1）显示提示信息

this.chart2.GetToolTipText += DDSHelper.Event_ToolTipText;