Teechart圖表應用技術詳解—第三章之在圖表上自行繪制

    Steema公司和慧都科技針對中國市場聯合推出中文版TeeChart for .NET圖表控件，一共漢化2000個詞條（17000個單詞），漢化文檔35000個單詞，包括控件設計時與運行時的界面漢化以及控件使用向導文檔的漢化，總漢化90%以上！

    TeeChart for .NET中文版讓您在使用和學習上沒有任何語言障礙，至少可以節省30%的開發時間。TeeChart for .NET中文版具有易上手，使用方便，穩定性好，性價比高，價格優惠等優勢，并且針對Web應用提供無限制服務器分發授權方式，非常有利于產品集成。

點擊下載TeeChart for .NET最新試用版    

在圖表上自行繪制

    如果想增加與圖表軸相關聯的文本框或其他形狀， TShapeSerie序列是最好的選擇，如果這個滿足不了用戶的要求，就可以在圖表上繪制各種形狀。TeeChart提供了通過坐標軸或屏幕像素訪問圖表區域的能力這里主要介紹如何將點坐標轉換到像素坐標以及如何精確定義圖表組件中的每個圖形元素。

    為了建立數值與坐標間相互轉換的關系，圖表軸( ChartAxis)和序列組件提供了CalcPosValue、CalcSizeValue、CalcYPos、CalcXpos、XScreenToValue和YScreenToValue等函數，進行屏幕坐標(像素)與數值間的轉換，使用戶可以根據窗口的X、Y坐標得出該點位置所代表的數值，或者由具體的數值得出該值在窗口的位置坐標X、Y。

軸的值轉換到屏幕坐標

• CalcPosValue：計算給定的值在屏幕的位置，可以使用任一坐標軸

Var MyPos: Integer;
MyPos:= Chart1. LeftAxis. CalcPosValue(100.0 );

    MyPos保存著值1000在 Chart1， LeftAxis軸上的像素坐標，使用這個坐標就可以自行繪制當前這個點。如果想將像素坐標轉換到軸的值，可以使用下面的函數。

● CalcPosPoint

var MyValue:Double
MyValue :=Chart1. LeftAxis. CalcPosPoint(100 );

    ;MyValue中保存著100屏幕像素坐標在坐標軸上的值。屏幕坐標從0開始，(0,0)是圖表圓點。在直接繪制到元文件、用戶定義畫布或打印時，圖表原點是不同的。

• CalcSizeValue：該函數計算屏幕空間在巫標軸上的范圍。

Var Space : Integer;
Space : =Chart1. LeftAxis.CalcSizeValue(1000);

    還可將時間軸轉換一個日期范圍周期：

Var Space: integer;
Space :=Chart1. BottomAxis. CalcSizeValue(
EncodeDate(2000, 12, 31)-Encode Date(2000,1,1));
EncodeDate(2000,12,31)-EncodeDate(2000,1,1);

• CalcYPos和CalcXpos：當使用CalcYPos和CalcXpos繪制時坐標原點(0,0)是圖表矩形( ChartRect)的左上角。ChartRect是由圖表四個軸構成的封閉區域。下面的例子是利用畫布特性畫一條線段：

procedure TForm1. Button1Click(Sender: TObject)；
var
   MyHalfwayPoint, YPosition: Integer;
Begin
 With Series1. YValues do
  MyHalfwayPoint: -round(((MaxValue-MinValue)*0. 5)+ MinValue);
                    //計算上述值的屏幕像素坐標
  YPosition:=DBChart1.LeftAXis, CalcYPosValue(MyHalfwayPoint);
  With DBChart1.Canvas do
   begin
     Pen.Width: =3;
     Pen.Style: =psSolid;
     Pen.Color: =clBlack;
    With DBChart1 do
    begin
     MoveTo(ChartRect. Left, YPosition);
     LineTo(ChartRect. Left+Width3D, YPosition-Height3D);
     LineTo( ChartRect.Right+Width3D, YPosition-Height 3D);
    end;
  end;
end;

序列的值轉換到屏幕坐標

    序列也有類似轉換坐標到點值的方法，其不同之處是使用序列提供的方法，而不需要知道軸的精確位置。

• CalcPosValue：這段代碼計算Series的值為1000時，序列在屏幕的位置。

Var Mypos: Integer;
Mypos : =Series1. CalcPosValue(1000);

或者:

MyYPos:=Series1.CalcPosValue( Series1.YValue[0])；//第一個點

• CalcXPos和 CalcY Pos：計算一個指定的點或值的X、Y坐標。

MyXPos : =Series1.CalcXPos(EncodeDate(2000, 12, 31));

或者:

MyXPos : =Series1.CalcXPos(Series1.XValues.Last ); //最后一個點

