T07-TeeChart绘图.doc

第七讲 TeeChart绘图
简介
本讲涉及的内容包括下面四个方面：
① 安装TeeChart控件，安装TeeChart工具箱面板。
② 可视化创建图形和曲线，程序添加数据和设置属性。
③ 程序创建TeeChart图形和序列，一个图形多个序列和多个轴。
④ 演示使用FarPoint控件和TeeChart控件，程序生成交互式编辑曲线图形，将图形和数据保存到文件。
1 如何安装TeeChart控件
1.1 安装TeeChart控件
安装组件TeeC v3.2.2980.19086.eval.ISO，安装文件夹中的内容如下：

其中TEECHARTNET3VSNET2008EVAL.EXE是主安装文件，执行该文件安装即可。TEECHARTVS2008试用版序列号.TXT中有安装序列号。
1.2 安装TeeChart工具箱面板
如果确认已经安装了TeeChart，而在工具箱面板中看不到TeeChart的工具栏时，可以重新安装该工具面板。
在工具面板的空白处，按下鼠标右键弹出子菜单，选择“添加选项卡”，在工具箱面板上输入要创建的工具栏名称，如：“TeeChart”，然后在刚创建的工具栏空白处，按下鼠标右键弹出子菜单，选择“选择项”，弹出“选择工具箱项”对话框，然后选择TeeChart的几个.Net组件，即可在工具箱面板上安装TeeChart工具。

1.3 TeeChart对象常用属性和方法
属性
说明
参见
Header.Text
图形标题
T0701_01
Aspect.View3D
是否显示成3D图形

Legend.Alignment
图注的位置：上、下、左、右

Legend.LegendStyle
图注显示内容说明

方法
说明
参见
Series.Add
从Excel文件读数据到FpSpread中
01,03

1.4 Line对象常用属性和方法
属性
说明
参见
Title
曲线标题
03
HorizAxis
指定水平轴
03
VertAxis
指定垂直轴
03
XValues.Order
指定X方向的值是否排序
03
Color
指定曲线的颜色

LinePen
指定曲线的线型和线宽
04
Marks
指定曲线的标签属性
04
Pointer
指定曲线的数据点属性

方法
说明
参见
Clear
清空曲线上的数据点

FillSampleValues
向曲线添加随机数据点

Add
向曲线添加指定数据点

1.5 Axes对象常用属性和方法
属性
说明
参见
Axes.Left
左轴
04
Axes.Right
右轴
04
Axes.Top
上轴
04
Axes.Bottom
下轴
04
Axes.Left.Title.Lines
设置多行标题
04
Axes.Left.Title.Caption
设置单行标题

Axes.Left.Inverted
轴是否反向
01
Axes.Left.Automatic
轴是否自定义刻度

Axes.Left.Minimum
手动定义刻度时，设置最小值
01，04
Axes.Left.Maximum
手动定义刻度时，设置最大值

2 可视化创建图形和曲线，程序添加数据和设置属性
建立：解决方案(T0701 可视化创建TeeChart图形)，项目名称(01_曲线图)。
2.1 设计窗体
对象属性如下：
控件
属性
属性值
说明
Form
Name
frmChartLine

Text
01 绘XY曲线图

Panel
Size.Width
150

Dock
Left

TChart
Name
chtLine

Dock
Fill

Series.Line
Name
line

Button
Name
btnAddDataRandom

添加随机数据

Button
Name
btnAddData1

Text
添加数据（方式1）

Button
Name
btnAddData2

添加数据（方式2）

Button
Name
btnSetChart

Text
设置图形属性

Button
Name
btnSetSeries

设置序列属性

Button
Name
btnSetAxis

Text
设置轴属性

使用TeeChart自带的对象编辑器，添加一条曲线，然后设置一些图形和曲线的属性，如下图：

设计完成后的窗体如下：

