TeeChart For VCL/FMX V2017使用教程：第四章 坐标轴控制

        TeeChart Pro将自动为你定义全部的轴标签，并提供足够的灵活性，以满足你的任何特定需求。TeeChart Pro提供了真正的多重坐标轴。这些都是在设计或运行时提供的，为轴定义提供了无数的可能性和灵活性。有关更多信息，请参阅本教程部分。

目录
4.1 轴控制 – 关键区域 (1). Scales（刻度） (2). Increment（增量） (3). Titles（标题） (4). Labels（标签） (5). Ticks（标记） (6). Axis Position（轴位置）	4.2 附加坐标轴 (1). 复制轴 (2). 多个定制轴	4.3 轴事件 (1). OnClickAxis (2). OnGetAxisLabel (3). OnGetNextAxisLabel

---

        轴页面共有8个子页面：Scales（刻度）、Title（标题）、Labels（标签）、Axis（轴）、Ticks（标记）、Grid（网格）、Position（位置）、Items（条目）

4.1 轴控制-关键区域

4.1.1 Scales（刻度）

        当您将序列数据添加到图表时，轴刻度会自动设置。您可以通过使用Axis属性更改设计时或运行时的默认值。

        Automatic（自动）选择最佳的轴刻度范围以适应您的数据。如果你关闭Automatic（自动）选项，将激活Options（选项），且可以改变坐标轴的值。重要的是，记住要从页面左边的Axis（轴）菜单中选择您希望配置的Axis（轴）。

        在图表中添加一个Line Series（线序列），添加一个命令按钮，代码如下：

procedure TForm1.BitBtn1Click(Sender: TObject); var t: Integer; begin For t := 0 To 40 do    With Series1 do    begin Add(Int(Random(t)), '', clRed);    end; end;

        在按钮中运行代码将绘制一个带有40个随机值的Line Series(行序列)。

        在设计时进入图表编辑器。将Axis(轴)页面底部的 Scales(刻度)页面区域的Automatic选项“关闭”。您现在可以为Axis刻度配置Maximum（最大值）和Minimum（最小值）。运行代码将显示根据您的轴配置值而再次计算的值。使用鼠标右键，您可以滚动查看剩余的值。

（1）  Minimum（最小数）

        根据代码设置轴刻度

        您可以使用以下代码在运行时更改最大和最小值：:

With Chart1.Axes.Bottom do begin Automatic := False;   Maximum := 36;   Minimum ;= 5; end;

 （2） Maximum（最大数）

        您可以将轴的最大值和最小值分别设置为自动。例如：

With Chart1.Axes.Bottom do begin AutomaticMaximum := True; Minimum := 5; end;

4.1.2 Increment（增量） 

        你可以调整轴的间距。从Axis（轴）页面的Scales（刻度）部分的Increment（增量）子页面选择所需的Desired Incre：（期望增量）框，并添加所需的增量。也可以您可以在运行时通过代码更改这项：

        Chart1.Axes.Bottom.Increment := 20;

Datetime data（日期数据）

        如果您的数据是datetime（日期型）【您可以为你的Series（序列）数据设置为的datetime（日期型），通过进入Series（序列）、General（一般）页面】，图表、Axis（轴）页面和Scales（刻度）部分将显示一个datetime（日期）范围。从展示的Desired Incre：（期望增量）框中选择范围。

添加一些示例数据

for t := 1 To 25 do

    Series1.AddXY(EncodeDate(1998, 4, t), Random(t), '', clRed);

        在运行时更改增量：

 Chart1.Axes.Bottom.Increment := DateTimeStep[dtOneWeek];

        参看Axis.ExactDateTime属性，可以获得更多关于时间轴标签的信息。

4.1.3 Title（标题）

        Title有两个子页面：Style（样式）、Format（格式）

        标题在（轴）Axis页面的Title（标题）部分中设置。您可以更改Axis（轴）的标题文本及其字体。这个角度可以从0、90、180、270度的值中选择。对于运行时，可以看到TChartAxisTitle组件。

4.1.4 Labels（标签）

        标签页面有5个子页面：Style（样式）、Options（选项）、Format（格式）、Margins（边距）、Back（背景）