• XScreenToValue和YScreenTovalue：從屏幕像素轉換到點的值。

Var MyValue:Double;
MyValue : =Series1.YScreenToValue(Y);

    利用這個方法可以使用 Series.Clicked功能，給出一對XY坐標，就可以得到點的值。

圖表畫布( Chart Canvas)

    Chart.Canvas是一個標準的Delphi畫布，使用畫布特性可以控制圖表的外觀。

• 寫畫布( Writing to the Canvas)

    下面的代碼將畫布的背景劃分為5個區域，并根據顏色數組著色：

procedure TDrawForm.LineSeries1BeforeDrawValues(Sender: Tobject);
Const
  MyColors:array 1..5] of TColor (clNavy, clGreen, clYellow, clRed, S00000080);
var t, partial: Integer;
   tmpRect:TRect;
  With Chart1 do
   Begin
     tmpRect: =ChartRect;
     tmpRect. Right: =tmpRect .Left;
     partial: =ChartWidth div 5;  //劃分為5部分
     Canvas.Brush.Style:=bsDiagCross;//改變刷子風格
     Canvas.Pen.Style: =psClear;
     for t:=1 to 5 do      //每部分填充不同的顏色
     Begin
             tmpRect.Right:=tmpRect.Right+partial+1；//調節矩形的維數
             Can               Right+Width3D, Bottom-Height3D);
                tmpRect. Left:=tmpRect.Right;    //調節矩形
             end;
      end;
end;

內部位圖( Internal Bitmap）

    TChart組件有一個內部位圖對象，作為一個隱含的緩沖區，當繪制完成后，緩沖區被復制到屏幕視頻區域后顯示。TChart的Canvas屬性返回一個內部位圖畫布對象。在Chart繪制到內部位圖以后，它被拷貝到屏幕畫布，Chart的Canvas屬性引用這個最初的“真”的圖表畫布。

圖表區域( Chart Regions）

    通過調用 Chart1.Invalidate或Series1.Repaint可以強行重新繪制。圍繞圖表的最大矩形區域是 ChartBounds屬性，ChartWidth、ChartHeight、ChartXCenter和ChartYCenter是基于ChartBounds屬性的合適的坐標。坐標軸被繪制在這個空間里， ChartRect屬性返回由軸限制的矩形區域內(2D和3D相同)。

    圖表的圖例有一個RectLegend全局屬性，定義了圖例的矩形范圍。圖表的標題和頁角有一個TitleRect全局屬性定義了標題和頁角所在的矩形區域。圖表的Width3D和Hight3D(像素)是3D深度的維數， SeriesWidth3D和SeriesHeight3D是圖表中每個序列的維數。

繪制( Drawing）

    下面是繪制的一個例子，這個例子在Chart1的中間繪制一條水平線：

procedure TForm1. Chart1AfterDraw(Sender: Tobject);
begin
With Chart1 do
begin
Canvas.Pen.Color:=clYellow;
Canvas.MoveTo(ChartBounds.Left, ChartYCenter );
Canvas.LineTo(ChartBounds.Right, ChartYCenter);
end;
end;

    在坐標軸空間內繪制：

procedure TForm1, Chart1AfterDraw(Sender:TObject);
begin
Canvas.Pen.Color:=clYellow;
                    Canvas.MoveTo(ChartRect.Left, ChartYCenter );
                    Canvas.LineTo(ChartRect.Right, ChartYCenter);
end;
end;

    在序列Series1的每個點繪制一條線段：

procedure TForml.Series1AfterDrawValues(Sender: Tobject);
var  t, x, y : Integer;
begin
          for t:=0 to Series1. Count -1 do
          begin
                 x:=Series1. CalcXPos(t);
                 y:=Series1. CalcYPos(t);
               Chart1.Canvas. MoveTo(x-8,y-8);
               Chart1.Canvas. LineTo(x+8, y+8);
      end;
end;

繪制文本( Drawing Text）

    如果想在屏幕顯示、打印的字體尺寸和元文件的字體尺寸相同的話，可以總是設置Chart1.Canvas.Font.Height為負值，而無需使用 Font.Size設定字體的尺寸。也就是說，為了避免屏幕顯示、打印和繪制到元文件的字體不一致，只需將 Chart1.Canvas.Font.Height設為負值，而不要去設置字體的尺寸。

    下一節我們將會介紹第三章圖表與序列的操作維護：點擊事件。如果有對Teechart圖表感興趣的朋友，可以多多關注本教程，并且歡迎在評論區留言。

相關資料推薦：

上一章：圖表的放大和滾動

Teechart 2019資源合集

    現TeeChart for .NET，TeeChart for JavaScript/HTML5，TeeChart for Xamarin.Android等均已加入在線訂購，現在搶購可立享優惠！

    關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。