2.2 功能实现
采用可视化方式添加了一个TeeChart图形，并添加了一个序列（曲线）后，然后编写代码演示了3种添加曲线数据的方式，接下来，可以设置图形属性、曲线属性和轴属性。
注：一个图形有多个轴，一个图形可以有多个序列。
2.2.1 添加随机数据
// 给曲线添加10个随机值
private void btnAddDataRandom_Click(object sender, EventArgs e)
{
line.Clear();
line.FillSampleValues(10);
}
2.2.2 添加数据（方式1）
// 给曲线添加数据，每次添加一个数据点
private void btnAddData1_Click(object sender, EventArgs e)
{
line.Clear();

line.Add(714.25, 4.1);
line.Add(841.25, 3.2);
line.Add(968.25, 4);
line.Add(1095.5, 2.2);
line.Add(1225.25, 2);
line.Add(1358.75, 2.3);
line.Add(1495, 2.4);
line.Add(1641.25, 1.6);
line.Add(1775, 5.3);
line.Add(1898, 3.4);
line.Add(2521, 4.1);
line.Add(2666, 3.5);
line.Add(2799, 2);
line.Add(2921, 2.4);
line.Add(3006, 2.4);
line.Add(3141.75, 3);
}
2.2.3 添加数据（方式2）
// 给曲线添加数据，每次添加一个数组
private void btnAddData2_Click(object sender, EventArgs e)
{
float[] depths = { 1000, 1100, 1150, 1200, 1300, 1400, 1500, 1550, 1580, 1600, 1610, 1650, 1700 };
float[] SPs = { 56, 0, -45, 10, 50, 20, -30, 0, 65, 34, -5, -30, 10 };

line.Clear();
line.Add(SPs, depths);
}
2.2.4 设置图形属性
// 设置图形的标题、取消3D、取消图注
private void btnSetChart_Click(object sender, EventArgs e)
{
chtLine.Header.Text = "自定义测井曲线图"; // 设置图标题
chtLine.Aspect.View3D = false; // 取消显示3D
chtLine.Legend.Alignment = Steema.TeeChart.LegendAlignments.Bottom;
chtLine.Legend.LegendStyle = Steema.TeeChart.LegendStyles.Series;
}
2.2.5 设置序列属性
// 设置序列的标题、横轴的位置、X轴的值不要排序、线型、线宽、线色、显示标记、显示符号
private void btnSetSeries_Click(object sender, EventArgs e)
{
line.Title = "自然电位";

line.HorizAxis = Steema.TeeChart.Styles.HorizontalAxis.Top; // 横轴使用上轴

line.XValues.Order = Steema.TeeChart.Styles.ValueListOrder.None; // X轴的数据不要排序

line.LinePen.Style = System.Drawing.Drawing2D.DashStyle.DashDotDot;
line.LinePen.Width = 3;
line.Color = Color.Red;

line.Marks.Visible = true;
line.Marks.Style = Steema.TeeChart.Styles.MarksStyles.Value;

line.Pointer.Visible = true;
line.Pointer.Style = Steema.TeeChart.Styles.PointerStyles.Circle;
}
2.2.6 设置轴属性
// 设置轴的标题、轴反向、手动刻度（最小值、最大值）
private void btnSetAxis_Click(object sender, EventArgs e)
{
// 图左轴自定义
chtLine.Axes.Left.Title.Lines = new string[] { "深度", "(m)" }; // 轴标题（2行）
chtLine.Axes.Left.Inverted = true; // 反向轴
chtLine.Axes.Left.Automatic = false; // 自定义轴刻度
chtLine.Axes.Left.Minimum = 1000;
chtLine.Axes.Left.Maximum = 1800;
// 图上轴自定义
chtLine.Axes.Top.Title.Caption = "自然电位";
}
2.3 功能演示
选择“添加随机数据”，可以看见添加了一些随机数据点，如下图：

选择“添加数据（方式1）”，可以看见添加了用户指定的数据点（在程序中指定），如下图：

选择“添加数据（方式2）”，可以看见添加了用户指定的数据点（在程序中指定），如下图：

