TeeChart For VCL/FMX V2017使用教程:第二章-圖表顯示參數

      第二章 圖表顯示參數

      圖表顯示特性是影響圖表整體外觀的因素。他們包括以下定義圖表顏色的屬性和方法:背景、標題和他們的位置、邊緣、邊框和斜面、背景圖像、框架和可視的座標軸、筆的顏色和寬度、3D、壁紙等等。

        幾乎所有這些屬性都可以通過圖表編輯器在設計或運行時獲得,並且您可以在運行時通過編程方式修改這些屬性。

        全部圖表的外觀特徵被分組到這些類別中:

                General(一般)

                Axis(座標軸)

                Titles(標題)

                Legend(圖例)

                Panel(面板)

                Paging(分頁)

                Walls(牆壁)

                3D

        如果打開Chart Editor(圖表編輯器)並瀏覽Chart(圖表)頁面,就會發現這些分組。Other(其他)屬性會影響圖表的“外觀”。這些包括序列色彩和標記特性,單個軸和網格顯示屬性和標籤。這些將在後面的教程中討論。

        本教程附帶的演示稱爲DisplayProject,可以在已安裝的TeeChart文件夾下的 “Examples\Chart display”文件夾中找到。(譯註:在2017新版中無此演示程序)


開始使用圖表顯示屬性

        在Form(窗體)中添加一個新的圖表,你將看到它顯示爲灰色的面板背景的3D形狀,2個牆壁(底部和左邊),框架(定義圖表的可繪製區域的框架)和一個默認的圖表標題頭“TeeChart”。

        右鍵點擊圖表,從菜單中選擇“Edit Chart(編輯圖表)...”去訪問圖表編輯器。第一個頁面是Series(序列)頁面,這個頁面現在是空的,我們將在另一個教程中看到。選擇第二個圖表選項卡“General(一般”來訪問常規圖表屬性頁面。

2.1 General(一般)圖表屬性

        General(一般)選項包括Mouse(鼠標)、Zoom(縮放)、Scrool(滾動)、Cursor(光標)和Fonts(字體)、Palette(調色板)和Hover(盤旋)。

        查看Zoom(縮放)和Scroll滾動)教程,瞭解更多關於縮放和滾動的信息。

        您可以通過從Cursor(光標)選項卡下的下拉列表中選擇改變光標類型。

        在圖表上顯示的任何文本都可以通過改變Fonts(字體)標籤下的字體屬性來進行修改。

2.2 Axis Properties(座標軸屬性)

        座標軸的控制是一個相當複雜的難以理解的領域,在後面的教程中會更深入地討論它。這裏我們將介紹座標軸和框架顯示的基本原理。

        第二個圖表頁面包含定義座標軸框架特徵的屬性。


        圖表中有5個軸。Left(左邊)、Top(頂部)、Right(右邊)、Bottom(底部)和Depth(深度)。圖表框環繞顯示的部分爲可繪製區域,沒有數據對應的特徵(看見後面牆壁)。默認情況下,“Depth”的初始化是不可視的。所有其他的座標軸都是可視的,當一個序列被添加到圖表中並且與這些軸相關聯時(左邊和底部是默認的)。通過使用對話框中的+和-鍵,可以添加/移除自定義軸。爲了使一個自定義的軸可視(對於任何其他軸),一個序列必須與軸相關聯。有關自定義座標軸的更多信息,請參閱座標軸教程
        支持顯示軸和框架的關鍵屬性是:
        Visible (可視)
        該複選框啓用或禁用顯示所有軸。如果後牆壁框架是可見的,那麼當這些軸被隱藏時,圖表圍繞區域仍然是可見的。結果將是出現一個更大的圖表,因爲沒有區域是爲座標軸標籤預留的。每個Axis(軸)的可視屬性(Scales(刻度)選項卡)覆蓋每個軸的可視特性。如果您選擇列表中的Depth Axis(深度軸),那麼您將會注意到深度軸的Scales::Visible默認是“不可視”的。
        運行時 
                例如:Chart1.Axes.Visible := True;
        座標: 左邊、右邊、頂部、底部和深度可視
        在列表盒中選擇您希望顯示或隱藏的軸,並在Scales(刻度)選項卡上切換Visible(可視)複選框,以控制該特定軸的顯示。
        運行時

                例如: Chart1.Axes.Bottom.Visible = False

2.3 Titles Properties(標題屬性)

        圖表編輯器 Titles標題)頁控制圖表標題、頁眉頁腳的特性。


        使用下拉式的組合框來選擇Title(標題)、Foot(頁腳)、SubTitle(子標題)或SubFoot(子頁腳)。Text文本)選項卡中輸入所需的文本。您可以輸入多行標題。

 運行時:

        TChartTitleText(文本)屬性是一個Tstrings組件。您可以在Header(頁眉)中添加幾行:

