儀表控制元件
# FastWeb儀表控制元件
- 適用平臺： WEB(桌面)
該組下的元件主要是一些儀表盤元件，用於動態展示數據。
# 1. TUgRadialGauge
元件顯示為一個儀表盤，包含了指針儀表盤中的常用功能。
# 1.1. 屬性
# 1.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數。
# 1.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 1.1.3. Options
設定儀表盤的顯示屬性的選項。
# 1.1.3.1. animatedValue
property animatedValue: Boolean;
設定儀表動畫運行期間是否連續地更新儀表中顯示的值。 如果此項被設定為False，會立即顯示翻轉儀表值，動畫將僅在儀表指針或進度條上視覺化運行。
# 1.1.3.2. animateOnInit
property animateOnInit: Boolean;
設定儀表在初始繪製時是否顯示指針或數值的動畫效果。
# 1.1.3.3. animation
property animation: Boolean;
此屬性是儀表控制元件動畫效果的設定總開關，當此項被設定為False，不管其他的相關動畫屬性如何設定，儀表均不會顯示任何效果。
# 1.1.3.4. animationDuration
property animationDuration: Integer;
設定動畫效果的持續時間，單位是毫秒(ms)。
# 1.1.3.5. animationRule
property animationRule: TanimationRule;
設定儀表的動畫的運行效果性為。有以下的樣式可選擇。
| 名稱 | 說明 | 圖形示意 |
|---|---|---|
| bounce | 動畫運行到指定的值時，會有類似彈跳的效果 |  |
| cycle | 動畫的效果呈現為勻加速運動 | |
| linear | 動畫運行效果值的變化是線性的，即勻速運動 |  |
| quad | 起始時緩動，然後勻速運動，到動畫快結束時減速 |  |
| quint | 與quad的效果相似，不同的是相比起始與結束時緩動的時間更長 |  |
| debounce | 顯示的效果為bounce的反向 | |
| decycle | 顯示的效果為cycle的反向 | |
| delinear | 顯示的效果為linear的反向 | |
| dequad | 顯示的效果為quad的反向 | |
| dequint | 顯示的效果為quint的反向 |
# 1.1.3.6. animationTarget
property animationTarget: TanimationTarget;
設定儀表的哪個部分使用動畫效果，可以設定為needle或plate。needle表示為設定指針運動，plate表示為設定儀表盤運動。
# 1.1.3.7. barProgress
property barProgress: Boolean;
設定是否在儀表盤上顯示進度條相關的資訊。
# 1.1.3.8. barShadow
property barShadow: Integer;
設定進度條內部陰影的長度，預設值設定為0，表示不顯示陰影效果。
# 1.1.3.9. barStartPosition
property barStartPosition: string;
預設的設定為left，若設定為right，則將會從右側開始作為起點。
# 1.1.3.10. barStrokeWidth
property barStrokeWidth: Integer;
設定條形圖的外框繪製的寬度，如果此項設定為0，則不繪製外框。
# 1.1.3.11. barWidth
property barWidth: Integer;
設定進度條的寬度相對於儀表寬度的總百分比，其值被限制在0-50之間。
# 1.1.3.12. borderInnerWidth
property borderInnerWidth: Integer;
指定內邊框的寬度，以畫素為單位，如果此項被設定為零，則不會繪製邊框。
# 1.1.3.13. borderMiddleWidth
property borderMiddleWidth: Integer;
指定中層邊框的寬度，以畫素為單位，如果此項被設定為零，則不會繪製邊框。
# 1.1.3.14. borderOuterWidth
property borderOuterWidth: Integer;
指定外層邊框的寬度，以畫素為單位，如果此項被設定為零，則不會繪製邊框。
# 1.1.3.15. borders
property borders: Boolean
設定邊框是否在初始化時被繪製顯示。
# 1.1.3.16. borderShadowWidth
property colorBorderShadowWidth: string;
設定外邊框的投影寬度，如果此項被設定為零，則將不會繪製陰影。
# 1.1.3.17. colorBar
property colorBar: TColor;
設定條形圖的背景的顏色。
# 1.1.3.18. colorBarProgress
property colorBarProgress: TColor;
設定條形圖進度條段的顏色。
# 1.1.3.19. colorBarShadow
property colorBarShadow: TColor;
設定條形圖的陰影的顏色。
# 1.1.3.20. colorBarStroke
property colorBarStroke: TColor;
設定條形圖外框的顏色。
# 1.1.3.21. colorBorderInner
property colorBorderInner: TColor;
設定控制元件內邊框的顏色。
# 1.1.3.22. colorBorderInnerEnd
property colorBorderInnerEnd: TColor;
如果此項被設定顏色數據，則在控制元件內邊框上將啟用漸變顏色的效果。顏色會從colorBorderInner到colorBorderInnerEnd進行漸變。
# 1.1.3.23. colorBorderMiddle
property colorBorderMiddle: TColor;
設定控制元件中層邊框的顏色。
# 1.1.3.24. colorBorderMiddleEnd
property colorBorderMiddleEnd: TColor;
如果此項被設定顏色數據，則在控制元件中層邊框上將啟用漸變顏色的效果。顏色會從colorBorderMiddle到colorBorderMiddleEnd進行漸變。
# 1.1.3.25. colorBorderOuter
property colorBorderOuter: TColor;
設定控制元件外層邊框的顏色。
# 1.1.3.26. colorBorderOuterEnd
property colorBorderOuterEnd: TColor;
如果此項被設定顏色數據，則在控制元件外層邊框上將啟用漸變顏色的效果。顏色會從colorBorderOuter到colorBorderOuterEnd進行漸變。
# 1.1.3.27. colorBorderShadow
property colorBorderShadow: TColor;
如果此項被設定，則會啟用邊框的陰影效果，陰影的顏色為設定的數值，如果不設定此項，則邊框的陰影不會被繪製。
# 1.1.3.28. colorMajorTicks
property colorMajorTicks: TStrings;
設定主刻度線的顏色，其可設定為一個陣列，為每個主刻度線單獨設定顏色。如果選項啟用了strokeTicks，則陣列中的第一種顏色將用於描邊。
# 1.1.3.29. colorMinorTicks
property colorMinorTicks: TColor;
設定次刻度線的顏色。
# 1.1.3.30. colorNeedle
property colorNeedle: TColor;
設定指針的顏色。
# 1.1.3.31. colorNeedleCircleInner
property colorNeedleCircleInner: TColor;
此項為儀表中間的的裝飾元素的內部圓設定顏色。
# 1.1.3.32. colorNeedleCircleInnerEnd
property colorNeedleCircleInnerEnd: TColor;
如果此項被設定，則在儀表中間的裝飾元素的內部圓會被設定漸變顏色的效果。
# 1.1.3.33. colorNeedleCircleOuter
property colorNeedleCircleOuter: TColor;
此項為儀表中間的的裝飾元素的外部圓設定顏色。
# 1.1.3.34. colorNeedleCircleOuterEnd
property colorNeedleCircleOuterEnd: TColor;
如果此項被設定，則在儀表中間的裝飾元素的外部圓會被設定漸變顏色的效果。
# 1.1.3.35. colorNeedleEnd
property colorNeedleEnd: TColor;
如果此項被設定，則表示指針部分使用漸變顏色填充，否則將表示純色繪製。
# 1.1.3.36. colorNeedleShadowDown
property colorNeedleShadowDown: TColor;
設定指針投影的顏色。
# 1.1.3.37. colorNeedleShadowUp
property colorNeedleShadowUp: TColor;
設定指針的陰影顏色的上半部分。
# 1.1.3.38. colorNumbers
property colorNumbers: TColor;
設定儀表盤刻度部分數字的文字顏色。
# 1.1.3.39. colorPlate
property colorPlate: TColor;
設定儀表盤的背景顏色。
# 1.1.3.40. colorPlateEnd
property colorPlateEnd: TColor;
如果目前選項被設定顏色，則會啟用儀表盤背景的漸變顏色的效果，顏色會從colorPlate到colorPlateEnd實現漸變的效果。
# 1.1.3.41. colorStrokeTicks
property colorStrokeTicks: TColor;
為所有刻度線定義靜態顏色。預設設定下此項為空，如果設定為某個顏色值，將覆蓋線條的主要刻度筆觸顏色，但不會影響數字顏色。 如果 colorMinorTicks屬性留空未設定，則此設定也會同步應用於次刻度。
# 1.1.3.42. colorTitle
property colorTitle: TColor;
設定標題的顏色。
# 1.1.3.43. colorUnits
property colorUnits: TColor;
設定單位顯示欄位的顏色。
# 1.1.3.44. colorValueBoxBackground
property colorValueBoxBackground: TColor;
設定數值顯示框的背景顏色。
# 1.1.3.45. colorValueBoxRect
property colorValueBoxRect: TColor;
設定數值顯示框邊框的顏色。
# 1.1.3.46. colorValueBoxRectEnd
property colorValueBoxRectEnd: TColor;
如果此項有啟用，則設定數值顯示框邊框的漸變顏色的效果。漸變的顏色從colorValueBoxRect到colorValueBoxRectEnd。
# 1.1.3.47. colorValueBoxShadow
property colorValueBoxShadow: TColor;
設定數值顯示框的陰影顏色。
# 1.1.3.48. colorValueText
property colorValueText: TColor;
設定數值顯示的顏色。
# 1.1.3.49. colorValueTextShadow
property colorValueTextShadow: TColor;
設定數值顯示文字的陰影顏色。
# 1.1.3.50. exactTicks
property exactTicks: Boolean;
設定切換刻度的繪圖模式，在預設情況下，此項設定為False，即按照以下方式繪製刻度：
- 根據
majorTicks陣列定義多個長度相等的部分。 - 根據
minorTicks定義兩個majorTicks之間繪製的刻度數。
如果此項被設定為True，則按照以下方式來設定：
majorTicks陣列使用者定義繪製主刻度的精確數值。minorTicks定義了繪製次刻度的步長。
# 1.1.3.51. fontNumbers
property fontNumbers: TFontName;
指定刻度顯示的數字的字型系列。預設選項是Arial。
# 1.1.3.52. fontNumbersSize
property fontNumbersSize: Integer;
設定刻度顯示的數字的字型大小。
# 1.1.3.53. fontNumbersStyle
property fontNumbersStyle: string;
設定刻度顯示的數字的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 1.1.3.54. fontNumbersWeight
property fontNumbersWeight: string;
設定刻度顯示的數字的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 1.1.3.55. fontTitle
property fontTitle: TFontName;
指定標題顯示的內容的字型系列。預設選項是Arial。
# 1.1.3.56. fontTitleSize
property fontTitleSize: Integer;
設定標題顯示的字型大小。
# 1.1.3.57. fontTitleStyle
property fontTitleStyle: string;
設定標題字型的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 1.1.3.58. fontTitleWeight
property fontTitleWeight: string;
設定標題顯示的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 1.1.3.59. fontUnit
property fontUnit: TFontName;
指定計量單位欄標題顯示的內容的字型系列。預設選項是Arial。
# 1.1.3.60. fontUnitSize
property fontUnitSize: Integer;
設定計量單位欄標題顯示的字型大小。
# 1.1.3.61. fontUnitStyle
property fontUnitStyle: string;
設定計量單位欄標題字型的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 1.1.3.62. fontUnitWeight
property fontUnitWeight: string;
設定計量單位欄標題顯示的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 1.1.3.63. fontValue
property fontValue: TFontName;
指定數值顯示的內容的字型系列。預設選項是Arial。
# 1.1.3.64. fontValueSize
property fontValueSize: Integer;
設定數值顯示欄顯示的字型大小。
# 1.1.3.65. fontValueStyle
property fontValueStyle: string;
設定數值顯示欄顯示的字型的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 1.1.3.66. fontValueWeight
property fontValueWeight: string;
設定數值顯示欄顯示的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 1.1.3.67. height
property height: Integer;
設定儀表盤顯示區域的畫素高度。
# 1.1.3.68. highlights
property highlights: TStrings;
此屬性用於設定根據刻度配置的高亮區域的顏色資訊，每個高亮的對象會定義一個區域，從一個值到另一個值並使用給定的顏色進行著色，示例如下。
{ from: number, to: number, color: string }
# 1.1.3.69. highlightsLineCap
property highlightsLineCap: ThighlightsLineCap;
設定高亮區域之間的銜接部分的現階樣式，有butt（柄狀）、round(圓弧狀)、square(方型)。
# 1.1.3.70. highlightsWidth
property highlightsWidth: Integer;
設定高區域的畫素寬度。
# 1.1.3.71. majorTicks
property majorTicks: TStrings;
設定用於顯示在刻度儀表位置上的數字或者字串值的陣列。例如[0, 20, 40, 60, 80, 100]。
# 1.1.3.72. majorTicksDec
property majorTicksDec: Integer;
此屬性定義了應該使用多少個位置來顯示刻度數的小數部分。
# 1.1.3.73. majorTicksInt
property majorTicksInt: Integer;
此屬性定義了應該使用多少個數字位置來顯示刻度數的整數部分。
# 1.1.3.74. maxValue
property maxValue: Integer;
設定顯示于儀表盤中的數字的最大值。
# 1.1.3.75. minorTicks
property minorTicks: string;
設定在兩個相鄰的主刻度之間需要繪製多少個次刻度。
# 1.1.3.76. minValue
property minValue: Integer;
設定顯示于儀表盤中的數字的最小值。
# 1.1.3.77. needle
property needle: Boolean;
設定儀表中是否顯示指針等資訊。
# 1.1.3.78. needleCircleInner
property needleCircleInner: Boolean;
設定是否顯示指針的裝飾內圓元素。
# 1.1.3.79. needleCircleOuter
property needleCircleOuter: Boolean;
設定是否顯示指針的裝飾外圓元素。
# 1.1.3.80. needleCircleSize
property needleCircleSize: Integer;
以相對單位設定儀表的裝飾圓元素的大小。
# 1.1.3.81. needleEnd
property needleEnd: Integer;
設定指針的主位置的相對長度。
# 1.1.3.82. needleShadow
property needleShadow: Boolean;
設定指針是否顯示投影陰影。
# 1.1.3.83. needleStart
property needleStart: Integer;
設定指針的尾部的長度，以相對單位來表示。
# 1.1.3.84. needleType
property needleType: TneedleType;
設定指針的型別，有arrow(箭頭)、Line(線)可選。
# 1.1.3.85. needleWidth
property needleWidth: Integer;
設定指針的最寬處的最大畫素寬度。
# 1.1.3.86. numbersMargin
property numbersMargin: Integer;
以相對單位定義刻度標籤(數字)的間距，預設設定為1。
# 1.1.3.87. renderTo*
property renderTo: string;
在 DOM 樹中渲染目標。 它應該是一個畫布元素，或者它在 DOM 樹中的識別符號。 當儀表作為 Web 元件注入頁面時，不需要此選項。
# 1.1.3.88. startAngle
property startAngle: Integer;
設定刻度條開始的角度，預設為45度。
# 1.1.3.89. strokeTicks
property strokeTicks: Boolean;
設定是否顯示用於串聯刻度的邊線，這僅是一個視覺的效果。
# 1.1.3.90. ticksAngle
property ticksAngle: Integer;
定義刻度條顯示的最大覆蓋角度，預設情況下此項被設定為270，如果此項被指定為360，則刻度條將填滿整個圓。
# 1.1.3.91. title
property title: string;
設定標題顯示的內容。
# 1.1.3.92. units
property units: string;
設定單位欄目顯示的內容。
# 1.1.3.93. useMinPath
property useMinPath: Boolean;
此項僅適用於具有完整360度刻度盤的徑向儀表，如果將此類儀表設定為True，則會以最小的旋轉路徑旋轉指針/儀表盤。
# 1.1.3.94. value
property value: Double;
設定顯示的數值。
# 1.1.3.95. valueBox
property valueBox: Boolean;
設定是否顯示數值框。
# 1.1.3.96. valueBoxBorderRadius
property valueBoxBorderRadius: Double;
設定數值顯示框的圓角的半徑。
# 1.1.3.97. valueBoxStroke
property valueBoxStroke: Integer;
設定值框元素的邊線寬度，以相對數值來表示。
# 1.1.3.98. valueBoxWidth
property valueBoxWidth: Integer;
設定值顯示框的寬度，如果其中顯示的值的寬度大於設定的寬度，則將會按照值的寬度進行縮放。
# 1.1.3.99. valueDec
property valueDec: Integer;
設定使用多少位置來顯示值的小數部分。
# 1.1.3.100. valueInt
property valueInt: Integer;
設定使用多少位置來顯示值的整數部分。
# 1.1.3.101. valueText
property valueText: string;
設定數值框中要顯示的文字而不是目前顯示的值。當需要在數值框中顯示不同的文字時會有用。
# 1.1.3.102. valueTextShadow
property valueTextShadow: Boolean;
設定是否繪製文字的陰影。
# 1.1.3.103. width
property width: Integer;
設定控制元件顯示的畫素寬度。
# 1.2. 方法
# 1.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 2. TUgLinearGauge
元件顯示為一個儀表盤，包含了指針儀表盤中的常用功能。
在橫向的模式下，刻度計不顯示數值欄，如果調整控制元件的寬度與高度，使控制元件的Width屬性小於控制元件的Height屬性，則可以顯示數值框。
# 2.1. 屬性
# 2.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數。
# 2.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 2.1.3. Options
設定儀表盤的顯示屬性的選項。
# 2.1.3.1. animatedValue
property animatedValue: Boolean;
設定儀表動畫運行期間是否連續地更新儀表中顯示的值。 如果此項被設定為False，會立即顯示翻轉儀表值，動畫將僅在儀表指針或進度條上視覺化運行。
# 2.1.3.2. animateOnInit
property animateOnInit: Boolean;
設定儀表在初始繪製時是否顯示指針或數值的動畫效果。
# 2.1.3.3. animation
property animation: Boolean;
此屬性是儀表控制元件動畫效果的設定總開關，當此項被設定為False，不管其他的相關動畫屬性如何設定，儀表均不會顯示任何效果。
# 2.1.3.4. animationDuration
property animationDuration: Integer;
設定動畫效果的持續時間，單位是毫秒(ms)。
# 2.1.3.5. animationRule
property animationRule: TanimationRule;
設定儀表的動畫的運行效果性為。有以下的樣式可選擇。
| 名稱 | 說明 | 圖形示意 |
|---|---|---|
| bounce | 動畫運行到指定的值時，會有類似彈跳的效果 | |
| cycle | 動畫的效果呈現為勻加速運動 | |
| linear | 動畫運行效果值的變化是線性的，即勻速運動 | |
| quad | 起始時緩動，然後勻速運動，到動畫快結束時減速 | |
| quint | 與quad的效果相似，不同的是相比起始與結束時緩動的時間更長 | |
| debounce | 顯示的效果為bounce的反向 | |
| decycle | 顯示的效果為cycle的反向 | |
| delinear | 顯示的效果為linear的反向 | |
| dequad | 顯示的效果為quad的反向 | |
| dequint | 顯示的效果為quint的反向 |
# 2.1.3.6. barBeginCircle
property barBeginCircle: Integer;
設定一個進度條的起始端是否以圓形元素開始，如果設定了數值則以相應的數值來顯示。如果設定為零，則不進行顯示。
# 2.1.3.7. barLength
property barLength: Integer;
設定條的相對於總長度的相對長度。
# 2.1.3.8. barProgress
property barProgress: Boolean;
設定是否在儀表盤上顯示進度條相關的資訊。
# 2.1.3.9. barShadow
property barShadow: Integer;
設定進度條內部陰影的長度，預設值設定為0，表示不顯示陰影效果。
# 2.1.3.10. barStrokeWidth
property barStrokeWidth: Integer;
設定條形圖的外框繪製的寬度，如果此項設定為0，則不繪製外框。
# 2.1.3.11. barWidth
property barWidth: Integer;
設定進度條的寬度相對於儀表寬度的總百分比，其值被限制在0-50之間。
# 2.1.3.12. borderInnerWidth
property borderInnerWidth: Integer;
指定內邊框的寬度，以畫素為單位，如果此項被設定為零，則不會繪製邊框。
# 2.1.3.13. borderMiddleWidth
property borderMiddleWidth: Integer;
指定中層邊框的寬度，以畫素為單位，如果此項被設定為零，則不會繪製邊框。
# 2.1.3.14. borderOuterWidth
property borderOuterWidth: Integer;
指定外層邊框的寬度，以畫素為單位，如果此項被設定為零，則不會繪製邊框。
# 2.1.3.15. borderRadius
property borderRadius: Integer;
設定邊線的圓角半徑。
# 2.1.3.16. borders
property borders: Boolean
設定邊框是否在初始化時被繪製顯示。
# 2.1.3.17. borderShadowWidth
property colorBorderShadowWidth: string;
設定外邊框的投影寬度，如果此項被設定為零，則將不會繪製陰影。
# 2.1.3.18. colorBar
property colorBar: TColor;
設定條形圖的背景的顏色。
# 2.1.3.19. colorBarEnd
property colorBarEnd: TColor;
設定中間的進度顯示的條是否啟用漸變的效果，如果此項未設定，則將不使用漸變效果。
# 2.1.3.20. colorBarProgress
property colorBarProgress: TColor;
設定條形圖進度條段的顏色。
# 2.1.3.21. colorBarProgressEnd
property colorBarProgressEnd: TColor;
設定條形圖進度條段的漸變效果，如果此項未設定，則將不使用漸變效果。
# 2.1.3.22. colorBarShadow
property colorBarShadow: TColor;
設定條形圖的陰影的顏色。
# 2.1.3.23. colorBarStroke
property colorBarStroke: TColor;
設定條形圖外框的顏色。
# 2.1.3.24. colorBorderInner
property colorBorderInner: TColor;
設定控制元件內邊框的顏色。
# 2.1.3.25. colorBorderInnerEnd
property colorBorderInnerEnd: TColor;
如果此項被設定顏色數據，則在控制元件內邊框上將啟用漸變顏色的效果。顏色會從colorBorderInner到colorBorderInnerEnd進行漸變。
# 2.1.3.26. colorBorderMiddle
property colorBorderMiddle: TColor;
設定控制元件中層邊框的顏色。
# 2.1.3.27. colorBorderMiddleEnd
property colorBorderMiddleEnd: TColor;
如果此項被設定顏色數據，則在控制元件中層邊框上將啟用漸變顏色的效果。顏色會從colorBorderMiddle到colorBorderMiddleEnd進行漸變。
# 2.1.3.28. colorBorderOuter
property colorBorderOuter: TColor;
設定控制元件外層邊框的顏色。
# 2.1.3.29. colorBorderOuterEnd
property colorBorderOuterEnd: TColor;
如果此項被設定顏色數據，則在控制元件外層邊框上將啟用漸變顏色的效果。顏色會從colorBorderOuter到colorBorderOuterEnd進行漸變。
# 2.1.3.30. colorBorderShadow
property colorBorderShadow: TColor;
如果此項被設定，則會啟用邊框的陰影效果，陰影的顏色為設定的數值，如果不設定此項，則邊框的陰影不會被繪製。
# 2.1.3.31. colorMajorTicks*
property colorMajorTicks: TStrings;
設定主刻度線的顏色，其可設定為一個陣列，為每個主刻度線單獨設定顏色。如果選項啟用了strokeTicks，則陣列中的第一種顏色將用於描邊。
# 2.1.3.32. colorMinorTicks
property colorMinorTicks: TColor;
設定次刻度線的顏色。
# 2.1.3.33. colorNeedle
property colorNeedle: TColor;
設定指針的顏色。
# 2.1.3.34. colorNeedleEnd
property colorNeedleEnd: TColor;
如果此項被設定，則表示指針部分使用漸變顏色填充，否則將表示純色繪製。
# 2.1.3.35. colorNeedleShadowDown
property colorNeedleShadowDown: TColor;
設定指針投影的顏色。
# 2.1.3.36. colorNeedleShadowUp
property colorNeedleShadowUp: TColor;
設定指針的陰影顏色的上半部分。
# 2.1.3.37. colorNumbers*
property colorNumbers: TColor;
設定儀表盤刻度部分數字的文字顏色。
# 2.1.3.38. colorPlate
property colorPlate: TColor;
設定儀表盤的背景顏色。
# 2.1.3.39. colorPlateEnd
property colorPlateEnd: TColor;
如果目前選項被設定顏色，則會啟用儀表盤背景的漸變顏色的效果，顏色會從colorPlate到colorPlateEnd實現漸變的效果。
# 2.1.3.40. colorStrokeTicks
property colorStrokeTicks: TColor;
為所有刻度線定義靜態顏色。預設設定下此項為空，如果設定為某個顏色值，將覆蓋線條的主要刻度筆觸顏色，但不會影響數字顏色。 如果 colorMinorTicks屬性留空未設定，則此設定也會同步應用於次刻度。
# 2.1.3.41. colorTitle
property colorTitle: TColor;
設定標題的顏色。
# 2.1.3.42. colorUnits
property colorUnits: TColor;
設定單位顯示欄位的顏色。
# 2.1.3.43. colorValueBoxBackground
property colorValueBoxBackground: TColor;
設定數值顯示框的背景顏色。
# 2.1.3.44. colorValueBoxRect
property colorValueBoxRect: TColor;
設定數值顯示框邊框的顏色。
# 2.1.3.45. colorValueBoxRectEnd
property colorValueBoxRectEnd: TColor;
如果此項有啟用，則設定數值顯示框邊框的漸變顏色的效果。漸變的顏色從colorValueBoxRect到colorValueBoxRectEnd。
# 2.1.3.46. colorValueBoxShadow
property colorValueBoxShadow: TColor;
設定數值顯示框的陰影顏色。
# 2.1.3.47. colorValueText
property colorValueText: TColor;
設定數值顯示的顏色。
# 2.1.3.48. colorValueTextShadow
property colorValueTextShadow: TColor;
設定數值顯示文字的陰影顏色。
# 2.1.3.49. exactTicks
property exactTicks: Boolean;
設定切換刻度的繪圖模式，在預設情況下，此項設定為False，即按照以下方式繪製刻度：
- 根據
majorTicks陣列定義多個長度相等的部分。 - 根據
minorTicks定義兩個majorTicks之間繪製的刻度數。
如果此項被設定為True，則按照以下方式來設定：
majorTicks陣列使用者定義繪製主刻度的精確數值。minorTicks定義了繪製次刻度的步長。
# 2.1.3.50. fontNumbers
property fontNumbers: TFontName;
指定刻度顯示的數字的字型系列。預設選項是Arial。
# 2.1.3.51. fontNumbersSize
property fontNumbersSize: Integer;
設定刻度顯示的數字的字型大小。
# 2.1.3.52. fontNumbersStyle
property fontNumbersStyle: string;
設定刻度顯示的數字的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 2.1.3.53. fontNumbersWeight
property fontNumbersWeight: string;
設定刻度顯示的數字的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 2.1.3.54. fontTitle
property fontTitle: TFontName;
指定標題顯示的內容的字型系列。預設選項是Arial。
# 2.1.3.55. fontTitleSize
property fontTitleSize: Integer;
設定標題顯示的字型大小。
# 2.1.3.56. fontTitleStyle
property fontTitleStyle: string;
設定標題字型的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 2.1.3.57. fontTitleWeight
property fontTitleWeight: string;
設定標題顯示的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 2.1.3.58. fontUnit
property fontUnit: TFontName;
指定計量單位欄標題顯示的內容的字型系列。預設選項是Arial。
# 2.1.3.59. fontUnitSize
property fontUnitSize: Integer;
設定計量單位欄標題顯示的字型大小。
# 2.1.3.60. fontUnitStyle
property fontUnitStyle: string;
設定計量單位欄標題字型的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 2.1.3.61. fontUnitWeight
property fontUnitWeight: string;
設定計量單位欄標題顯示的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 2.1.3.62. fontValue
property fontValue: TFontName;
指定數值顯示的內容的字型系列。預設選項是Arial。
# 2.1.3.63. fontValueSize
property fontValueSize: Integer;
設定數值顯示欄顯示的字型大小。
# 2.1.3.64. fontValueStyle
property fontValueStyle: string;
設定數值顯示欄顯示的字型的樣式型別。字型的樣式可以是normal、italic或者oblique其中之一。
# 2.1.3.65. fontValueWeight
property fontValueWeight: string;
設定數值顯示欄顯示的字型粗細。字型的粗細可以是normal、bolder、lighter、100、200、300、400、500、600、700、800、900等值。
# 2.1.3.66. height
property height: Integer;
設定儀表盤顯示區域的畫素高度。
# 2.1.3.67. highlights
property highlights: TStrings;
此屬性用於設定根據刻度配置的高亮區域的顏色資訊，每個高亮的對象會定義一個區域，從一個值到另一個值並使用給定的顏色進行著色，示例如下。
{ from: number, to: number, color: string }
# 2.1.3.68. highlightsWidth
property highlightsWidth: Integer;
設定高區域的畫素寬度。
# 2.1.3.69. majorTicks
property majorTicks: TStrings;
設定用於顯示在刻度儀表位置上的數字或者字串值的陣列。例如[0, 20, 40, 60, 80, 100]。
# 2.1.3.70. majorTicksDec
property majorTicksDec: Integer;
此屬性定義了應該使用多少個位置來顯示刻度數的小數部分。
# 2.1.3.71. majorTicksInt
property majorTicksInt: Integer;
此屬性定義了應該使用多少個數字位置來顯示刻度數的整數部分。
# 2.1.3.72. maxValue
property maxValue: Integer;
設定顯示于儀表盤中的數字的最大值。
# 2.1.3.73. minorTicks
property minorTicks: string;
設定在兩個相鄰的主刻度之間需要繪製多少個次刻度。
# 2.1.3.74. minValue
property minValue: Integer;
設定顯示于儀表盤中的數字的最小值。
# 2.1.3.75. needle
property needle: Boolean;
設定儀表中是否顯示指針等資訊。
# 2.1.3.76. needleEnd
property needleEnd: Integer;
設定指針的主位置的相對長度。
# 2.1.3.77. needleShadow
property needleShadow: Boolean;
設定指針是否顯示投影陰影。
# 2.1.3.78. needleSide
property needleSide: TSide;
設定指針顯示的位置，可選項為left(顯示於左側)、right(顯示于右側)、both(兩側同時顯示)。
# 2.1.3.79. needleStart
property needleStart: Integer;
設定指針的尾部的長度，以相對單位來表示。
# 2.1.3.80. needleType
property needleType: TneedleType;
設定指針的型別，有arrow(箭頭)、Line(線)可選。
# 2.1.3.81. needleWidth
property needleWidth: Integer;
設定指針的最寬處的最大畫素寬度。
# 2.1.3.82. numberSide
property numberSide: TSide;
設定刻度數字顯示的位置，可選項為left(顯示於左側)、right(顯示于右側)、both(兩側同時顯示)。
# 2.1.3.83. numbersMargin
property numbersMargin: Integer;
以相對單位定義刻度標籤(數字)的間距，預設設定為1。
# 2.1.3.84. renderTo*
property renderTo: string;
在 DOM 樹中渲染目標。 它應該是一個畫布元素，或者它在 DOM 樹中的識別符號。 當儀表作為 Web 元件注入頁面時，不需要此選項。
# 2.1.3.85. strokeTicks
property strokeTicks: Boolean;
設定是否顯示用於串聯刻度的邊線，這僅是一個視覺的效果。
# 2.1.3.86. tickSide
property tickSide: TSide;
設定刻度標記顯示的位置，可選項為left(顯示於左側)、right(顯示于右側)、both(兩側同時顯示)。
# 2.1.3.87. ticksPadding
property ticksPadding: Integer;
設定用於以相對單位從條形圖繪製刻度的填充。
# 2.1.3.88. ticksWidth
property ticksWidth: Integer;
設定主刻度顯示的寬度。以相對單位來進行定義。
# 2.1.3.89. ticksWidthMinor
property ticksWidthMinor: Integer;
設定以相對單位設定的次刻度線的寬度。
# 2.1.3.90. title
property title: string;
設定標題顯示的內容。9.1.1.93.
# 2.1.3.91. units
property units: string;
設定單位欄目顯示的內容。
# 2.1.3.92. value
property value: Double;
設定顯示的數值。
# 2.1.3.93. valueBox
property valueBox: Boolean;
設定是否顯示數值框。
# 2.1.3.94. valueBoxBorderRadius
property valueBoxBorderRadius: Double;
設定數值顯示框的圓角的半徑。
# 2.1.3.95. valueBoxStroke
property valueBoxStroke: Integer;
設定值框元素的邊線寬度，以相對數值來表示。
# 2.1.3.96. valueBoxWidth
property valueBoxWidth: Integer;
設定值顯示框的寬度，如果其中顯示的值的寬度大於設定的寬度，則將會按照值的寬度進行縮放。
# 2.1.3.97. valueDec
property valueDec: Integer;
設定使用多少位置來顯示值的小數部分。
# 2.1.3.98. valueInt
property valueInt: Integer;
設定使用多少位置來顯示值的整數部分。
# 2.1.3.99. valueText
property valueText: string;
設定數值框中要顯示的文字而不是目前顯示的值。當需要在數值框中顯示不同的文字時會有用。
# 2.1.3.100. valueTextShadow
property valueTextShadow: Boolean;
設定是否繪製文字的陰影。
# 2.1.3.101. width
property width: Integer;
設定控制元件顯示的畫素寬度。
# 2.2. 方法
# 2.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 3. TUgSwitch3D
此元件顯示為一個可左右按動的開關按鈕，點選按鈕可實現按鈕開關狀態的切換。
# 3.1. 屬性
# 3.1.1. Checked
property Checked: Boolean;
設定目前按鈕的狀態是否為ON(開啟)的狀態。
# 3.1.2. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為位型別，0表示為False，1表示為True。
# 3.1.3. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 3.1.4. Options
設定控制元件的外觀等屬性。
# 3.1.4.1. FontSize
property FontSize: Integer;
設定按鈕上顯示的文字的尺寸大小。
# 3.1.4.2. TitleOff
property TitleOff: string;
設定按鈕的關閉處顯示的文字內容。如果輸入的文字為英文會轉換為大寫。
# 3.1.4.3. TitleOn
property TitleOn: string;
設定按鈕的開啟處顯示的文字內容。如果輸入的文字為英文會轉換為大寫。
# 3.2. 事件
# 3.2.1. OnSwitch
procedure UgSwitch3D01OnSwitch(sender: tobject);
當開關按鈕的狀態切換時觸發目前事件。
# 3.3. 方法
# 3.3.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 4. TUgSwitchRod
此元件顯示為一個開關搖桿，可以向左右撥動開關以設定開與關的狀態。
# 4.1. 屬性
# 4.1.1. Checked
property Checked: Boolean;
設定目前按鈕的狀態是否為ON(開啟)的狀態。
# 4.1.2. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為位型別，0表示為False，1表示為True。
# 4.1.3. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 4.1.4. Options
設定控制元件的外觀等屬性。
# 4.1.4.1. FontSize
property FontSize: Integer;
設定按鈕上顯示的文字的尺寸大小。
# 4.1.4.2. TitleOff
property TitleOff: string;
設定按鈕的關閉處顯示的文字內容。如果輸入的文字為英文會轉換為大寫。
# 4.1.4.3. TitleOn
property TitleOn: string;
設定按鈕的開啟處顯示的文字內容。如果輸入的文字為英文會轉換為大寫。
# 4.2. 事件
# 4.2.1. OnSwitch
procedure UgSwitchRodOnSwitch(sender: tobject);
當開關按鈕的狀態切換時觸發目前事件。
# 4.3. 方法
# 4.3.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 5. TUgSwitchRodV
此元件顯示為一個開關搖桿，可以向上下撥動開關以設定開與關的狀態。
# 5.1. 屬性
# 5.1.1. Checked
property Checked: Boolean;
設定目前按鈕的狀態是否為ON(開啟)的狀態。
# 5.1.2. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為位型別，0表示為False，1表示為True。
# 5.1.3. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 5.1.4. Options
設定控制元件的外觀等屬性。
# 5.1.4.1. FontSize
property FontSize: Integer;
設定按鈕上顯示的文字的尺寸大小。
# 5.1.4.2. TitleOff
property TitleOff: string;
設定按鈕的關閉處顯示的文字內容。如果輸入的文字為英文會轉換為大寫。
# 5.1.4.3. TitleOn
property TitleOn: string;
設定按鈕的開啟處顯示的文字內容。如果輸入的文字為英文會轉換為大寫。
# 5.2. 事件
# 5.2.1. OnSwitch
procedure UgSwitchRodVOnSwitch(sender: tobject);
當開關按鈕的狀態切換時觸發目前事件。
# 5.3. 方法
# 5.3.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 6. TUgDigitalLed
此控制元件顯示為LED矩陣，可顯示數字英文字母等相關內容。
# 6.1. 屬性
# 6.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為文字型別。
# 6.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 6.1.3. Options
設定顯示的屬性。
# 6.1.3.1. backgroud_color
property background_color: TColor;
設定顯示的矩陣背景顏色。
# 6.1.3.2. color
property color: TColor;
設定LED顯示矩陣點亮起時的顏色。
# 6.1.3.3. count_to
property count_to: string
當ledtype被設定為countdown時，此項會被設定為倒計時的結束日期，遵循 yyyy:mm:dd 格式，例如：2015:12:25，預設為當年的結束時間。
# 6.1.3.4. font_type
property font_type: Integer;
設定字型的型別，有三種類型可選，分別對應為1、2、3。
# 6.1.3.5. format
property format: string;
設定時間顯示的格式，當ledtype被設定為time時有效，設定后需初始化才能正常顯示。
# 6.1.3.6. hour_format
property hour_format: Integer;
設定時間的顯示格式，可設定12或者24，分別對應12小時制與24小時制的時間顯示格式。
# 6.1.3.7. ledtype
property ledtype: TLedType;
設定led顯示的數據型別。有以下幾種型別。
| 名稱 | 說明 |
|---|---|
| countdown | 倒計時模式 |
| random | 隨機模式，用於隨機顯示一串數字 |
| number | 數字模式，顯示指定的數字 |
| custom | 自定義模式，顯示自定義的字母等內容 |
| time | 時間模式，用於顯示時間 |
# 6.1.3.8. rounded
property rounded: Integer;
設定矩陣的圓角矩形的半徑。如果此屬性被設定于大於size的二分之一，則點陣會顯示為圓形。
# 6.1.3.9. size
property size: Integer;
設定點陣的尺寸大小。
# 6.1.3.10. spacing
property spacing: Integer;
設定矩陣的點陣之間的畫素距離。
# 6.1.3.11. value
property value: string;
設定在矩陣中顯示的內容，僅當ledtype設定為number或者custom時屬性有效，number模式下此屬性支援數字；custom模式下此屬性支援字元ABCDEFGHIJKLMNOPQRSTUVWXYZ@。
# 6.2. 方法
# 6.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 7. TUgMeterLed
此元件顯示為可顯示狀態的LED燈。
# 7.1. 屬性
# 7.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為位型別，0表示為False，1表示為True。
# 7.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 7.1.3. Options
# 7.1.3.1. Color
property Color: TMeterColor;
設定控制元件可顯示的顏色。當設定為off時表示不顯示顏色。
# 7.1.3.2. Size
property Size: TMeterSize;
設定控制元件顯示的尺寸大小。
# 7.1.4. State
property State: Boolean;
設定顯示LED燈的狀態。當設定為True時，燈亮，否則為燈滅。
# 7.2. 方法
# 7.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 8. TUgMeterTank
該元件顯示為一個儲罐，可用於顯示罐體內液麵的資訊。
# 8.1. 屬性
# 8.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數型別。
# 8.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 8.1.3. Options
設定顯示的相關選項。
# 8.1.3.1. High
property High: Integer;
設定刻度線顯示的最大值。
# 8.1.3.2. Level
property Level: TMeterLevel;
設定顯示的級別，不同的級別顯示的顏色不同。
| 名稱 | 說明 |
|---|---|
| danger | 危險級別，液麵以紅色顯示 |
| default | 預設級別，液麵以紫色顯示 |
| primary | 主要級別，液麵以紫色顯示 |
| safe | 安全級別，液麵以綠色顯示 |
| unimportant | 不重要級別，液麵以灰色顯示 |
| warning | 警告級別，液麵以黃色顯示 |
# 8.1.3.3. Low
property Low: Integer;
設定刻度線的最低顯示值。
# 8.1.3.4. Size
property Size: TMeterSize;
設定控制元件顯示的尺寸大小。
# 8.1.3.5. TickAmount
property TickAmount: Integer;
控制元件中設定的刻度線的顯示數量，此項為預設屬性，不支援在指令碼中修改其大小。
# 8.1.3.6. TickHeight
property TickHeight: Integer;
設定刻度線的百分比高度(線寬)，此項為預設屬性，不支援在指令碼中修改其大小。
# 8.1.3.7. TickScale
property TickScale: Boolean;
此項設定是否將數字刻度新增至刻度線。
# 8.1.3.8. TickScaleFrequency
property TickScaleFrequency: Integer;
數字標籤顯示的頻率，即設定的數字含義為經過多少個刻度后顯示數字，如在指令碼中進行此項屬性的修改，需在指令碼中設定初始化后才可以使此屬性的設定顯示生效。
# 8.1.4. Value
property Value: Double;
設定控制元件展示的數據值。
# 8.2. 方法
# 8.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 9. TUgMeterThermo
此元件顯示為一個類似於溫度計造型的控制元件。
# 9.1. 屬性
# 9.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數型別。
# 9.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 9.1.3. Options
設定顯示的相關選項。
# 9.1.3.1. High
property High: Integer;
設定刻度線顯示的最大值。
# 9.1.3.2. Level
property Level: TMeterLevel;
設定顯示的級別，不同的級別顯示的顏色不同。
| 名稱 | 說明 |
|---|---|
| danger | 危險級別，液麵以紅色顯示 |
| default | 預設級別，液麵以紫色顯示 |
| primary | 主要級別，液麵以紫色顯示 |
| safe | 安全級別，液麵以綠色顯示 |
| unimportant | 不重要級別，液麵以灰色顯示 |
| warning | 警告級別，液麵以黃色顯示 |
# 9.1.3.3. Low
property Low: Integer;
設定刻度線的最低顯示值。
# 9.1.3.4. Size
property Size: TMeterSize;
設定控制元件顯示的尺寸大小。
# 9.1.3.5. TickAmount
property TickAmount: Integer;
控制元件中設定的刻度線的顯示數量，此項為預設屬性，不支援在指令碼中修改其大小。
# 9.1.3.6. TickHeight
property TickHeight: Integer;
設定刻度線的百分比高度(線寬)，此項為預設屬性，不支援在指令碼中修改其大小。
# 9.1.3.7. TickScale
property TickScale: Boolean;
此項設定是否將數字刻度新增至刻度線。
# 9.1.3.8. TickScaleFrequency
property TickScaleFrequency: Integer;
數字標籤顯示的頻率，即設定的數字含義為經過多少個刻度后顯示數字，如在指令碼中進行此項屬性的修改，需在指令碼中設定初始化后才可以使此屬性的設定顯示生效。
# 9.1.4. Value
property Value: Double;
設定控制元件展示的數據值。
# 9.2. 方法
# 9.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 10. TUgMeterReadout
此元件顯示為一個顯示屏，上面可用於顯示true或者false的資訊。
# 10.1. 屬性
# 10.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為字串型別。
# 10.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 10.1.3. Options
設定顯示的相關選項。
# 10.1.3.1. Color
property Color: TMeterColor;
設定控制元件可顯示的顏色。當設定為off時表示不顯示顏色。
# 10.1.3.2. DigiAmount
property DigitAmount: Integer;
設定控制元件預設顯示的位數。
# 10.1.3.3. Size
property Size: TMeterSize;
設定控制元件顯示的尺寸大小。
# 10.1.4. Value
property Value: string;
設定控制元件展示的數據值。
# 10.2. 方法
# 10.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 11. TUgMeterGauge
此控制元件顯示為一個半圓形的儀表。
# 11.1. 屬性
# 11.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數型別。
# 11.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 11.1.3. Options
設定顯示的相關選項。
# 11.1.3.1. High
property High: Integer;
設定刻度線顯示的最大值。
# 11.1.3.2. Low
property Low: Integer;
設定刻度線的最低顯示值。
# 11.1.3.3. Size
property Size: TMeterSize;
設定控制元件顯示的尺寸大小。
# 11.1.3.4. TickAmount
property TickAmount: Integer;
控制元件中設定的刻度線的顯示數量，如在指令碼中進行此項屬性的修改，需在指令碼中設定初始化后才可以使此屬性的設定顯示生效。
# 11.1.3.5. TickHeight
property TickHeight: Integer;
設定刻度線的百分比高度(線寬)，如在指令碼中進行此項屬性的修改，需在指令碼中設定初始化后才可以使此屬性的設定顯示生效。
# 11.1.3.6. TickScale
property TickScale: Boolean;
此項設定是否將數字刻度新增至刻度線。
# 11.1.3.7. TickScaleFrequency
property TickScaleFrequency: Integer;
數字標籤顯示的頻率，即設定的數字含義為經過多少個刻度后顯示數字，如在指令碼中進行此項屬性的修改，需在指令碼中設定初始化后才可以使此屬性的設定顯示生效。
# 11.1.4. Value
property Value: Double;
設定控制元件展示的數據值。
# 11.2. 方法
# 11.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 12. TUgWaterTank
該元件為槽罐頁面顯示的相關元件。可根據百分比來顯示槽罐的頁面的變化情況，具有動態顯示的效果。
# 12.1. 屬性
# 12.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數型別。
# 12.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 12.1.3. Options
設定槽罐中的相關顯示選項。
# 12.1.3.1. Color
property Color: TColor;
設定槽罐中頁面顯示的顏色。可從顏色選擇器中選擇顏色，或者是自定義RGB來組合顏色。
# 12.1.3.2. CustomCSS
property CustomCSS: TStrings;
設定槽罐顯示的外觀樣式。
# 12.1.3.3. Height
property Height: Integer;
設定顯示區域的高度，以畫素值為單位顯示。
# 12.1.3.4. Level
property Level: Double;
設定顯示液麵高度的百分比值，取值的範圍在0-100之間。
# 12.1.3.5. Width
property Width: Integer;
設定顯示區域的寬度，以畫素值為單位顯示。
# 12.2. 方法
# 12.2.1. Init
procedure Init;
設定控制元件的初始化顯示。
# 13. TUgWidgetProgress
該元件顯示為進度條。可通過設定選項WidgetOptions中的專案，來設定顯示的最大值，最小值以及目前顯示的進度數值。可為不同的進度階段設定不同的顏色，實現更好的自定義效果。
# 13.1. 屬性
| 屬性 | 說明 |
|---|---|
| WidgetOptions | 儀表設定的相關選項 |
| WidgetRanges | 儀表數值範圍顯示的樣式內容 |
# 13.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數型別。
# 13.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 13.1.3. ProcessOptions
property ProcessOptions: TProcessOptions;
該專案下包含了儀表設定的相關內容。
| 名稱 | 說明 |
|---|---|
| AnimationDuration | 動畫效果的持續時間，單位為ms |
| ColorRange | 是否顯示顏色分割槽，如果為True則按照WidgetRanges中的樣式進行顯示 |
| Disabled | 是否響應操作 |
| Layout | 設定進度條顯示的起始方向，normal為從左向右，reverse為從右向左 |
| Max | 進度條限制的最大值 |
| Min | 進度條限制的最小值 |
| Orientation | 進度條進度顯示的方向，horizontal表示為水平方向顯示，vertical表示為豎直方向顯示 |
| ShowText | 是否顯示進度的百分比數值 |
| Template | 顏色的配色模板，可根據需要選擇 |
| Theme | 進度條的主題樣式，可根據需要選擇 |
| Value | 進度條的數值 |
UgWidgetProcess01.ProcessOptions.Value := 98;
# 13.1.4. WidgetRanges
property WidgetRanges: TStrings;
該項中包含了分割槽顏色的樣式json內容。預設的樣式如下所示。
colorRanges: [{
stop: 20,
color: "#33b5e5"13.2. }, {
stop: 50,
color: "#98ca00"13.2.1. }, {
stop: 80,
color: "#ff4444"
}, {
stop: 100,
color: "#aa66cc"
}],
2
3
4
5
6
7
8
9
10
11
# 14. TUgGaugeContainer
該元件顯示為一個帶指針的儀表盤，儀表盤的顏色可根據顯示數值區域的變化而變化，可通過設定來實現指針指向數值的變化。
# 14.1. 屬性
| 屬性 | 說明 |
|---|---|
| WidgetBorder | 儀表邊緣的樣式 |
| WidgetCaption | 儀表中的字幕樣式選擇 |
| WidgetCss | 儀表的CSS樣式 |
| WidgetGaugeValue | 儀表的數值顯示的樣式設定 |
| WidgetOptions | 儀表設定的相關選項 |
| WidgetRanges | 儀表數值範圍顯示的樣式內容 |
| WidgetStyle | 儀表外觀樣式 |
# 14.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數型別。
# 14.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 14.1.3. WidgetBorder
property WidgetBorder: TWidgetBorder;
該屬性用於定義儀表盤邊緣的樣式。
| 名稱 | 說明 |
|---|---|
| Size | 儀表盤邊緣的大小 |
| Stroke | 儀表盤邊緣填充的顏色 |
| Visible | 儀表盤邊緣是否可見 |
# 14.1.4. WidgetCaption
property WidgetCaption: TWidgetCaption;
該屬性用於定義儀表盤中的字幕以及樣式資訊。
| 名稱 | 說明 |
|---|---|
| offsetX | 字幕的橫向位置偏移量 |
| offsetY | 字幕的縱向位置偏移量 |
| Position | 字幕在儀表盤中的位置 |
| Value | 字幕顯示的內容資訊 |
| Visible | 字幕是否顯示 |
# 14.1.5. WidgetCss
property WidgetCss: TStrings;
該屬性指定儀表盤的CSS樣式資訊。
# 14.1.6. WidgetGaugeValue
property WidgetGaugeValue: TStrings;
該屬性指定儀表盤的數值樣式資訊。
# 14.1.7. WidgetOptions
property WidgetOptions: TWidgetOptions;
該專案下包含了儀表設定的相關內容。
| 名稱 | 說明 |
|---|---|
| AnimationDuration | 動畫效果的持續時間，單位為ms |
| ColorScheme | 指針的顯示顏色 |
| LabelsType | 刻度的顯示方式，inside表示為顯示在裡面，outside表示為顯示在外面 |
| MaxValue | 刻度限制的最大值 |
| MinValue | 刻度限制的最小值 |
| ShowGaugeValue | 是否顯示儀表的數值 |
| ShowRanges | 是否顯示顏色區域 |
| Value | 儀表指針指向的數值 |
| ValueUnit | 儀表的單位 |
# 14.1.8. WidgetRanges
property WidgetRanges: TStrings;
該項中包含了分割槽顏色的樣式json內容。
# 14.1.9. WidgetStyle
property WidgetStyle: TStrings;
該項中包含了顏色填充樣式的內容。
# 15. TUgWidgetTemp
該元件顯示為一個溫度計。其中的溫度數值的最大值與最小值，以及溫度計液位顯示的數值大小均可進行設定。
# 15.1. 屬性
# 15.1.1. DataField
property DataField: string;
設定控制元件數據感知的欄位名稱，此控制元件支援的欄位數據型別為浮點數型別。
# 15.1.2. DataSource
property DataSource: TUgDataSource;
設定控制元件繫結的數據源。
# 15.1.3. TempOptions
property TempOptions: TTempOptions;
儀表的相關設定選項。
| 名稱 | 說明 |
|---|---|
| BorderColor | 控制元件邊緣的顏色 |
| BorderWidth | 控制元件邊緣的寬度 |
| FillColor | 內部填充的顏色 |
| LabelColor | 刻度標籤的顏色 |
| LabelSize | 刻度標籤的大小 |
| MaxTemp | 顯示溫度的最大值 |
| MinTemp | 顯示溫度的最小值 |
| ReplaceHtml | 是否單獨使用頁面進行顯示 |
| ShowLabel | 是否顯示刻度標籤 |
| ShowScale | 是否顯示刻度 |
| Value | 顯示的數值 |
| ValueUnit | 顯示數值的單位 |