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:=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点加一个。其他轴的标签不受影响。
第四章完