选择“设置图形属性”，可以看见修改了图形标题，取消了3D显示，修改了图注的位置和显示内容，如下图：

选择“设置序列属性”，可以看见修改了序列的横轴为上轴，修改了线型、线宽和线色，给曲线添加了Mark和Pointer，并指定了相应的属性，如下图：

选择“设置轴属性”，可以看见修改了纵轴为反向，手动设置了纵轴的范围为1000-1800，如下图：

3 程序创建TeeChart图形和序列，一个图形多个序列和多个轴
建立：向解决方案(T0702 程序创建TeeChart图形)中添加一个新项目，项目名称(01_柱状图)。
3.1 设计窗体
对象属性如下：
控件
属性
属性值
说明
Form
Name
frmChartBar

Text
01 绘柱状图和曲线图

Panel
Size.Width
150

Dock
Left

Button
Name
btnClearChart

清空图形

Button
Name
btnAddBar

Text
添加柱状图

Button
Name
btnAddLine

添加曲线图

Button
Name
btnSetProperty

Text
设置属性

设计完成后的窗体如下：

3.2 功能实现
添加引用TChart，添加命名空间，如下图。

3.2.1 清空当前的图形，然后添加一个新图形
// 清空当前所有图形，并添加一个新图形
private void btnAddChart_Click(object sender, EventArgs e)
{
// 清空当前所有图形
for (int i = Controls.Count - 1; i >= 0; i--)
{
Control control = Controls[i];
if (control is Steema.TeeChart.TChart)
Controls.Remove(control);
}
// 添加一个新图形
_chart = new TChart();
_chart.Aspect.View3D = false;

this.Controls.Add(_chart);
_chart.BringToFront();
_chart.Dock = DockStyle.Fill;
}

3.2.2 向图形中添加一个柱状图，并设置一些常用属性
// 添加一个柱状图
private void btnAddBar_Click(object sender, EventArgs e)
{
float[] grades = { 56, 72, 85, 92, 76, 45, 85, 78 };
string[] names = { "张一", "张二", "张三", "张四", "李一", "李二", "李三", "李四" };

// 创建柱状图对象
_bar = new Bar();

// 设置图形标题
_bar.Title = "柱状图";

// 设置Bar的绘制类型
_bar.BarStyle = BarStyles.RectGradient;

// 设置Bar的颜色
_bar.Color = Color.YellowGreen;

// 是否显示序列标题
_bar.ShowInLegend = true;

// 百分制格式
_bar.PercentFormat = "##0.## %";

// 数据值显示格式
// 0.#
// #.#
// #.# x10E-#
_bar.ValueFormat = "#,##0.###";

// 设置Bar标记格式
_bar.Marks.Visible = true; // 是否显示标记
_bar.Marks.Angle = 0; // 旋转角度
_bar.Marks.Arrow.Color = Color.Blue; // 标记到序列图的连线 颜色
_bar.Marks.Arrow.Width = 2; // 标记到序列图的连线 宽度
_bar.Marks.Arrow.Style = DashStyle.DashDotDot; // 标记到序列图的连线 类型
_bar.Marks.ArrowLength = 15; // 标记到序列图的连线长度
_bar.Marks.Brush.Color = Color.LightGray; // 标记的背景填充色 默认为LightYellow(淡黄色)
_bar.Marks.Font.Color = Color.DarkGreen; // 标记字体 颜色
_bar.Marks.Font.Name = "宋体"; // 标记字体 名称
_bar.Marks.Font.Size = 9; // 标记字体 大小
_bar.Marks.Style = MarksStyles.Label; // 标记显示 类型

// 添加数值数据
_bar.Add(grades);
// 添加标签数据
_bar.Labels.AddRange(names);

// 将序列添加到图形中
_chart.Series.Add(_bar);
}

