Smart 控制元件使用(數據分析)

  數據分析元件中的元件可用於動態展示數據，可以更顯直觀。

1. TWidgetProgress 元件

  TWidgetProgress以圓圈的形式圖形化顯示過程的進度。 要使用此控制元件，只需將其放在窗體上，然後使用Value屬性顯示進度。

• 特性
  • 易於使用，只需設定Value屬性即可設定進度
  • 可以對進度變化值的顯示進行動畫處理的選項
  • 通過實心圓（點）或自定義點陣圖在圓上自定義ValueIndicator的屬性
  • 選擇在頂部或底部顯示標題文字
  • 用於自定義顯示值的字型和格式的屬性
  • 用於自定義進度圓的完成和未完成部分的填充顏色和厚度的屬性
  • 通過指定起點和終點角度來更改圓弧範圍的屬性
  • 用於顯示圓圈周圍的刻度線，帶有較大的開始和結束刻度線並帶有標題

1.1. 屬性

  要顯示進度值，請將其設定為Value屬性。通過ValueFont和ValueFormat控制值文字的顯示。

• 通過使用屬性組ValueIndicator控制值在圓上的實際位置的顯示。您可以在Value位置顯示具有不同填充或自定義點陣圖的更大的點。
• 當您設定新值時，控制元件會立即將位置定位到新值。但是您可以通過啟用屬性ValueAnimation使其伴隨動畫。
• 通過屬性組CircleOptions調整進度圓的完成和未完成部分的厚度和顏色填充。
• 通過CaptionOptions屬性組顯示標題。標題可以放置在控制元件的頂部或底部。
• 高級功能包括控制進度圓圈的開始和結束角度，在圓圈周圍顯示刻度線，在刻度線的起點，終點和中心顯示標題。

屬性	屬性說明
Value	以百分比設定進度值，並相應顯示圓形進度弧
ValueFormat	設定格式字串以在圓心處顯示值文字。 預設格式%g%%顯示帶有百分比符號的值。 請注意，此預設格式末尾的2個百分號符號顯示為單個百分號
ValueFont	設定在圓心顯示數值文字的字型
ValueIndicator	設定與該值相對應的圓上實際位置的顯示效果
ValueAnimation	啟用該屬性可展示數值變化的過渡動畫
CircleOptions	包括用於控制進度圈顯示的屬性
Tickmarks	包括用於在進度圈周圍顯示刻度線的屬性
CaptionOptions	設定標題以顯示在小部件上

1.1.1. ValueIndicator 屬性

  設定與該值相對應的圓上實際位置的顯示效果。包含以下屬性：

• Kind： 可選項為piDot，piBitmap和piNone。 預設值為piDot，其在數值位置顯示一個圓或數值點。 如果選擇piBItmap，它將允許您顯示為BitmapName屬性分配的自定義點陣圖。
• Size： 如果Kind設定為piDot，則該屬性規定點的直徑。 預設大小與圓環的預設粗細相同。
• Fill： 如果Kind設定為piDot，則設定值點的顏色。
• BitmapName： 設定BitmapContainer中分配給WidgetProgress控制元件的點陣圖名稱。 如果將上述種類設定為piBitmap，則該點陣圖將顯示為值指示器。

1.1.2. CircleOptions 屬性

  包括用於控制進度圈顯示的屬性。包含以下屬性：

• Fill： 設定圓的完成部分的顏色。
• UnfinishedFill： 設定圓的未完成部分的顏色。
• Thickness： 設定圓弧已完成部分的厚度。
• UnfinishedThickness： 設定圓弧未完成部分的厚度。
• Margin： 設定要在小部件邊緣空出的邊緣距離。
• StartAngle： 設定進度起點的角度，預設值為0（指示點位於頂部）。
• EndAngle： 設定進度終點的角度，預設值為360（指示點位於底部）。

  • 如果將StartAngle設定為-90，EndAngle設定為90，則控制元件將如下圖所示。

    

1.1.3. Tickmarks 屬性

  包括用於在進度圈周圍顯示刻度線的屬性。包含以下屬性：

• Count： 設定為非零值時，顯示進度圈周圍有多少刻度線。
• Size： 設定刻度線的長度。
• Stroke： 設定筆觸以繪製刻度線。
• Gap： 設定圓圈和刻度線頂端之間的間隙。

