本篇文章将演示如何使用
WebChart
制作折线图。并通过示例介绍数据对象一些相关属性以及
ChartArea
的
Axis
的相关属性设置，并演示使用
WebChart
做交互式的设计。
注：版本
ComponentOne.Studio.Enterprise.2006.v2
环境
.NET Compact Framework 1.1
一、生成折线图
1)
获取
WebChart
的第一个图标，并设置其图表类型为折线图
C1WebChart1.ChartGroups[
0
].ChartType
=
Chart2DTypeEnum.XYPlot;
2)
为图表添加数据
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
对象设置图形的样式。
二、使用
ChartDataSeries
对象设置折线图样式
关于
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
设置符号的大小，符号边线的颜色及厚度。可以自己尝试。
三、坐标轴的设置
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
开发环境中，会有智能感知的相关提示，对于对象属性的使用会简单得多。这里只介绍了主要的属性，其他属性可根据需要自行尝试。
四、交互式设计
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
=
"
onclick=window.open('http://kdboy.spaces.live.com')
"
;
为图表底部添加点击事件。
五、补充
C1WebChart1.Footer.Text
=
"
Web Chart Test!
"
;
C1WebChart1.Footer.Visible
=
true
;
这里设置图标下标题，并让图表
Footer
区域显示在图表中。
对于
C1WebChart
的相关属性比较简单，不再一一演示。
六、结束
以上是折线图的部分代码，完整示例可以通过下面链接下载。
下载地址：http://www.blogjava.net/Files/kdboy/2DChartXYPlot.rar
附录：
效果图
posted on 2007-03-08 01:06
kdboy 阅读(2369)
评论(4) 编辑 收藏 所属分类:
ASP.NET