PinToo 控制元件使用(儀表盤)

  該控制元件組中包含了數據顯示的相關圖形控制元件。

1. TfxWidgetProgress

  TfxWidgetProgress以圓圈的形式圖形化顯示過程的進度。 要使用此控制元件，只需將其放在窗體上，然後使用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，則控制元件將如下圖所示。

     ![](./vx_images/20191122223053790_19871.png)
    

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. 示例（Code）

• 顯示進度數值

fxWidgetProgress1.Value := 45;

• 設定字幕

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

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

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

使圖形為半圓顯示：

fxWidgetProgress1.CircleOptions.StartAngle := -90;  
fxWidgetProgress1.CircleOptions.EndAngle := +90;

---

2. TfxWidgetDistributionIndicator

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

2.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（以顯示或隱藏標題）

2.2. 示例程式碼

• 填充數值

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

• 更改顯示圖形型別

fxWidgetDistributionIndicator1.DistributionType := dtFunnel;

• 設定題頭

fxWidgetDistributionIndicator1.Header.Text := 'Sales by Countries';

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

fxWidgetDistributionIndicator1.ValueType := vtAbsolute;

---

3. TfxWidgetGauge

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

3.1. 屬性

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

3.1.1. Arc屬性

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

3.1.2. Digit屬性

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

3.2. 示例程式碼

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

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

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

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

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

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

---

4. TfxWidgetLCDLabel

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

4.1. 屬性

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

4.1.1. Caption屬性

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

4.2. 程式碼示例

• 設定值

fxCWidgetLCDLabel1.Caption.Value := 419.15;

• 自定義外觀

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

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

---

5. TfxWidgetMarqueeContinuousProgress

  TfxWidgetMarqueeContinousProgress顯示旋轉動畫以指示程序正在進行。 動畫包括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. 示例程式碼

• 顯示文字：

fxWidgetMarqueeContinuousProgress1.CenterText := 'Working...';

• 開啟動畫：

fxWidgetMarqueeContinuousProgress1.MarqueeAnimation.Active := true;

---

6. TfxWidgetMarqueeProgress

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

6.1. 屬性

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

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

6.1.1. CircleOptions屬性

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

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

6.1.2. CaptionOptions屬性

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

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

6.2. 程式碼示例

• 設定數值

fxWidgetMarqueeProgress1.Value := 45;

• 設定字幕

fxWidgetMarqueeProgress1.CaptionOptions.Text := 'Server Chicago';

• 開啟動畫

fxWidgetMarqueeProgress1.MarqueeAnimation.Active := true;

---

7. TfxWidgetMultiProgress

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

7.1. 屬性

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

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

7.1.1. CircleItems屬性

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

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

7.1.2. CircleOptions屬性

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

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

7.1.3. Lengend屬性

  包括顯示圖例的屬性。

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

7.1.4. CaptionOptions屬性

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

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

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

7.2. 程式碼示例

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

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

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

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

• 設定數值

fxWidgetMultiProgress1.CircleItems.Items[1].Value := 24;

---

8. TfxWidgetSetPoint

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

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

8.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	設定標題以顯示在小部件上

8.1.1. ValueOptions屬性

  包含以下設定。

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

8.1.2. SetPointIndicator屬性

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

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

8.1.3. CircleOptions屬性

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

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

8.1.4. Tickmarks屬性

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

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

8.1.5. CaptionOptions屬性

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

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

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

8.2. 程式碼示例

• 設定SetPoint與Value

fxWidgetSetPoint1.SetPoint := 25;  
fxWidgetSetPoint1.Value := 45;

• 設定字幕

fxWidgetSetPoint1.CaptionOptions.Text := 'Thermostat';

• 改變中心字幕

fxWidgetSetPoint1.Tickmarks.CenterText := 'Heating'

---

9. TfxWidgetTrendIndicator

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

9.1. 屬性

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

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

9.2. 程式碼示例

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

fxWidgetTrendIndicator1.DescriptionText := 'Page Views';  
fxWidgetTrendIndicator1.Value := 24358;

• 改變圖形型別

fxWidgetTrendIndicator1.GraphType := gtBar;
fxWidgetTrendIndicator1.GraphTYpe := gtLine;

---

10. Tfx7SegLEDShape

• 引用單元 FMX7SegLED   Tfx7SegLEDShape用七段LED顯示管的方式來顯示數字0~9。

屬性	屬性說明
Value	LED顯示管顯示的數字
Fill	LED顯示管未啟用狀態下的填充選項(顏色)
FillActive	LED顯示管啟用狀態下的填充選項(顏色)

• 設定顯示的數值

fx7SegLEDShape1.Value := 6;

---

11. TfxLED

  TfxLED顯示為一個可顯示亮滅的狀態指示燈。

屬性	屬性說明
State	指示LED燈的狀態，為True時，表示燈亮，為False,表示燈滅。可自行定義或者反轉狀態
OnColor	State狀態為True時LED燈顯示的顏色
OffColor	State狀態為False時LED燈顯示的顏色