• CenterText： 設定文字，使其顯示在圓心數值的下方。

  如果前面描述的屬性CircleOptions.StartAngle和CircleOptions.EndAngle被設定為不完整的圓，則可以在TickMarks中使用以下附加屬性。

• StartEndMarkSize： 設定開始刻度標記和結束刻度標記的長度，該刻度長度可與其他刻度不同。
• StartEndMarkWidth： 設定開始和結束刻度線的寬度。
• StartText： 設定顯示在起始標記附近的文字標籤。
• EndText： 設定顯示在結束標記附近的文字標籤。

1.1.4. CaptionOptions 屬性

  設定標題以顯示在小部件上，包含以下屬性：

• Text： 設定字幕文字。
• Font： 設定字幕字型。
• Position： 當字幕被設定時，該選項可選擇字幕是置於影象頂部(cpTop)、字幕底部(cpBottom)或者隱藏字幕(cpNone)。

  設定標題時，圖形部分的大小將會減小為標題部分留出顯示空間。

1.2. 程式碼示例

• 顯示進度數值

FThis.WidgetProgress1.Value := 45;

• 設定字幕

FThis.WidgetProgress1.CaptionOptions.Text := 'Server Dallas';

• 使用深色漸變背景和刻度線完全更改配色方案：

FThis.WidgetProgress1.Value := 30;  
FThis.WidgetProgress1.Fill.Color := gcNavy;  
FThis.WidgetProgress1.Fill.ColorTo := gcRoyalBlue;  
FThis.WidgetProgress1.Fill.Kind := gfkGradient;  
FThis.WidgetProgress1.CircleOptions.Fill.Color := gcWhite;  
FThis.WidgetProgress1.CircleOptions.Fill.ColorTo := gcPowderBlue;  
FThis.WidgetProgress1.CircleOptions.Fill.Kind := gfkGradient;  
FThis.WidgetProgress1.CircleOptions.UnfinishedFill.Color := gcNavy;    
FThis.WidgetProgress1.CircleOptions.Thickness := 5;  
FThis.WidgetProgress1.CircleOptions.UnfinishedThickness := 5;  
FThis.WidgetProgress1.ValueIndicator.Fill.Color := gcPowderBlue;  
FThis.WidgetProgress1.ValueFont.Color := gcPowderBlue;  
FThis.WidgetProgress1.Tickmarks.Count := 10;  
FThis.WidgetProgress1.Tickmarks.Stroke.Color := gcPowderBlue;  
FThis.WidgetProgress1.Tickmarks.Size := 12;

使圖形為半圓顯示：

FThis.WidgetProgress1.CircleOptions.StartAngle := -90;  
FThis.WidgetProgress1.CircleOptions.EndAngle := +90;

2. TWidgetMultiProgress 元件

  TWidgetMultiProgress如上圖所示，以同心圓圖形方式顯示多個程序的進度。要使用此控制元件，只需將其放在窗體上並向其中新增子圈項。 然後為每個專案設定一個值，可在設計器中顯示，您可以通過程式碼為每個專案設定Value，這與前面介紹的WidgetProgress非常相似。圖例也可以顯示在各個位置。

2.1. 屬性

• 在設計器或程式碼中新增其他子圈專案。
• 設定一個值以顯示專案的進度。
• 您可以通過該專案的Fill屬性來更改顏色。
• 通過屬性組CircleOptions調整所有圓的完成和未完成部分的厚度。
• 通過CaptionOptions屬性組顯示標題，標題可以放置在控制元件的頂部或底部。
• 顯示圖例以描述各個位置的專案。請注意，如果所有子圈專案的標題均為空，則不會顯示圖例。

屬性	屬性說明
CircleItems	包含顯示每個圓圈進度的專案
ValueFormat	設定格式字串以在子圈專案的末尾顯示進度值文字。預設格式%g%%顯示帶有百分比符號的值。請注意，此預設格式末尾的2個百分號符號顯示為單個百分號
ValueFont	設定數值的字型
CircleOptions	包括用於控制進度圈顯示的屬性
Lengend	包括顯示圖例的屬性
CaptionOptions	設定標題以顯示在小部件上

2.1.1. CircleItems 屬性

  包含顯示每個圓圈進度的專案。 您可以在對像檢查器中的屬性后單擊…來管理專案，新增，重新排序或刪除專案。最外面的圓圈是索引為0的專案。每一個子圈項包含如下屬性：

