本篇文章将演示如何使用 WebChart 制作折线图。并通过示例介绍数据对象一些相关属性以及 ChartArea 的 Axis 的相关属性设置,并演示使用 WebChart 做交互式的设计。
注:版本 ComponentOne.Studio.Enterprise.2006.v2
环境 .NET Compact Framework 1.1
一、生成折线图
1) 获取 WebChart 的第一个图标,并设置其图表类型为折线图
2) 为图表添加数据
获取数据。这里可以根据自己的业务需求,或自动生成或查询数据库,返回一个 DataSet 对象。
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 个数据序列,为了不让其他序列影响输出效果,清除序列集合中的所有序列,并且创建一个新的序列。
将数据添加至新建的数据序列中。这里使用 PointData 属性,同时为 X 、 Y 坐标付值。
到这里,我们便可以运行程序,看到一个有我们的数据生成的一个默认样式的折线图。下面来介绍使用 ChartDataSeries 对象设置图形的样式。
二、使用 ChartDataSeries 对象设置折线图样式
关于 ChartDataSeries 对象,之前已作了简单介绍,这里直接以代码介绍其部分属性。
设置折线为平滑曲线。
设置折线颜色为红色。
LineStyle 的相关属性:
Pattern - 设置折线的类型 (实心直线、点线等),其值为 LinePatternEnum 枚举类型。
Thickness – 设置折线厚度
series.SymbolStyle.Color = Color.Blue;
设置折线上数据点的符号形状为倒三角,颜色为蓝色。
还可以通过 SymbolStyle 设置符号的大小,符号边线的颜色及厚度。可以自己尝试。
三、坐标轴的设置
获取图表的 X 坐标轴。
设置坐标轴刻度标签显示方式,这里使用 ValueLabels ,有用户来制定标签内容。默认为 Values 模式,有系统自动标注标签内容。
{
DataRowView drv = dv[i];
ax.ValueLabels.Add(i, ( string )drv[ " name " ]);
}
设置坐标轴刻度标签显示内容。
ax.ValueLabels.Add 的第一个参数为图表数据的 x 值,第二个参数为对应显示的标签文本。
设置刻度标签的旋转角度。
对于标签内容还可以使用属性 AnnoFormatString 来设置内容的格式。
设置坐标轴标题。
设置坐标轴标题的旋转角度。当坐标轴标题设置以后生效。
对于坐标轴标题,还可以设置它的 对齐方式,使用属性 Alignment 。
设置坐标轴的最大长度
相应的还有 Min 属性设置坐标轴的最小长度, Origin 属性 设置坐标轴原点。对应这些,还有 AutoMax 、 AutoMin 、 AutoOrigin 等 bool 类型的属性,表示是否自动设置。
对于刻度值的也有类似属性: UnitMajor 、 UnitMinor 设置主、副刻度的单位长度。以及对应的 auto 属性等。
除此之外,还有一些特殊属性:
Reverse 属性:使坐标轴反转。
ScrollBar 属性:为坐标轴添加滚动条。
Visible 属性:可以隐藏坐标轴。
OnTop 属性:可以设置坐标轴显示在图表上方。
等等。
在我们使用 .NET 开发环境中,会有智能感知的相关提示,对于对象属性的使用会简单得多。这里只介绍了主要的属性,其他属性可根据需要自行尝试。
四、交互式设计
为图表区域增加链接。
为折线上的数据点增加鼠标提示。(鼠标移至数据点的符号上,会提示你所设置文本)
为图表底部添加点击事件。
五、补充
C1WebChart1.Footer.Visible = true ;
这里设置图标下标题,并让图表 Footer 区域显示在图表中。
对于 C1WebChart 的相关属性比较简单,不再一一演示。
六、结束
以上是折线图的部分代码,完整示例可以通过下面链接下载。
下载地址:http://www.blogjava.net/Files/kdboy/2DChartXYPlot.rar
附录:
效果图