---

12. TfxLedBar

  TfxLedBar顯示為一個LED燈條。其中的燈外觀功能與TfxLED相同。LEDBar具有一個Value屬性，該屬性會自動將範圍在0到Value屬性之間的所有LED的狀態屬性設定為on。

屬性	屬性說明
Count	LED燈的個數
Leds	分別設定每個燈的State,OnColor,OffColor,BaseColor屬性
State	指示LED燈的狀態，為True時，表示燈亮，為False,表示燈滅。可自行定義或者反轉狀態
OnColor	State狀態為True時LED燈顯示的顏色
OffColor	State狀態為False時LED燈顯示的顏色
BaseColor	設定元件的基底顏色

---

13. TfxLEDMeter

  TfxLEDMeter顯示為一個LED進度條。

屬性	屬性說明
ActiveStartColor / ActiveStopColor / StartColor / StopColor	設定啟用區域的顏色與未啟用區域的顏色
PeakColor / PeakValue / ShowPeak	設定峰值的顏色，顯示的峰值以及峰值是否可見
Steps	StartColor和StopColor之間的段數。 顏色過渡是自動計算的

14. TfxDBChart

  下面介紹一下如何使用TfxDBChart建立一個新的圖表。

  本節描述了開始定義兩種圖表型別之一所需的常用步驟。

14.1. 建立一個新的窗體

  建立一個新窗體，然後在其上放置一個TfxDBChart元件（將其拖到元件面板的對面）。

  將新的TfxDBChart元件拖動邊角以調整控制元件至合適的大小，以幫助您在定義新圖表時視覺化其內容。 之後，您也可以調整圖表的大小以適合您的需求。

  雙擊該控制元件，出現圖表的編輯對話方塊。

  圖表編輯器的「圖表」頁面包含圖表的定義資訊。 它包括定義常規參數和其他更具體的Chart參數的部分。 在圖表中定義了一些數據系列之前，某些參數將不適用。 嘗試修改參數（例如標題），您將在圖表上看到實時的更新。關於該分類中的資訊可自行搜索檢視TeeChart的官方文件說明http://www.teechart.net/docs/teechart/vclfmx/tutorials/index.html (opens new window)

  要檢視一些圖表數據，我們需要建立一個序列...

  在編輯頁面的Series選項卡中，按Add按鈕。 將向您展示可用的圖表型別。 選擇一個新增到圖表中，如果您決定更喜歡以其他方式視覺化數據，則可以在以後更改其型別。

  通過滑鼠或方向鍵選擇系列型別，然後按OK。 雙擊系列型別亦可。

  系列型別將自動新增到您的圖表中。 在圖表編輯器中，您將看到為新系列新增的新配置選項卡。

14.1.1. 在TfxDBChart中配置數據序列

  在使用該元件前，請先確認系統中已安裝資料庫引擎，並且TARS雲端伺服器處於開啟狀態。

  在窗體上放置一個TfxRFConnection、TfxRFDataSet，並設定TfxRFConnection中的帳套配置，勾選其Active屬性為True，使其能與TARS雲端伺服器連線。

  編輯TfxRFDataSet，在SQL屬性中填寫查詢語句，勾選其Active屬性為True。

  在TfxDBChart的編輯選項中，新建一個線條圖序列，設定序列中的資料來源為資料組(DataSet)，在資料來源選項卡中選擇資料組選項，在下方資料組中選擇fxRFDataSet1。卷標、X、Y處選擇要展示的欄位，點選App即可。

  fxRFDataSet1.Connection := fxRFConnection1;
  fxRFDataSet1.SQL.Clear;
  fxRFDataSet1.SQL.Add('SELECT * FROM Basic_WHS');
  fxRFDataSet1.Open;

15. TfxMatrixLabel

  此元件是顯示為點陣式標籤顯示控制元件，在其中可以顯示大寫英文字母以及英文標點符號內容。

15.1. 屬性

屬性	屬性說明
Options.AutoScroll	是否啟用文字的自動滾動功能
Options.ScrollDirection	設定文字的滾動方向 msdRightToLeft表示為文字從右向左滾動 msdLeftToRight表示為文字從左向右滾動
Options.Text	設定滾動框中顯示的文字內容
Options.TimeInterval	設定文字滾動的時間間隔，以ms為單位

16. TfxCircularGauge

  此元件顯示的內容為圓形的儀表盤，可用於顯示數值指示的內容。

16.1. 屬性