• Caption： 設定圈子專案的標題，在圖例中顯示。 字幕僅顯示在圖例中，並且僅當您設定了至少一項的標題時才顯示圖例。
• Value： 設定進度值（以百分比為單位），並相應地顯示該專案的圓形進度弧。
• Fill： 設定完成部分圓弧的顏色。
• UnfinishedFill： 設定未完成部分圓弧的顏色。預設值為None，這表示為不顯示未完成部分圓弧的顏色。

2.1.2. CircleOptions 屬性

  包括用於控制進度圈顯示的屬性。包含以下屬性：

• Thickness： 設定圓弧已完成部分的厚度。
• UnfinishedThickness： 設定圓弧未完成部分的厚度。
• ValueGap： 設定數值文字與圓弧末端間的距離。
• Margin： 設定要在小部件邊緣空出的邊緣距離。
• StartAngle： 設定進度起點的角度，預設值為0（指示點位於頂部）。
• EndAngle： 設定進度終點的角度，預設值為360（指示點位於底部）。

2.1.3. Lengend 屬性

  包括顯示圖例的屬性。

• Border： 圖例表邊框的筆觸。
• Fill： 圖例的填充顏色。
• Margin： 圖例邊緣寬度。
• Position： 圖例顯示的位置。

2.1.4. CaptionOptions 屬性

  設定標題以顯示在小部件上，包含以下屬性：

• Text： 設定字幕文字。
• Font： 設定字幕字型。
• Position： 當字幕被設定時，該選項可選擇字幕是置於影象頂部(cpTop)、字幕底部(cpBottom)或者隱藏字幕(cpNone)。

  設定標題時，圖形部分的大小將會減小為標題部分留出顯示空間。

2.2. 程式碼示例

• 為圖例設定標題和位置：

FThis.WidgetMultiProgress1.CaptionOptions.Text := 'Sales of Beverages (Coca-Cola)';  
FThis.WidgetMultiProgress1.Legend.Position := lpTopRight;  
FThis.WidgetMultiProgress1.CaptionOptions.Position := cpTop;

• 要通過程式碼新增子圈項並對其進行初始化，請執行以下操作：

FThis.WidgetMultiProgress1.CircleItems.Clear;  
AnItem := FThis.WidgetMultiProgress1.CircleItems.Add;  
AnItem.Caption := 'North';  
AnItem.Value := 0;  
AnItem := FThis.WidgetMultiProgress1.CircleItems.Add;  
AnItem.Caption := 'South';  
AnItem.Value := 0; 
AnItem := FThis.WidgetMultiProgress1.CircleItems.Add;  
AnItem.Caption := 'East';  
AnItem.Value := 0;  
AnItem := FThis.WidgetMultiProgress1.CircleItems.Add;  
AnItem.Caption := 'West';  
AnItem.Value := 0;

• 設定數值

FThis.WidgetMultiProgress1.CircleItems.Items[1].Value := 24;

3. TWidgetSetPoint 元件

  TWidgetSetPoint以循環刻度顯示參數的值和相同參數的SetPoint值。 這樣做的目的是強調當前值和設定點之間的差異。 同時，應用程式可以使用自己的邏輯來顯示中心文字以及基於上述差異的開始和結束文字。

  例如，在上面的示例中，SetPoint小部件代表恒溫器的狀態，其中顯示的參數是溫度。 設定點設定為雙點指示的值25。 目前溫度為45，以實心點表示。 兩者之間的陰影區域是為快速視覺表示而陰影的差異。 同時，由於目前溫度高於所需的設定值，因此指示狀態為恒溫器正在冷卻。

3.1. 屬性

• 在SetPoint屬性中設定所需的值。
• 在Value屬性中設定目前值。
• 分別通過ValueIndicator和SetPointIndicator屬性組控制Value和SetPoint點的顏色。
• 通過SetPointStripFill屬性控制從Value到SetPoint的差異條的顏色。
• 使用CircleOptions和Tickmarks屬性組控制圓形軌道和刻度線的外觀。
• 通過Tickmarks屬性組設定開始，結束和居中文字。
• 通過CaptionOptions屬性組顯示標題。 標題可以放置在控制元件的頂部或底部。