注意

        当频繁改变轴的标签时，请记住，TeeChart将根据LabelsSeparation属性的设置来避免标签重叠。这意味着，如果标签改变的频率太高，标签就无法匹配，那么TeeChart就会配置“最佳匹配”。改变标签Angle（角度）和标签Separation（间隔）是两个选项，可以帮助你适应你需要的标签。请参阅Labels（标签）部分和LabelsAngle属性。

（1） Label formats（标签格式）

        您可以将所有标准数字和日期格式应用于Axis（轴）标签。Axis（轴）页面，Labels（标签）部分包含字段“Values format（值格式）”。如果您的数据是datetime（时间型），那么字段名将更改为“日期时间格式”。在编辑器中拖拽帮助“?“图标放到字段上，以获得完整的选项列表。在运行时使用：

Chart1.Axes.Bottom.AxisValuesFormat := '#,##0.00;(#,##0.00)'; //或者是Datetime数据 Chart1.Axes.Bottom.DateTimeFormat := 'dd/mmm/yy hh:mm:ss';

（2） MultiLine labels（多行标签）

        Axis（轴）标签可以显示为多行文本，而不只是一行文本。使用TeeLineSeparator全局常量分隔行，缺省情况下是回车ASCII字符(#13)。

示例

//以这种方式添加序列标签，并使用“Marks”作为轴标签样式 Series1.Add( 1234, 'New'+TeeLineSeparator+'cars' , clRed ); Series1.Add( 2000, 'Old'+TeeLineSeparator+'bicycles' , clBlue );

        DateTime（时间型）标签的示例：

        下面的内容将以两行文字显示底部轴的标签，一行显示月和日，另一行显示年份：

        Feb-28 Mar-1 .. 1998 1998 ..

Series1.AddXY( EncodeDate( 1998,2,28 ), 100 ); Series1.AddXY( EncodeDate( 1998,3,1 ), 200 ); Series1.AddXY( EncodeDate( 1998,3,2 ), 150 ); Series1.XValues.DateTime := True; Chart1.Axes.Bottom.DateTimeFormat := 'mm/dd hh:mm';   { <-- space }

        如果您将LabelsMultiLine属性设置为True，那么axis（轴）自动的将标签的空格处分割为单独的行。

        Chart1.Axes.Bottom.LabelsMultiLine:=True;

        把标签分成两份：

        'mm/dd'为第一行；

        'hh:mm'为第二行

        在运行时，您可以使用OnGetAxisLabel事件以编程方式将标签分成行：

procedure TForm1.Chart1GetAxisLabel(Sender: TChartAxis;   Series: TChartSeries; ValueIndex: Integer; var LabelText: String); var s:string; begin     s:='abc'+TeeLineSeparator+'def';     LabelText:=ReplaceChar(s,' ',TeeLineSeparator); end;

        轴LabelsAngle的属性(标签旋转度为0、90、180或270)，也可用于多行轴标签。

（3） Customising Axis labels（定制轴标签）

        使用Axis events（轴事件）可以获得进一步的标签控制。事件允许你激活/禁用/改变任何个别的轴标签。下面的例子修改了每个标签，在点索引值前面放置一个文本短语。

//设置LabelStyle为 'Mark'，使用Tchart编辑器或使用:- Chart1.Axes.Bottom.LabelsStyle := talMark; //OnGetaxisLabel事件 procedure TForm1.Chart1GetAxisLabel(Sender: TChartAxis;   Series: TChartSeries; ValueIndex: Integer; var LabelText: String); begin if Sender = Chart1.Axes.Bottom then     LabelText := 'Period ' + IntToStr(ValueIndex); end;

        请参阅定名为Axisevents（轴事件）的部分，以获得关于使用轴事件进行定制标签的更多信息。

4.1.5 Ticks（标记）

        标记页面有三个子页面：Outer（外部的）、Inner（内部的）、Minor（次要的）

        有3种标记类型。你可以改变每一种标记类型的长度、宽度和颜色。如果标记宽度设置为1(默认)，那么您可以将样式更改为若干行类型中的一种(dot（点）、dash（破折号）等)。如果宽度大于1，样式将被忽略。

With Chart1.Axes.Bottom do Begin TickLength := 7; Ticks.Color := clGreen; MinorTickCount := 10; //改变（主要）标记之间次要标记的数量 end;

4.1.6 Axis position（轴位置） 

        轴有一个属性，它可以修改每个轴所在的位置。在这个例子中，轴被移动到总图表宽度的50%，所以它显示在图表中心:

Chart1.Axes.Left.PositionPercent := 50 ;

---

4.2  附加坐标轴

4.2.1 复制轴

        TeeChart提供了5个与数据序列相关的轴:左、顶、底、右和深。当您将一个新序列添加到一个图表时，您可以定义该序列的哪些轴是相关的【请转到Series（序列）选项卡，General（一般）页面】。您可以使用轴的Customdraw方法，在图表上的任何位置重复4个前面的轴中的任何一个(或全部)。注意，这个方法会复制您的轴，它不会添加一个新的定制轴。有关更多信息，请参阅下一节，Multiple Custom Axes（多个定制轴）。

        您将找到这个名为“CustAxisProject1”的示例，有TeeChart示例代码：

//用随机数据填充本例的序列 procedure TForm1.BitBtn1Click(Sender: TObject); Var t:integer; begin   For t := 0 To 20 do     Series1.AddXY(t, Random(100) - Random(70), '', clRed); end;   //将此代码放入Ondrawdraw Values()事件： procedure TForm1.Series1BeforeDrawValues(Sender: TObject); var posaxis :Integer; begin   With Chart1 do   begin     If Axes.Left.Maximum > 0 Then     begin             //当滚动或缩放时，始终保持在图表矩形中所包含的网格线。      Canvas.ClipRectangle(ChartRect);         //总是在图表的中间画出第2个纵轴       posaxis := (ChartRect.Left) + (ChartRect.Right - ChartRect.Left) div 2;       Axes.Left.CustomDraw(posaxis - 10, posaxis - 20, posaxis, True);       //在垂直轴的10上画出第2个水平轴       posaxis := (Axes.Left.CalcYPosValue(10));       Axes.Bottom.CustomDraw(posaxis + 10, posaxis + 40, posaxis, True);       Canvas.UnClipRectangle;     end;   end; end;

Custom axes（定制轴）

4.2.2 多个定制轴

        PositionPercent（位置百分比）和Stretching（拉伸）属性一起使用，在图表上任意位置都可以有无限的坐标轴。滚动、缩放和轴触碰检测也适用于定制创建的轴。在设计时通过图表编辑器，和在运行时通过几行代码，创建额外的轴是可能的：

通过图标编辑器

        TeeChart提供了在设计时创建自定义轴的能力，使它们能够保存在TeeChart的tee文件格式中。要实现这一点，打开Chart Editor（图表编辑器）并单击Axis（轴）选项卡，然后选择“+”按钮来添加自定义轴。然后选择Position（位置）选项卡，确保您的新定制轴被突出显示。这个页面上的水平复选框允许您将新的定制轴定义为水平轴，或者将其作为默认的垂直轴。这个页面的其余部分和Axis页面中的其他选项卡可以用来改变这些定制轴的Scales（刻度）、Increment（增量）、Titles（标题）、Labels（标签）、Ticks标记、MinorTicks（副标记）和Position（位置）。

        为了把这新的自定义轴和你想要的Data Series（数据序列）关联起来，选择Series（系列）选项卡及其General（常规）页面，下拉组合框Horizontal Axis（水平轴）和Vertical Axis（垂直轴）的将使您能够选择新的自定义轴，取决于你之前定义的垂直还是水平的。

通过代码   

        示例：

procedure TForm1.BitBtn2Click(Sender: TObject); Var MyAxis : TChartAxis ; begin   MyAxis := TChartAxis.Create(  Chart1 );   Series2.CustomVertAxis := MyAxis;   //您可以修改新创建的轴的任何属性，例如axis颜色或axis标题   With MyAxis do   begin     Axis.Color:=clGreen ;     Title.Caption := 'Extra axis' ;     Title.Font.Style:=[fsBold];     Title.Angle := 90;     PositionPercent := 20; //percentage of Chart rectangle   end; end;

         通过使用StartPosition 和EndPosition 属性，您可以将新轴放在被关联的图表的任何位置。

            StartPosition:=50;          

                           EndPosition:=100;

        这些数字表示为图表矩形框的百分比， 0(zero)( 在垂直轴的情况下 ) 是顶部。这些属性可以应用到 Standard Axes （标准轴）上，从而在图表中创建完全分割的“ SubCharts （子图表）”   

        示例：

With Chart1.Axes.Left do   begin     StartPosition:=0;     EndPosition:=50;     Title.Caption:='1st Left Axis';     Title.Font.Style:=[fsBold];   end;

 

        以上两个代码示例结合以下数据：.

var t: integer; begin   for t := 0 to 10 do   begin     Series1.AddXY(t,10+t,'',clTeeColor);     if t > 1 then       Series2.AddXY(t,t/2,'',clTeeColor);   end;

...将显示如下图表：

多重轴

        添加自定义轴的另一种技术是通过使用List Add（列表添加），用Axis List（轴列表）作为焦点，然后通过Index（索引）来访问Axis（轴），如下列代码

//添加数据到序列： procedure TForm1.FormCreate(Sender: TObject); begin   Series1.FillSampleValues(10);   Series2.FillSampleValues(10); end; procedure TForm1.BitBtn1Click(Sender: TObject); var tmpVertAxis: TChartAxis; tmpHorizAxis: TChartAxis; begin   {Add vertical Axis}   Chart1.CustomAxes.Add;   tmpVertAxis:=Chart1.CustomAxes[0];   tmpVertAxis.PositionPercent:=50;   Series1.CustomVertAxis:=tmpVertAxis;   {Add horizontal Axis}   Chart1.CustomAxes.Add;   tmpHorizAxis:=Chart1.CustomAxes[1];   tmpHorizAxis.Horizontal:=True;   tmpHorizAxis.Axis.Color:=clGreen;   tmpHorizAxis.PositionPercent:=50;   Series1.CustomHorizAxis:=tmpHorizAxis; end;

        选择是无限的！当使用Custom Axes（自定义轴）时，我们建议小心谨慎，因为开始用新的轴填充屏幕很容易，并且会丢失您想要管理的哪一个！

---

4.3  轴事件

Axis事件为修改Axis Labels（轴标签）提供了运行时灵活性，并在Axis上单击时，向用户提供交互。

4.3.1 onClickAxis

procedure TForm1.Chart1ClickAxis(Sender: TCustomChart; Axis: TChartAxis;   Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin   //当点击底部轴时，显示被点击轴的被点击点。   if Axis = Chart1.Axes.Bottom Then      ShowMessage('Clicked Bottom Axis at ' + FloatToStr(Chart1.Axes.Bottom.CalcPosPoint(X))); end;

参看OnClickAxis事件.  示例

4.3.2 onGetAxisLabel 

        可用于修改Axis标签。参看OnGetAxisLabel事件。

 示例

procedure TForm1.Chart1GetAxisLabel(Sender: TChartAxis;   Series: TChartSeries; ValueIndex: Integer; var LabelText: String); begin   if Sender = Chart1.Axes.Bottom Then      Case StrToInt(FormatDateTime('mm', StrToDate(LabelText))) of        1,2,3 : LabelText := '1st Qtr';        4,5,6 : LabelText := '2nd Qtr';      end; end;

4.3.3 onGetNextAxisLabel   

        可以用来决定应该显示哪些Axis标签。参看OnGetNextAxisLabel事件。您应该使用Stop Boolean属性来包含/排除Axis标签。

示例

procedure TForm1.Chart1GetNextAxisLabel(Sender: TChartAxis;   LabelIndex: Integer; var LabelValue: Double; var Stop: Boolean); begin   Stop:=False;   if Sender = Chart1.Axes.Bottom Then   begin     if LabelValue>=5 then LabelValue:=LabelValue+5                      else LabelValue:=5;   end   else     Stop:=True; end;

        上面的例子将在底部轴“5”上开始加标签，每5点加一个。其他轴的标签不受影响。

---

                                                                第四章完