屬性	屬性說明
Options.Animation	是否啟用指針移動的動畫效果
Options.AnimationFactor	設定動畫效果的移動因數，用於表示指針移動的快慢，數值越小移動越快，反之則越慢
Options.DisplayText	設定顯示在儀表盤上的文字內容
Options.DivisionFormat	設定顯示在儀表盤上指示值的格式，0表示為不設定，使用預設的數值顯示
Options.Divisions	設定顯示主分割線分隔的段的數量
Options.DivisionsStartAngle	設定顯示主分隔線開始分隔的起始角度，角度隨順時針旋轉增大
Options.DivisionsStopAngle	設定顯示主分隔線結束分隔的角度，角度隨逆時針旋轉增大
Options.LayoutStartAngle	設定儀表盤圓盤邊線顯示的起始角度
Options.LayoutStopAngle	設定儀表盤圓邊顯示的結束角度
Options.MaximumValue	設定最大值
Options.MinimumValue	設定最小值
Options.ShowDivisions	設定是否顯示主分隔線
Options.ShowDivisionText	設定是否顯示主分割線指示的文字資訊
Options.ShowSubDivisions	設定是否顯示子分割線
Options.ShowSubDivisionText	設定是否顯示子分割線指示的文字資訊
Options.SubDivisionFormat	設定子分割線指示的文字的格式
Options.Value	設定顯示指示的數值

17. TfxClock

  該元件是一個時鐘元件，顯示的是一個模擬錶盤的時鐘。

18. TfxKnobSwitch

  該元件為一個選擇旋鈕，點選可拖動旋鈕進行切換。旋鈕的樣式顯示如下。

18.1. 屬性

屬性	屬性說明
Options.Animation	是否啟用旋鈕旋轉的動畫效果
Options.AnimationFactor	設定動畫效果的移動因數，用於表示旋鈕移動的快慢，數值越小移動越快，反之則越慢
Options.DivisionsStartAngle	設定顯示主分隔線開始分隔的起始角度，角度隨順時針旋轉增大
Options.DivisionsStopAngle	設定顯示主分隔線結束分隔的角度，角度隨逆時針旋轉增大
Options.LayoutStartAngle	設定儀表盤圓盤邊線顯示的起始角度
Options.LayoutStopAngle	設定儀表盤圓邊顯示的結束角度
Options.Value	設定顯示指示的數值

19. TfxRotarySwitch

  該元件為一個選擇旋鈕，點選可拖動旋鈕進行切換。旋鈕的樣式顯示如下。

19.1. 屬性

屬性	屬性說明
Options.Animation	是否啟用旋鈕旋轉的動畫效果
Options.AnimationFactor	設定動畫效果的移動因數，用於表示旋鈕移動的快慢，數值越小移動越快，反之則越慢
Options.DivisionsStartAngle	設定顯示主分隔線開始分隔的起始角度，角度隨順時針旋轉增大
Options.DivisionsStopAngle	設定顯示主分隔線結束分隔的角度，角度隨逆時針旋轉增大
Options.LayoutStartAngle	設定儀表盤圓盤邊線顯示的起始角度
Options.LayoutStopAngle	設定儀表盤圓邊顯示的結束角度
Options.Value	設定顯示指示的數值

20. TfxBadge

  該元件顯示為一個及顏色的標記。

21. TfxLinearGauge

  此元件顯示的內容為線性的儀表盤，可用於顯示數值指示的內容。

21.1. 屬性

屬性	屬性說明
Options.Animation	是否啟用指針移動的動畫效果
Options.AnimationFactor	設定動畫效果的移動因數，用於表示指針移動的快慢，數值越小移動越快，反之則越慢
Options.DivisionFormat	設定顯示在儀表盤上指示值的格式，0表示為不設定，使用預設的數值顯示
Options.Divisions	設定顯示主分割線分隔的段的數量
Options.MaximumValue	設定最大值
Options.MinimumValue	設定最小值
Options.ShowDivisions	設定是否顯示主分隔線
Options.ShowDivisionText	設定是否顯示主分割線指示的文字資訊
Options.ShowSubDivisions	設定是否顯示子分割線
Options.ShowSubDivisionText	設定是否顯示子分割線指示的文字資訊
Options.SubDivisionFormat	設定子分割線指示的文字的格式
Options.Value	設定顯示指示的數值

22. TfxJogMeter

  該元件顯示為帶刻度指針的遊標儀表，在此儀表中指針固定不動，刻度會以遊標的方式移動。

22.1. 屬性

屬性	屬性說明
Options.Animation	是否啟用指針移動的動畫效果
Options.AnimationFactor	設定動畫效果的移動因數，用於表示指針移動的快慢，數值越小移動越快，反之則越慢
Options.DivisionFormat	設定顯示在儀表盤上指示值的格式，0表示為不設定，使用預設的數值顯示
Options.Divisions	設定顯示主分割線分隔的段的數量
Options.ShowDivisions	設定是否顯示主分隔線
Options.ShowDivisionText	設定是否顯示主分割線指示的文字資訊
Options.ShowSubDivisions	設定是否顯示子分割線
Options.ShowSubDivisionText	設定是否顯示子分割線指示的文字資訊
Options.SubDivisionFormat	設定子分割線指示的文字的格式
Options.Value	設定顯示指示的數值