屬性	屬性說明
Value	根據ValueOptions設定確定ValueDot位置的值
ValueOptions	Value值的相關設定選項
SetPointIndicator	設定SetPoint點的顯示
CircleOptions	設定控制圓形軌跡顯示的屬性
Tickmarks	包括用於在進度圈周圍顯示刻度線的屬性
SetPointStripFill	設定連線SetPoint和Value的陰影差異帶的顏色
CaptionOptions	設定標題以顯示在小部件上

3.1.1. ValueOptions 屬性

  包含以下設定。

• Format： 設定在圓心處顯示值文字的格式字串。
• Font： 設定再圓心處顯示值文字的字型。
• Min,Max： 設定顯示的值的範圍，根據這些值來確定Value和SetPoint的的位置。

3.1.2. SetPointIndicator 屬性

  設定SetPoint點的顯示。它使用以下屬性來顯示帶有內部圓點的SetPoint點，以將其與Value Dot區分開。

• InnerDotSize： 設定SetPoint的內點直徑。
• InnerDotFill： 設定SetPoint的內點顏色。

3.1.3. CircleOptions 屬性

  包括用於控制圓形軌跡顯示的屬性。

• Fill： 設定軌跡的顏色。
• Thickness： 設定圓形軌道的厚度和寬度。
• Margin： 設定邊緣間隔寬度。
• StartAngle： 設定圓形軌跡起點的角度（以度為單位），預設值為230
• EndAngle： 設定圓形軌跡終點的角度(以度為單位)，預設值為130

3.1.4. Tickmarks 屬性

  包括用於在進度圈周圍顯示刻度線的屬性。包含以下屬性：

• Count： 設定為非零值時，顯示進度圈周圍有多少刻度線。
• Size： 設定刻度線的長度。
• Stroke： 設定筆觸以繪製刻度線。
• Gap： 設定圓圈和刻度線頂端之間的間隙。
• CenterText： 設定文字，使其顯示在圓心數值的下方。
• StartEndMarkSize： 設定開始刻度標記和結束刻度標記的長度，該刻度長度可與其他刻度不同。
• StartEndMarkWidth： 設定開始和結束刻度線的寬度。
• StartText： 設定顯示在起始標記附近的文字標籤。
• EndText： 設定顯示在結束標記附近的文字標籤。

3.1.5. CaptionOptions 屬性

  設定標題以顯示在小部件上，包含以下屬性：

• Text： 設定字幕文字。
• Font： 設定字幕字型。
• Position： 當字幕被設定時，該選項可選擇字幕是置於影象頂部(cpTop)、字幕底部(cpBottom)或者隱藏字幕(cpNone)。

  設定標題時，圖形部分的大小將會減小為標題部分留出顯示空間。

3.2. 程式碼示例

• 設定SetPoint與Value

FThis.WidgetSetPoint1.SetPoint := 25;  
FThis.WidgetSetPoint1.Value := 45;

• 設定字幕

FThis.WidgetSetPoint1.CaptionOptions.Text := 'Thermostat';

• 改變中心字幕

FThis.WidgetSetPoint1.Tickmarks.CenterText := 'Heating'

4. TWidgetMarqueeProgress 元件

  TWidgetMarqueeProgress以圓圈形式圖形化顯示過程的進度。 此外，該圓圈像選框一樣旋轉，以指示正在運行的程序。 要使用此控制元件，只需將其放在窗體上，然後使用Value屬性顯示進度。 要使其旋轉，您需要將其MarqueeAnimation屬性設定為活動狀態。

4.1. 屬性

• 要顯示進度值，請將其設定為Value屬性。通過使用ValueFont和ValueFormat屬性來控制值文字的顯示。
• 通過啟用MarqueeAnimation使其旋轉。
• 通過CircleOptions屬性組調整旋轉圓弧的厚度以及進度圓的完成和未完成部分的顏色填充。
• 通過CaptionOptions屬性組顯示標題。 標題可以放置在控制元件的頂部或底部。

屬性	屬性說明
Value	以百分比設定進度值，並相應顯示圓形進度弧
ValueFormat	設定格式字串以在子圈專案的末尾顯示進度值文字。預設格式%g%%顯示帶有百分比符號的值。請注意，此預設格式末尾的2個百分號符號顯示為單個百分號
ValueFont	設定數值的字型
MarqueeAnimation	將此設定為Active允許圓旋轉。 若要更改旋轉速度，請嘗試更改MarqueeAnimation中的Interval和Step屬性。
CircleOptions	包括用於控制進度圈顯示的屬性
CaptionOptions	設定標題以顯示在小部件上