例如:

With Chart1.Title.Text do

begin

  Add('My First Line');

  Add('My Second Line');

end;

        然後,您可以修改文本的行

例如:

With TChart1.Title do

begin

  Text[0]:= 'my1stline revised';

end;

2.3.1 Options(選項)

       

         Alignment(對齊)指的是對圖表區域的標題(或頁腳)的對齊,而不是整個圖表面板。圖表區域是圖表的可繪製區域,加上標籤圖例

運行時:

         Chart1.Title.Alignment := taCenter;

2.3.2 Position(位置)

       使用位置來覆蓋Title標題)Footer頁腳)默認位置,並設置一個自定義位置(與圖表頂部、左邊的像素關係)

運行時:

            Chart1.Title.CustomPosition:=True;

            Chart1.Title.Top:=Chart1.Title.Top+30;

2.3.3  Format(格式)

        包含標題欄的設置,如Frame(框架)Background背景)顏色等。

        設置Transparency(透明度)以查看Border邊框)

        例如 

(1) Pattern 圖案模式)

        Pattern(圖案模式)指的是Title 標題)Footer頁腳)的背景圖案模式。



        選中的Pattern(圖案模式)將位於文本之後。

        運行時:

        例如

                Chart1.Title.Brush.Style := bsFDiagonal;

(2)Border(邊框)

        Border(邊框)頁面有4個子頁面:Frame(框架)、Corners(角)、Callout(引線標記)、Bevel(倒角)

        在標題(標題頁腳、子標題和子頁腳)周圍添加一個邊框,可以選擇一個Bevel(倒角)效果,也可以是一個Frame(框架)圍繞它。

3 Font(字體)

        Font(字體)頁面有7個子頁面。        

        Font(字體)頁面的Edit(編輯按鈕將允許訪問Font Dialog字體對話框)窗口,該窗口允許選擇Windows字體,及其樣式(斜體、粗體等)和顏色的定義。

        運行時:

            Chart1.Foot.Font.Name := 'Times New Roman';

            Chart1.Foot.Font.Style := [fsBold];

(4) Emboss(浮雕)

        啓用/禁用標題欄中的浮雕效果

(5) Shadow(陰影)

        在標題、頁腳、子標題和子頁腳邊框周圍加上一個陰影。

(6) Picture(圖片)

        圖像可以用於文本框的背景,來代替使用顏色。通過對圖像應用過濾器,可以對其進行修改,從而獲得最好的結果。

(7) Children(孩子)

         Children(孩子)可以增加子標題

2.3.4 Text(文本)

        包含標題文本外觀格式特徵。

        例如:Edit(編輯…)按鈕將允許訪問FontDialog(字體對話框)窗口,該窗口允許選擇Windows字體,及其樣式(斜體、粗體等)和顏色的定義。

2.3.5 Margins(邊距)

        設置主題文本的四個邊緣位置。也就是文本四周距邊框的距離,有三個單位可選。

2.4 Legend Properties(圖例屬性)

        在後面的教程中,將討論Legend圖例)內容。在圖表編輯器圖例頁面中,您可以定義圖例的外觀。重要的初始步驟是知道如何控制圖例對齊和可視屬性、顏色、字體、框架、陰影等。

        此頁面有7個子頁面:Style(樣式)、Position(位置)、Symbols(符號)、Title(標題)、Format(格式)、Lines(線)、Columns(列)


2.4.1 Style(樣式)

    切換/關閉圖例顯示並設置圖例顯示內容特性(包括複選框)

    運行時:

    示例使用複選框來控制圖例顯示。

        Chart1.Legend.Visible :=Checkbox1.Checked;

 

Dividing Lines(分界線)

    用於在圖例框中的圖例條目之間畫線。TChartPen屬性應用

    運行時:

    例如

        Chart1.Legend.DividingLines.Visible := True;

        Chart1.Legend.DividingLines.Color := clBlue;

2.4.2 Position(位置)

        設置默認顯示位置,或啓用圖例的自定義位置。TChart將改變圖例的形狀以適應位置。如果圖例被設置在圖表的一側(左或右),默認情況下,這個圖例的內容從上到下作爲一個列表。如果圖例位於圖表下方或上方,那麼圖例內容就會並排放置。可以使用Resize Chart調整圖表大小)選項和/或使用自定義位置來覆蓋默認的行爲。更多有關圖例的自定義位置,請參閱圖例教程。

        例如 ResizeChart(調整圖表大小)

        Resize Chart調整圖表大小)定義了圖表是否會爲圖例留下空間。這使得圖例可以被放置在圖表區域內。

        運行時:

        例如    Chart1.Legend.ResizeChart := True;

        %Top position(頂部位置)

        運行時:

        例如  Chart1.Legend.TopPos := 20;

