ComponentOne WebChart的使用 - 3（折线图）

本篇文章将演示如何使用 WebChart 制作折线图。并通过示例介绍数据对象一些相关属性以及 ChartArea 的 Axis 的相关属性设置，并演示使用 WebChart 做交互式的设计。
注：版本 ComponentOne.Studio.Enterprise.2006.v2
环境 .NET Compact Framework 1.1

[b]一、生成折线图 [/b]
[color=blue]1) 获取 WebChart 的第一个图标，并设置其图表类型为折线图[/color]
C1WebChart1.ChartGroups[ 0 ].ChartType = Chart2DTypeEnum.XYPlot;

[color=blue]2) 为图表添加数据[/color]
DataSet ds = GetDataSet();
获取数据。这里可以根据自己的业务需求，或自动生成或查询数据库，返回一个 DataSet 对象。

DataView dv  =   new  DataView(ds.Tables[ " sanguo " ]);
PointF[] data  =  (PointF[])Array.CreateInstance( typeof (PointF), dv.Count);
int  i;
for (i = 0 ; i  <  data.Length; i ++ )
{
      float  y  =   float .Parse(dv[i][ " value " ].ToString());
      data[i]  =   new  PointF(i, y);
}

将数据封装在 PointF 类型的对象数组中。这里可以使用任何方式封装数据。

// 清除图表所有数据序列 
C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.Clear();

// 创建一个新的数据序列，并设置数据 
ChartDataSeries series  =  C1WebChart1.ChartGroups[ 0 ].ChartData.SeriesList.AddNewSeries(); 

WebChart 默认会有 4 个数据序列，为了不让其他序列影响输出效果，清除序列集合中的所有序列，并且创建一个新的序列。

series.PointData.CopyDataIn(data);
将数据添加至新建的数据序列中。这里使用 PointData 属性，同时为 X 、 Y 坐标付值。

到这里，我们便可以运行程序，看到一个有我们的数据生成的一个默认样式的折线图。下面来介绍使用 ChartDataSeries 对象设置图形的样式。

[b]二、使用 ChartDataSeries 对象设置折线图样式 [/b]
关于 ChartDataSeries 对象，之前已作了简单介绍，这里直接以代码介绍其部分属性。
series.FitType = FitTypeEnum.Spline;
设置折线为平滑曲线。

series.LineStyle.Color = Color.Red;
设置折线颜色为红色。

LineStyle 的相关属性：
Pattern - 设置折线的类型 （实心直线、点线等），其值为 LinePatternEnum 枚举类型。
Thickness – 设置折线厚度

series.SymbolStyle.Shape = SymbolShapeEnum.InvertedTri;
series.SymbolStyle.Color = Color.Blue;
设置折线上数据点的符号形状为倒三角，颜色为蓝色。

还可以通过 SymbolStyle 设置符号的大小，符号边线的颜色及厚度。可以自己尝试。

[b]三、坐标轴的设置[/b]
Axis ax = C1WebChart1.ChartArea.AxisX;
获取图表的 X 坐标轴。

ax.AnnoMethod = AnnotationMethodEnum.ValueLabels;
设置坐标轴刻度标签显示方式，这里使用 ValueLabels ，有用户来制定标签内容。默认为 Values 模式，有系统自动标注标签内容。

for (i  =   0 ; i  <  data.Length; i ++ )
{
      DataRowView drv  =  dv[i];
      ax.ValueLabels.Add(i, ( string )drv[ " name " ]);
} 

设置坐标轴刻度标签显示内容。
ax.ValueLabels.Add 的第一个参数为图表数据的 x 值，第二个参数为对应显示的标签文本。

ax.AnnotationRotation = - 60 ;
设置刻度标签的旋转角度。
对于标签内容还可以使用属性 AnnoFormatString 来设置内容的格式。

ax.Text = " X 坐标轴 " ;
设置坐标轴标题。

ax.Rotation = RotationEnum.Rotate90;
设置坐标轴标题的旋转角度。当坐标轴标题设置以后生效。
对于坐标轴标题，还可以设置它的 对齐方式，使用属性 Alignment 。

ax.Max = data.Length - . 5 ;
设置坐标轴的最大长度
相应的还有 Min 属性设置坐标轴的最小长度， Origin 属性 设置坐标轴原点。对应这些，还有 AutoMax 、 AutoMin 、 AutoOrigin 等 bool 类型的属性，表示是否自动设置。
对于刻度值的也有类似属性： UnitMajor 、 UnitMinor 设置主、副刻度的单位长度。以及对应的 auto 属性等。

除此之外，还有一些特殊属性：
Reverse 属性：使坐标轴反转。
ScrollBar 属性：为坐标轴添加滚动条。
Visible 属性：可以隐藏坐标轴。
OnTop 属性：可以设置坐标轴显示在图表上方。
等等。

在我们使用 .NET 开发环境中，会有智能感知的相关提示，对于对象属性的使用会简单得多。这里只介绍了主要的属性，其他属性可根据需要自行尝试。

[b]四、交互式设计 [/b]
C1WebChart1.ImageAreas.GetByName( " ChartArea " ).href = " http://kdboy.spaces.live.com " temp_href = " http://kdboy.spaces.live.com " ;
为图表区域增加链接。

C1WebChart1.ImageAreas.GetByName( " ChartData " ).Tooltip = " X={#XVAL}, Y={#YVAL:c} " ;
为折线上的数据点增加鼠标提示。（鼠标移至数据点的符号上，会提示你所设置文本）

C1WebChart1.ImageAreas.GetByName( " Footer " ).Attributes = " οnclick=window.open('http://kdboy.spaces.live.com') " ;
为图表底部添加点击事件。

[b]五、补充 [/b]
C1WebChart1.Footer.Text = " Web Chart Test! " ;
C1WebChart1.Footer.Visible = true ;
这里设置图标下标题，并让图表 Footer 区域显示在图表中。

对于 C1WebChart 的相关属性比较简单，不再一一演示。

[b]六、结束 [/b]
以上是折线图的部分代码，完整示例可以通过下面链接下载。
下载地址：http://www.blogjava.net/Files/kdboy/2DChartXYPlot.rar

附录：
效果图
[img]http://kdboy.bokee.com/inc/2DChartXYPlot.png[/img]