4.1.1. CircleOptions 屬性

  包括用於控制進度圈顯示的屬性。包含以下屬性：

• Fill： 設定圓的完成部分的顏色。
• UnfinishedFill： 設定圓的未完成部分的顏色。
• Thickness： 設定圓弧已完成部分的厚度。
• Margin： 設定要在小部件邊緣空出的邊緣距離。

4.1.2. CaptionOptions 屬性

  設定標題以顯示在小部件上，包含以下屬性：

• Text： 設定字幕文字。
• Font： 設定字幕字型。
• Position： 當字幕被設定時，該選項可選擇字幕是置於影象頂部(cpTop)、字幕底部(cpBottom)或者隱藏字幕(cpNone)。

4.2. 程式碼示例

• 設定數值

FThis.WidgetMarqueeProgress1.Value := 45;

• 設定字幕

FThis.WidgetMarqueeProgress1.CaptionOptions.Text := 'Server Chicago';

• 開啟動畫

FThis.WidgetMarqueeProgress1.MarqueeAnimation.Active := true;

5. TWidgetMarqueeContinuousProgress 元件

  TWidgetMarqueeContinousProgress顯示旋轉動畫以指示程序正在進行。 動畫包括3個突出顯示的部分，這些部分圍繞圓旋轉，如上面的螢幕快照所示。 該小部件不顯示進度的任何值。 要使其旋轉，您需要將其MarqueeAnimation屬性設定為活動狀態。

5.1. 屬性

• 通過啟用屬性MarqueeAnimation使其旋轉。
• 設定CenterText以顯示狀態文字。
• 在MarqueeAnimation屬性組中設定節數，此屬性組還允許您設定旋轉的突出顯示部分的顏色。
• 通過屬性組CircleOptions調整常規非突出顯示部分的顏色，這與早期的進度控制元件類似。
• 通過CaptionOptions屬性組顯示標題，標題可以放置在控制元件的頂部或底部。

屬性	屬性說明
MarqueeAnimation	包含控制動畫的屬性
CircleOptions	包括用於控制進度圈顯示的屬性
CaptionOptions	設定標題以顯示在小部件上

5.1.1. MarqueeAnimation 屬性

  包含控制動畫的屬性：

• Active： 設定圍繞圓旋轉的活動的動畫。
• SectionCount： 設定要在圓圈中顯示的部分的數量。
• SectionGapAngle： 根據角度差設定截面之間的間隙。
• Fill： 設定主要的動畫突出顯示部分的顏色。
• SideFill： 設定主要動畫部分周圍2個相鄰部分的顏色。

  例如，在上面的螢幕截圖中，「Fill」和「 SideFill」顏色分別為gcOrange和gcGold。 因此，主要的橙色部分被2個金色部分包圍。 所有這三個部分都圍繞圓旋轉。

5.1.2. CircleOptions 屬性

  包括用於控制進度圈顯示的屬性。包含以下屬性：

• Fill： 設定圓的完成部分的顏色。
• UnfinishedFill： 設定圓的未完成部分的顏色。
• Thickness： 設定圓弧已完成部分的厚度。
• Margin： 設定要在小部件邊緣空出的邊緣距離。

5.1.3. CaptionOptions 屬性

  設定標題以顯示在小部件上，包含以下屬性：

• Text： 設定字幕文字。
• Font： 設定字幕字型。
• Position： 當字幕被設定時，該選項可選擇字幕是置於影象頂部(cpTop)、字幕底部(cpBottom)或者隱藏字幕(cpNone)。

  設定標題時，圖形部分的大小將會減小為標題部分留出顯示空間。

5.2. 示例程式碼

• 顯示文字：

FThis.WidgetMarqueeContinuousProgress1.CenterText := 'Working...';

• 開啟動畫：

FThis.WidgetMarqueeContinuousProgress1.MarqueeAnimation.Active := true;