2.4.3 Symbols(符號)

        圖例符號的大小和格式。

        %Color width(顏色寬度)

        定義圖例中顏色框的寬度。

        運行時:

        例如    Chart1.Legend.ColorWidth:=20;

        Gradient(漸變)在圖例框中啓用/禁用漸變

2.4.4 Title(標題)

        定義了圖例標題和圖例標題框的特徵。

        運行時:

                 例如  

               With Chart1.Legend.Title do

begin

  Font.Height:=14;

  Font.Color:= clBlue;

  Color:= clYellow;

  Shadow.Smooth:=true;

  BevelWidth:=4;

  TextAlignment:=taCenter;

end;

         圖例文本內容的文本特徵。

        運行時:

  With Chart1.Legend do

  begin

    Color := clBlue;

    Font.Name := 'Times New Roman';

    Font.Color:=clYellow;

  end;

 2.4.5 Format(格式)

        包含了圖例框的設置,如框架、背景顏色等

        Emboss(浮雕),在圖例的邊框上增加了浮雕效果。

        Picture(圖片),圖像可以用在圖例框的背景上,來代替使用顏色。通過對圖像應用過濾器,可以對其進行修改,從而獲得最好的結果。

        例如Shadow(陰影)

        用於顯示圖例框陰影的屬性。您可以定義顏色和大小。

        運行時:

        例如    Chart1.Legend.ShadowColor := clYellow;

2.4.6 Lines(線)

        您可以單獨地定義邊框,也可以與Bevel(倒角屬性結合。混合Bevel(倒角和邊框,並且操縱寬度提供了幾乎任何3D效果的組合。

        Shadow(陰影):在圖例框上添加一個陰影。

2.4.7 Columns(列)

        定義每一列的圖例條目的寬度

2.5 Panel Properties(面板屬性)

        這個TeeChart面板頁面允許您設置參數,可以極大地增強圖表的外觀。面板的漸變效果由支持真彩色的顯示器觀看最好,但是在255彩色屏幕上的顏色組合也是可接受的。

        這個頁面有7個子頁面:Color(顏色)、Borders(邊框)、Margins(邊距)、Gradient(漸變)、Shadow(陰影)、Emboss(浮雕)、Image(圖像)。


        現在你已經很熟悉了TeeChart屬性,所以我們不會在這裏運行所有的屬性。可以通過TChart組件訪問面板屬性和方法。

        重點領域是:

2.5.1 Color(顏色)

        例如Panel Color(面板顏色)

        Color顏色)會用所選的顏色來描繪整個圖表的背景。如果您選擇查看背景Gradient漸變)或Image圖像),它們將隱藏Panel Color面板顏色)。如果你設置了一個Back後面)顏色,它只會在Chart Frame圖表框)中替換Panel面板)顏色。

2.5.2 Border(邊框)

        您可以獨立地定義Border(邊框),也可以與Bevel(倒角)屬性結合。在邊框設置爲可見的情況下,您將在Chart Panel(圖表面板)的外部獲得一個“凹陷”邊框效果。混合Bevel(倒角)和Border(邊框)並且操縱Width(寬度)會產生幾乎任何3D效果的組合。

        例如  Bevel Inner(內倒角)/BevelOuter(外倒角)/Width(寬度)

        這些屬性將在圖表面板的邊框上產生多種3D效果。在設計時修改它們,看看它們是如何影響圖表邊框凹凸變化的。

2.5.3 Margin(邊距)

        你可以確定面板周圍的Margin(邊距)尺寸。每個圖表組件有四個邊距屬性:左邊距、右邊距、上邊距和下邊距。

        邊距被定義爲Chart Border圖表邊框)和Chart Frame圖表框)之間的距離,並表示爲圖表面板外形尺寸的百分比。

        默認值,上邊距和下邊距爲4%,左邊距和右邊距爲3%。

        在圖表編輯器的邊欄中移動旋轉框將會在設計時顯示改變每個邊距的效果。

        運行時屬性是:

Chart1.MarginTop

Chart1.MarginLeft

Chart1.MarginRight

Chart1.MarginBottom

        在演示項目中應用的示例使用UpDown按鈕:

procedure TForm1.UpDown3Click(Sender: TObject; Button: TUDBtnType);

begin

