Teechart圖表應(yīng)用技術(shù)詳解—第三章之在圖表上自行繪制

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

    TeeChart for .NET中文版讓您在使用和學(xué)習(xí)上沒有任何語言障礙，至少可以節(jié)省30%的開發(fā)時間。TeeChart for .NET中文版具有易上手，使用方便，穩(wěn)定性好，性價比高，價格優(yōu)惠等優(yōu)勢，并且針對Web應(yīng)用提供無限制服務(wù)器分發(fā)授權(quán)方式，非常有利于產(chǎn)品集成。

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

在圖表上自行繪制

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

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

軸的值轉(zhuǎn)換到屏幕坐標(biāo)

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

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

    MyPos保存著值1000在 Chart1， LeftAxis軸上的像素坐標(biāo)，使用這個坐標(biāo)就可以自行繪制當(dāng)前這個點。如果想將像素坐標(biāo)轉(zhuǎn)換到軸的值，可以使用下面的函數(shù)。

● CalcPosPoint

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

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

• CalcSizeValue：該函數(shù)計算屏幕空間在巫標(biāo)軸上的范圍。

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

    還可將時間軸轉(zhuǎn)換一個日期范圍周期：

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：當(dāng)使用CalcYPos和CalcXpos繪制時坐標(biāo)原點(0,0)是圖表矩形( ChartRect)的左上角。ChartRect是由圖表四個軸構(gòu)成的封閉區(qū)域。下面的例子是利用畫布特性畫一條線段：

procedure TForm1. Button1Click(Sender: TObject)；
var
   MyHalfwayPoint, YPosition: Integer;
Begin
 With Series1. YValues do
  MyHalfwayPoint: -round(((MaxValue-MinValue)*0. 5)+ MinValue);
                    //計算上述值的屏幕像素坐標(biāo)
  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;

序列的值轉(zhuǎn)換到屏幕坐標(biāo)

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

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

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

或者:

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

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

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

或者:

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

• XScreenToValue和YScreenTovalue：從屏幕像素轉(zhuǎn)換到點的值。

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

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

圖表畫布( Chart Canvas)

    Chart.Canvas是一個標(biāo)準(zhǔn)的Delphi畫布，使用畫布特性可以控制圖表的外觀。

• 寫畫布( Writing to the Canvas)

    下面的代碼將畫布的背景劃分為5個區(qū)域，并根據(jù)顏色數(shù)組著色：

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;//改變刷子風(fēng)格
     Canvas.Pen.Style: =psClear;
     for t:=1 to 5 do      //每部分填充不同的顏色
     Begin
             tmpRect.Right:=tmpRect.Right+partial+1；//調(diào)節(jié)矩形的維數(shù)
             Can               Right+Width3D, Bottom-Height3D);
                tmpRect. Left:=tmpRect.Right;    //調(diào)節(jié)矩形
             end;
      end;
end;

內(nèi)部位圖( Internal Bitmap）

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

圖表區(qū)域( Chart Regions）

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

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

繪制( 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;

    在坐標(biāo)軸空間內(nèi)繪制：

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）

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

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

相關(guān)資料推薦：

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

Teechart 2019資源合集

    現(xiàn)TeeChart for .NET，TeeChart for JavaScript/HTML5，TeeChart for Xamarin.Android等均已加入在線訂購，現(xiàn)在搶購可立享優(yōu)惠！

    關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。