6. TWidgetArrow 元件

  TWidgetArrow顯示一個箭頭，該箭頭根據在Value屬性中設定的角度改變顏色。 值（角度）可以設定為最小-90度和最大+90度。 最小值對應于向下指箭頭，最大值對應于向上指箭頭。 當值（角度）從-90變為0到+90時，箭頭的顏色從紅色變為黃色到綠色。這對於從紅色（開始）到綠色（完成）的進度可能是有用的視覺指示。

6.1. 屬性

• 將Value設定在-90到+90範圍內，以該角度顯示箭頭，中間顏色介於紅色和綠色之間。
• Value可顯示在箭頭的旁邊，也可以通過將ValueFormat屬性設定為空來關閉。
• 可以將ValueFormat設定為固定文字，以在箭頭旁邊顯示文字。
• 通過ArrowOptions屬性組在-90、0和+90值處自定義箭頭的顏色。
• 通過ArrowOptions屬性組自定義箭頭的形狀。
• 通過CaptionOptions屬性組顯示標題。 標題可以放置在控制元件的頂部或底部。

屬性	屬性說明
Value	將值設定為在-90到+90範圍內的角度
ValueFont	設定顯示值的字型
ValueText	設定要顯示在箭頭旁邊的文字。 預設情況下，格式為%g以顯示值。 但這也可以是固定的文字，它甚至可以是一個空字串以不顯示
ArrowOptions	包括用於控制箭頭的顏色和形狀的屬性
CaptionOptions	設定標題以顯示在小部件上

6.1.1. ArrowOptions 屬性

  包括用於控制箭頭的顏色和形狀的屬性。

• ColorFrom： 將箭頭的顏色設定為Value=-90時顯示（向下）。
• ColorAtZero： 將箭頭的顏色設定為Value=0時顯示（右）。
• ColorTo： 將箭頭的顏色設定為Value=+90時顯示（向上）。
• Border： 設定箭頭邊框的筆觸。
• Width： 設定箭頭的寬度。
• HeadLength： 設定頭的長度（沿箭頭方向）。
• HeadWidth： 設定頭的寬度。

6.1.2. CaptionOptions 屬性

  設定標題以顯示在小部件上，包含以下屬性：

• Text： 設定字幕文字。
• Font： 設定字幕字型。
• Position： 當字幕被設定時，該選項可選擇字幕是置於影象頂部(cpTop)、字幕底部(cpBottom)或者隱藏字幕(cpNone)。

  設定標題時，圖形部分的大小將會減小為標題部分留出顯示空間。

6.2. 程式碼示例

• 設定外觀

FThis.WidgetArrow1.ArrowOptions.Margin := 10;  
FThis.WidgetArrow1.ArrowOptions.Width := 30;  
FThis.WidgetArrow1.ArrowOptions.HeadWidth := 60;  
FThis.WidgetArrow1.ArrowOptions.HeadLength := 60;

7. TWidgetLCDLabel 元件

  TWidgetLCDLabel通過7段LCD顯示值，並可以新增複雜的漸變和紋理。

7.1. 屬性

屬性	屬性說明
Fill	設定面板的背景顏色
Caption	設定數值顯示選項

7.1.1. Caption 屬性

• Value： 設定要顯示的值。
• ValueType： 設定顯示的值的型別，可選項為vtNormal或者vtDateTime。
• Format： ValuetType為vtNormal時的顯示格式設定。
• TimeFormat： ValueType為vtDateTime時顯示格式。
• Fill： 設定ON時的顏色。
• FillOff： 設施OFF時的顏色。

7.2. 程式碼示例

• 設定值

FThis.WidgetLCDLabel1.Caption.Value := 419.15;

• 自定義外觀

  FThis.WidgetLCDLabel2.Fill.Color := gcYellowgreen;  
  FThis.WidgetLCDLabel2.Fill.ColorTo := gcPalegreen;  
  FThis.WidgetLCDLabel2.Fill.Kind := gfkGradient;  
  FThis.WidgetLCDLabel2.Caption.FillOff.Color := gcLightBlue;  
  FThis.WidgetLCDLabel2.Caption.FillOff.Kind := gfkSolid;  
  FThis.WidgetLCDLabel2.Caption.Value := -20.45;

  FThis.WidgetLCDLabel3.Fill.Color := gcDeepskyblue;  
  FThis.WidgetLCDLabel3.Fill.ColorTo := gcLightBlue;  
  FThis.WidgetLCDLabel3.Fill.Kind := gfkGradient;  
  FThis.WidgetLCDLabel3.Caption.Fill.Color := gcRoyalblue;  
  FThis.WidgetLCDLabel3.Caption.Fill.Kind := gfkSolid;  
  FThis.WidgetLCDLabel3.Caption.FillOff.Color := gcPowderblue;  
  FThis.WidgetLCDLabel3.Caption.FillOff.Kind := gfkSolid;  
  FThis.WidgetLCDLabel3.Caption.Value := 987;