3.2.3 向图形中添加一个曲线图，并设置一些常用属性
private void btnAddLine_Click(object sender, EventArgs e)
{
float[] depths = { 1000, 1100, 1150, 1200, 1300, 1400, 1500, 1550, 1580, 1600, 1610, 1650, 1700 };
float[] SPs = { 56, 0, -45, 10, 50, 20, -30, 0, 65, 34, -5, -30, 10 };

// 创建曲线图对象
_line = new Line();

// 设置图形标题
_line.Title = "曲线图";

// 设置线型、线宽和线色
_line.LinePen.Style = DashStyle.DashDot;
_line.LinePen.Width = 2;
_line.Color = Color.Red;

// 设置Line的点格式
_line.Pointer.Visible = true; //点是否可见
_line.Pointer.Style = PointerStyles.Sphere; //点的样式
_line.Pointer.HorizSize = 5; //水平大小
_line.Pointer.VertSize = 5; //垂直大小

// 添加数值数据
_line.Add(SPs, depths);

// 将线添加到图表序列
_chart.Series.Add(_line);
}

3.2.4设置图形属性、轴属性和曲线属性
private void btnSetProperty_Click(object sender, EventArgs e)
{
// 设置图形标题
_chart.Header.Text = "程序添加图形和序列";

// 设置图注在图形下边
_chart.Legend.Alignment = LegendAlignments.Bottom;

// 设置左、上、右、下轴的属性
_chart.Axes.Left.Inverted = true;
_chart.Axes.Left.Title.Caption = "深度(m)";
_chart.Axes.Top.Title.Caption = "自然电位";
_chart.Axes.Right.Title.Caption = "成绩";
_chart.Axes.Bottom.Title.Caption = "学生姓名";

// 指定柱状图的两个轴
_bar.HorizAxis = HorizontalAxis.Bottom;
_bar.VertAxis = VerticalAxis.Right;

// 指定曲线图的两个轴
_line.HorizAxis = HorizontalAxis.Top;
_line.VertAxis = VerticalAxis.Left;
}
3.3 功能演示
程序运行后，如下图：

选择“添加图形”，可以看见添加图形后的效果，如下图：

选择“添加柱状图”，可以看见添加柱状图后的效果，如下图：

选择“添加曲线图”，可以看见添加曲线图后的效果，如下图：

选择“设置属性”，可以看见设置属性后的效果，如下图：

4 交互式编辑曲线图形
建立：向解决方案(T0703 交互式编辑曲线和数据)中添加一个新项目，项目名称(01_交互编辑曲线和数据)。
4.1 设计窗体
对象属性如下：
控件
属性
属性值
说明
Form
Name
frmInteractEdit

Text
01 交互编辑曲线和数据

Panel
Size.Width
270

Dock
Left

FpSpread
Name
fpSpread

Width
177

Button
Name
btnLoadData

Text
加载数据

Button
Name
btnUpdateChart

更新图形=>

Button
Name
btnUpdateData

Text
<=更新数据

Button
Name
btnSaveData

保存数据

TChart
Name
chart

Dock
Fill

设计完成后的窗体如下：

4.2 功能实现
在项目所在文件夹中有一个Excel格式的测井数据文件Test_Log.xls，选择“加载数据”按钮，将该文件加载到电子表格编辑器中；然后用户可以修改这些数据，选择“更新图形=>”可以使用表格中的数据来绘测井曲线图；用户可以在图形中使用数据点编辑工具修改数据点，选择“<=更新数据”可以用图形中的数据点更新表格中的数据；选择“保存数据”按钮，可以将表格中的数据保存到一个Test_Log_out.xls文件中。
4.2.1 初始化界面
设计时，整个界面布局很简单，程序运行时，在构造函数内，对表格和图形做一些初始化工作，包括：定义了三个成员变量，然后对图形的一些属性做了设置，如下：
Line _line; // 曲线对象
DragPoint _dragPoint; // 编辑点对象
SheetView _sheet; // 表单对象

