TeeChart Pro VCL/FMX教程（四）：軸控制（下）

下載TeeChart Pro VCL/FMX最新版本

附加軸

複製軸

TeeChart提供5個軸與數據系列相關聯：Left、Top、Bottom、Right和Depth。向圖表添加新系列時，您可以定義系列應與哪些軸相關（轉到“Series”選項卡“General”頁面）。您可以使用Axis Customdraw方法在圖表上的任何位置重複4個前軸中的任何一個（或全部）。請注意，此方法會複製Axis，但不會添加新的自定義軸。

您將找到這個名爲“CustAxisProject1”的示例，其中包含TeeChart示例代碼：

//fill the Series for this example with random data
procedure TForm1.BitBtn1Click(Sender: TObject);
Var t:integer;
begin
  For t := 0 To 20 do
    Series1.AddXY(t, Random(100) - Random(70), '', clRed);
end;

//Put this code in the OnBeforeDrawValues() event:
procedure TForm1.Series1BeforeDrawValues(Sender: TObject);
var posaxis :Integer;
begin
  With Chart1 do
  begin
    If Axes.Left.Maximum > 0 Then
    begin
      
      //When scrolling or on zoom always keep the gridlines enclosed in the Chart rectangle
      Canvas.ClipRectangle(ChartRect);

      //Always draw the 2nd vertical Axis at the middle point of the Chart
      posaxis := (ChartRect.Left) + (ChartRect.Right - ChartRect.Left) div 2;
      Axes.Left.CustomDraw(posaxis - 10, posaxis - 20, posaxis, True);

      //Draw the 2nd Horizontal axis at the level of "10" on the vertical axis
      posaxis := (Axes.Left.CalcYPosValue(10));
      Axes.Bottom.CustomDraw(posaxis + 10, posaxis + 40, posaxis, True);

      Canvas.UnClipRectangle;
    end;
  end;
end;

自定義軸

在此示例中，TeeChart將繪製新軸，一個水平，一個垂直位於圖表的中心。當您滾動圖表（用鼠標右鍵拖動）時，新的垂直軸將始終保持在圖表的中心，新的水平軸將垂直滾動上下移動。新軸是默認軸的精確副本。

多個自定義軸

與PositionPercent和拉伸屬性一起，可以在圖表上的任何位置浮動無限軸。滾動，縮放和軸命中檢測也適用於自定義創建的軸。現在可以通過圖表編輯器在設計時創建額外的軸，也可以在運行時通過幾行代碼創建附加軸：

通過圖表編輯器

TeeChart爲您提供在設計時創建自定義軸的功能，使其能夠以TeeChart的Teechart格式保存。要實現此目的，請打開圖表編輯器並單擊“ Axis”選項卡，然後選擇“+”按鈕以添加自定義軸。然後選擇位置選項卡確保您突出顯示新的自定義軸。此頁面上的“Horizontal”複選框允許您將新的自定義軸定義爲水平軸或將其保留爲默認垂直軸。如上所述，此頁面的其餘部分和Axis頁面中的其他選項卡可用於更改自定義軸的比例，增量，標題，標籤，刻度，次刻度和位置。要將此新的自定義軸與所需的數據系列相關聯，請選擇“Series”選項卡，然後轉到“General”頁面，其中下拉組合框“Horizontal Axis”和“Vertical Axis”將允許您根據先前是否定義選擇新的自定義軸它是垂直的或水平的。

通過代碼

procedure TForm1.BitBtn2Click(Sender: TObject);
Var MyAxis : TChartAxis ;
begin
  MyAxis := TChartAxis.Create(  Chart1 );
  Series2.CustomVertAxis := MyAxis;

  //You can modify any property of the new created axes, such as the axis color or axis title
  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（零）（在垂直軸的情況下）爲Top。這些屬性可以應用於標準軸，以在圖表中創建完全分區的“SubCharts”。

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

以上2個編碼示例與以下數據結合使用：

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;

將顯示以下圖表：

多軸

另一種添加自定義軸的技術如下，使用“Axis List”作爲焦點，使用“List Add”，然後通過“Axis by Index”訪問：

//Add data to Series:
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;

建議在使用自定義軸時要小心，因爲很容易開始用新軸填充屏幕並且無法跟蹤您想要管理的軸！

---

軸事件

Axis事件提供運行時靈活性，可以修改Axis標籤並在Axis Clicks上爲用戶提供交互性。

OnClickAxis

procedure TForm1.Chart1ClickAxis(Sender: TCustomChart; Axis: TChartAxis;
  Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
  //Shows Axis point clicked when click on Bottom Axis.

  if Axis = Chart1.Axes.Bottom Then
     ShowMessage('Clicked Bottom Axis at '  + FloatToStr(Chart1.Axes.Bottom.CalcPosPoint(X)));
end;

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;

OnGetNextAxisLabel

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'。其他軸標籤不受影響。

查看Teechart.Net系列教程>>