8. TWidgetGauge 元件

  TWidgetGauge是可通過可選的平滑動畫將數據視覺化為儀表。

8.1. 屬性

屬性	屬性說明
Value	設定顯示的值
ValueFormat	設定顯示在LCD上的數值格式
ValueFont	設定顯示在分割槽上的字型
DialText	在錶盤上設定簡短說明文字
DivisionCount	設定要在刻度上顯示的格數
DivisionColor	設定分割標記的顏色
DivisionWidth	設定分割標記的寬度
SubDivisionCount	設定帶有分割槽的數量
SubDivisionColor	設定分割槽標記的顏色
SubDivisionWidth	設定分割槽標記的寬度
OuterCircle	設定最外圈的顏色和寬度
OuterRim	設定顯示在外圈頂部的外緣的顏色和寬度
InnerCircle	設定最裡面的圓的顏色和寬度
Arc	弧外觀選項
Digit	LCD顯示選項
Needle	設定針頭各個部位的顏色
Animation	設定為true時，使針動態移動至下一個值
ExtraNeedles	可設定更多的指針，每個指針可設定Value和顏色屬性
Sections	將刻度區域劃分，以顯示不同的顏色等外觀，如上面的圖所示。

8.1.1. Arc 屬性

• Color： 設定介於外圓和內圓之間的圓弧的顏色。
• Width： 弧的寬度。
• StartAngle： 設定圓弧的起始角度。
• EndAngle： 設定圓弧的結束角度。
• Threshold： 這是一個子範圍，可以在上面的弧中以子弧的形式顯示。它包括許多子屬性，可用於指定「閾值弧」。

8.1.2. Digit 屬性

• Visible： 是否顯示LCD面板。
• Color： 設定顯示數值的顏色。
• BackgroundColor： 設定LCD面板的背景色。

8.2. 示例程式碼

• 以下程式碼用於設定最小值，最大值和不同配色方案的儀表

  FThis.WidgetGauge1.Value := 0;  
  FThis.WidgetGauge1.MinimumValue := 0;  
  FThis.WidgetGauge1.MaximumValue := 100;  
  FThis.WidgetGauge1.OuterCircle.Color := gcDarkslategray;  
  FThis.WidgetGauge1.InnerCircle.Color := gcLightgray;  
  FThis.WidgetGauge1.OuterRim.Color := gcLightgray;  
  FThis.WidgetGauge1.Arc.Color := gcMedGray;  
  FThis.WidgetGauge1.Arc.Threshold.Color := gcDarkslategray;  
  FThis.WidgetGauge1.Digit.BackGroundColor := gcWhite;  
  FThis.WidgetGauge1.DialText := 'Temperature';  
  FThis.WidgetGauge1.Font.Color := gcBlack;

• 新增分割槽以顯示不同的子範圍：

FThis.WidgetGauge1.Sections.BeginUpdate;  
try    
    aSection := FThis.WidgetGauge1.Sections.Add;    
    aSection.StartValue := 20;    
    aSection.EndValue := 30;    
    aSection.Color := gcLime;    
    aSection.SectionType := stBorder;    
    aSection := FThis.WidgetGauge1.Sections.Add;    
    aSection.StartValue := 30;    
    aSection.EndValue := 100;    
    aSection.Color := gcOrangeRed;    
    aSection.SectionType := stBorder;  
finally    
    FThis.WidgetGauge1.Sections.EndUpdate;  
end;

• 新增一個額外的針並將其設定為與演示中的SetPoint相同的值：

  aNeedle := FThis.WidgetGauge1.ExtraNeedles.Add;  
  aNeedle.ShineColor := gcDarkGreen;  
  aNeedle.ShineColorTo := gcLime;  
  aNeedle.Value := 25;  

9. TWidgetTrendIndicator 元件

  TWidgetTrendIndicator顯示Value的圖形，並可以容納不同數量的值，並將它們沿橫軸均勻分佈。 因此，顯示趨勢非常方便。