public frmInteractEdit()
{
InitializeComponent();

// 设置图形属性
chart.Aspect.View3D = false; // 不显示为3D
chart.Axes.Left.Inverted = true; // 左轴反向显示
chart.Axes.Left.Title.Caption = "深度(m)"; // 设置左轴标题
chart.Axes.Top.Title.Caption = "自然电位"; // 设置上轴标题
// 设置图注放在图形的下边，且显示曲线名称
chart.Legend.Alignment = LegendAlignments.Bottom;
chart.Legend.LegendStyle = LegendStyles.Series;

// 创建曲线对象，并设置其属笥
_line = new Line();
_line.Title = "自然电位"; // 设置曲线名称
_line.HorizAxis = HorizontalAxis.Top; // 水平轴使用上轴
_line.VertAxis = VerticalAxis.Left; // 垂直轴使用左轴
_line.LinePen.Style = DashStyle.Solid; // 设置线型为实线
_line.LinePen.Width = 1; // 设置线宽为1
_line.Color = Color.Red; // 设置线色为红色

// 设置曲线的点属性
_line.Pointer.Visible = true;
_line.Pointer.Style = PointerStyles.Circle;

// 将曲线对象添加到图形中
chart.Series.Add(_line);

// 创建编辑点工具，并添加到工具中
_dragPoint = new DragPoint();
chart.Tools.Add(_dragPoint);
}
4.2.2 加载数据
将测井数据文件Test_Log.xls加载到Spread表格中，表格设置只有2行，设置了表格了列宽，设置了数值显示格式等。
// 加载测井数据文件（Excel格式）
private void btnLoadData_Click(object sender, EventArgs e)
{
// 将Test_Log.xls文件装入到表格
fpSpread.OpenExcel(@"..\..\Test_Log.xls");

// 定义表格的数值显示格式：两位小数
NumberCellType nct = new NumberCellType();
nct.DecimalPlaces = 2;

// 设置表单的属性
_sheet = fpSpread.ActiveSheet;
_sheet.ColumnCount = 2; // 设置为只显示2列
_sheet.Columns[0].Width = 60; // 设置第1列的宽度为60
_sheet.Columns[1].Width = 60; // 设置第2列的宽度为60
_sheet.SetActiveCell(0, 0); // 设置活动单位为A1
_sheet.Columns[0, 1].CellType = nct; // 设置数值格式为两位小数
}

4.2.3 更新图形
使用表格中当前的数据来绘制图形。在执行该功能前，用户可以编辑表格中的数据。
// 用表格中的数据更新图形
private void btnUpdateChart_Click(object sender, EventArgs e)
{
// 清空曲线上的数据点
_line.Clear();

// 设置曲线的X值不能排序
_line.XValues.Order = ValueListOrder.None;

// 设置左轴为人工刻度
chart.Axes.Left.Automatic = false;
chart.Axes.Left.Minimum = 600;
chart.Axes.Left.Maximum = 3200;

// 设置上轴为人工刻度
chart.Axes.Top.Automatic = false;
chart.Axes.Top.Minimum = 0;
chart.Axes.Top.Maximum = 120;

// 用表格中的数据点绘图
for (int i = 1; i < _sheet.NonEmptyRowCount; i++)
{
float depth = Convert.ToSingle(_sheet.Cells[i, 0].Value);
float sp = Convert.ToSingle(_sheet.Cells[i, 1].Value);
_line.Add(sp, depth);
}
}

4.2.4 更新数据
用图形中当前数据点的数据来更新左边表格中的数据。执行该功能前，可以用鼠标编辑曲线上的数据点。
// 用图形中的数据更新表格
private void btnUpdateData_Click(object sender, EventArgs e)
{
// 清除表格中的数据
_sheet.RemoveRows(1, _sheet.NonEmptyRowCount - 1);

// 将曲线点的数据填充到表格中
for (int i = 0; i < _line.XValues.Count; i++)
{
_sheet.Cells[i + 1, 0].Value = _line.YValues[i];
_sheet.Cells[i + 1, 1].Value = _line.XValues[i];
}