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(轴)的标题文本及其字体。这个角度可以从090180270度的值中选择。对于运行时,可以看到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的属性(标签旋转度为090180270),也可用于多行轴标签。

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提供了在设计时创建自定义轴的能力,使它们能够保存在TeeCharttee文件格式中。要实现这一点,打开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;
         通过使用StartPositionEndPosition属性,您可以将新轴放在被关联的图表的任何位置。
            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点加一个。其他轴的标签不受影响。


                                                                第四章完


没有更多推荐了,返回首页