9.1. 屬性

• 新增值以在設計器或程式碼中繪製圖形。 該圖會自動以可用寬度繪製。
• 將圖形顯示為柱狀圖，您可以在其中控制柱之間的間隙。
• 在底部顯示值以及描述文字。
• 自定義用於繪製圖形線條的顏色和圖形的填充顏色。

屬性	屬性說明
Values	包含用於繪製圖形的值選項。每個專案都包含需要設定的Value屬性，可以在對像檢查器中單擊屬性的…來管理值
GraphType	設定要顯示的圖形型別(gtLine(線形圖)或gtBar(柱狀圖))。 預設值為gtLine
GraphColor	為條形圖設定圖形線或條形邊緣的筆觸選項
GraphFill	設定圖表的填充或條形圖的填充選項
Value	設定顯示在底部的值，應用程式需使用其自己的條件來設定此值
ValueFormat	設定在底部顯示值文字的格式字串
ValueFont	設定在底部顯示值文字的字型
DescriptionText	設定顯示在底部值下方的描述文字
DescriptionFont	設定字型以顯示描述文字

9.2. 程式碼示例

• 設定底部的Value值以及描述文字

FThis.WidgetTrendIndicator1.DescriptionText := 'Page Views';  
FThis.WidgetTrendIndicator1.Value := 24358;

• 改變圖形型別

FThis.WidgetTrendIndicator1.GraphType := gtBar;
FThis.WidgetTrendIndicator1.GraphTYpe := gtLine;

10. TWidgetDistributionIndicator 元件

  TWidgetDistributionIndicator顯示Value的分佈圖，並且可以容納不同數量的值。 此外，它可以顯示5種圖形型別-甜甜圈，餅圖，漏斗，水平條和垂直條形圖。

10.1. 屬性

• 新增值以在設計器或程式碼中繪製圖形。圖形自動計算所佔的百分比。
• 通過DistributionType屬性在以上5種類型的圖形檢視之間切換。
• 通過屬性ValueType在圖表上以百分比或絕對值顯示。
• 顯示頁首、頁尾。

屬性	屬性說明
Values	包含用於繪製圖形的值選項。每個專案都包含需要設定的Value屬性，可以在對像檢查器中單擊屬性的…來管理值
DistributionType	設定要顯示的圖形的型別-dtDonut，dtPie，dtFunnel，dtHorizontalBar或dtVerticalBar
ValueType	設定要在圖表上顯示的值型別-vtAbsolute或vtPercentage。 值顯示的格式分別由ValueFormatAbsolute和ValueFormatPercentage控制
ValueFont	設定顯示的值的字型
Header	設定標題。 它包括子屬性Text,Font和Visible（以顯示或隱藏標題）
Footer	設定頁尾。包括子屬性Text,Font和Visible（以顯示或隱藏標題）

10.2. 示例程式碼

• 填充數值

FThis.WidgetDistributionIndicator1.Values[0].Value := 31 * 100;  
FThis.WidgetDistributionIndicator1.Values[0].Text := 'USA';  
FThis.WidgetDistributionIndicator1.Values[1].Value := 20 * 100;  
FThis.WidgetDistributionIndicator1.Values[1].Text := 'UK';  
FThis.WidgetDistributionIndicator1.Values[2].Value :=  17 * 100;  
FThis.WidgetDistributionIndicator1.Values[2].Text := 'Belgium';  
FThis.WidgetDistributionIndicator1.Values[3].Value :=  16 * 100;  
FThis.WidgetDistributionIndicator1.Values[3].Text := 'Germany';  
FThis.WidgetDistributionIndicator1.Values[4].Value :=  10 * 100;  
FThis.WidgetDistributionIndicator1.Values[4].Text := 'Italy';  
FThis.WidgetDistributionIndicator1.Values[5].Value :=  6 * 100;  
FThis.WidgetDistributionIndicator1.Values[5].Text := 'Spain';

• 更改顯示圖形型別

FThis.WidgetDistributionIndicator1.DistributionType := dtFunnel;

• 設定題頭

FThis.WidgetDistributionIndicator1.Header.Text := 'Sales by Countries';

• 更改為顯示絕對值而不是百分比

FThis.WidgetDistributionIndicator1.ValueType := vtAbsolute;