Chart1.MarginTop := 30 - UpDown3.Position;

end;

2.5.4 Gradient(漸變)

        要定義一個Gradient漸變),你必須選擇一個StartColor和EndColor(另外,可選MidColor),並使之成爲Visible可見)的漸變。漸變將覆蓋整個圖表面板。漸變趨勢定義了顏色在Start開始)、Mid中)、EndColor(結束顏色)之間變化的趨勢

        運行時:

        例如:

  With Chart1.Gradient do

  begin

    StartColor := clBlue;

    EndColor := clWhite;

    Direction := gdTopBottom;

    Visible := true;

  end;

2.5.5 Shadow(陰影)

        當Shadow Visible(陰影可視)啓用時,您可以在Chart Panel(圖表面板)的外邊添加一個陰影。通過調整顏色、大小和透明度,並與Bevel(倒角)和Border(邊框)的屬性相結合,可以獲得令人印象深刻的3D效果。

        如果你需要在圖表面板的頂部或左邊分別使用陰影,則使用負值來表示Vertical垂直)和Horizontal水平)尺寸。

2.5.6 Emboss(浮雕)

        可以使面板的周圍出現浮雕效果

 2.5.7 Image(圖像)

        您可以選擇任何位圖(.bmp)文件作爲背景圖像。圖像可以在圖表面板上居中、平鋪或拉伸,或者被限制在圖表框的範圍內。

        運行時:

        使用Image.LoadFromFile在運行時將圖像添加到圖表中。

        例如:

if OpenPictureDialog1.Execute then

   Chart1.Image.LoadFromFile(OpenPictureDialog1.FileName);

2.6 Paging Properties(分頁屬性)

        爲了要快速的瀏覽圖表,Paging(分頁)允許一個圖表被劃分爲多頁,每頁顯示一組固定數量的數據。有關更多信息,請參閱Paging(分頁)教程。


2.7 Walls Properties(牆屬性)

        有4個Walls(牆):Left(左)、Right(右)、Bottom(底)和Back(後),可以用2D或3D表示。
Walls(牆壁)屬性可以通過右側代碼來訪問:

TChart1.View3DWalls

TChart1.LeftWall

TChart1.RightWall

TChart1.BottomWall

TChart1.BackWall


2.7.1 WallBorder(牆邊框)

        點擊Border(邊框)頁面將會進入TchartWall組件中Pen(筆)的定義。這Pen(筆)是與許多其它TeeChart對象一樣的。

        visible(可視)屬性啓用/禁用顯示Border(邊框)。在BackWall(後牆)的情況下,座標軸是可見的,Wall Border(牆邊框)將隱藏在這些軸後面,這樣你只會看到啓用/禁用Border(邊框)的結果,如果你隱藏部分或全部軸。(例如,使軸頂部和右邊不可見,可以看到切換牆邊框可見屬性的結果。例如Chart1.BackWall.Pen.Visible:= True;)。

        爲了解Border Pen(邊框筆)的其它特點,請參閱Pen(筆)。您可以在設計時更改這些屬性以查看結果。

2.8  3D

        此頁面包括3個子頁面:Options(選項)、Views(視圖)、Render(渲染)

        在TeeChart Pro,3D是非常靈活的。您可以選擇將圖表顯示爲:

2D

從正面看的平面圖表

3D Orthogonal(正交)

由矢量線表現的3D的表示深度

3D Native Windows(本機)

可以360˚圖表旋轉的3D畫布

3D Open GL

3D使用360˚圖表旋轉Open GL畫布。當爲圖表啓用OpenGL時,編輯器爲OpenGL選項添加了一個新頁面。


2.8.1 options(選項):

(1) 3Dimensions(3維)

        選擇該屬性(切換)將在設計時將圖表從3D轉換爲2D圖表,設置將在運行時生效。

(2) 3D%

        控制3D效果的深度。更改這個屬性的值將在設計時顯示更改3D百分比的效果。

        運行時屬性:

        3D 可視:Chart1.View3D

        3D% Chart1.Chart3DPercent

        這個Orthogonal(正交)選項,當禁用的時候,它會啓用了Windows本機3D模式,允許您Rotate旋轉)、Elevate翻轉)、offset偏移)圖表、Perspective(透視)。offset(偏移)選項允許你將整個圖表向前移動或移開。在運行時仍然可以在Data Series數據序列)的圖表中進行內部縮放。

2.8.2 Views(視圖)

        選擇各種立體效果共9種

2.8.3 Render(渲染)

        選擇三種渲染模式並進行設置:GDI、GDI+、OpenGL


本 章 完


發佈了13 篇原創文章 · 獲贊 9 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章