FastWeb 附控控制元件

1. TUgFSButton

  該元件顯示為一個按鈕。其功能與TUgButton類似。不同的是此按鈕可提供更多的自定義樣式的選擇。

1.1. 屬性

名稱	說明
BadgeText	用於設定徽章中顯示的文字資訊
Caption	按鈕顯示的文字內容
CaptionIconFont	設定按鈕顯示的字型圖示
IconAlign	設定字型圖示相對於文字的位置
Scale	設定顯示的倍率大小
ScaleButton	倍率按鈕顯示
StyleButton	按鈕的樣式選擇

1.1.1. BadgeText

property BadgeText: TUniFSBadgeText;

  設定按鈕徽標的顯示以及其中的文字顯示。

1.1.1.1. BackgroundColor

property BackgroundColor: string;

  設定徽章的背景顏色，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)。

1.1.1.2. Text

property Text: string;

  設定徽標上可顯示的文字資訊。

1.1.1.3. TextColor

property TextColor: string;

  設定文字的著色型別，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)。

1.1.1.4. TextSize

property TextSize: Integer;

  設定徽標文字顯示的大小。

1.1.1.5. TextStyle

property TextStyle: string;

  設定徽標文字的樣式型別，可設定項為bold或者normal。

1.1.1.6. Visible

property Visible: Boolean;

  設定徽章是否顯示。

1.1.2. Caption

property Caption: String;

  設定按鈕中顯示的字幕的內容。

1.1.3. CaptionIconFont

property CaptionIconFont: string;

  設定按鈕中顯示的文字圖示的HTML定義內容。格式樣式如下：

<i class="fas fa-plus"></i>

  所有可用的文字圖示的樣式請查閱https://fontawesome.com/v5.0/icons (opens new window)。

1.1.4. IconAlign

property IconAlign: TUniIconAlign;

  設定按鈕中文字圖示相對於文字的位置。

名稱	說明	圖例
iaLeft	圖示相對於文字居於左側
iaTop	圖示相對於文字居於頂部
iaCenter	當文字內容無顯示時圖示居中
iaRight	圖示相對於文字居於右側
iaBottom	圖示相對於文字居於底部

1.1.5. Scale

property Scale: TUniButtonScale;

  設定按鈕中圖示顯示的大小。通過選項的方式來進行設定。

1.1.6. StyleButton

property StyleButton: TStyleButton;

  設定按鈕可顯示的樣式。可通過下拉選框的方式來選擇

2. TUgFSToggle

  該元件顯示為一個滑動開關，點選實現動態的滑動，以達到開關顯示的效果。

2.1. 屬性

名稱	說明
ThemeOff	關閉狀態的顏色
ThemeOn	開啟狀態的顏色
TitleOff	關閉狀態下顯示的文字標題
TitleOn	開啟狀態下顯示的文字標題
Toggled	開關是否處於開啟狀態

2.1.1. ThemeOff

procedure ThemeOff: TThemeToggle;

  設定關閉狀態下按鈕顯示的樣式顏色，可從下拉選框中選擇顏色主題樣式。

2.1.2. ThemeOn

procedure ThemeOn: TThemeToggle;

  設定開啟狀態下按鈕顯示的樣式顏色，可從下拉選框中選擇顏色主題樣式。

2.1.3. TitleOff

property TitleOff: string;

  設定關閉狀態下顯示的文字標題。

2.1.4. TitleOn

property TitleOn: string;

  設定開啟狀態下顯示的文字標題。

2.1.5. Toggled

property Toggled: Boolean;

  設定開關目前的狀態，當設定為True時，開關為On狀態，反之，開關為Off狀態。

2.2. 事件

事件	觸發條件
OnToggled	當開關狀態切換時觸發該事件

3. TUgFSMenuButton

  此控制元件的功能與用法與TUgMenuButton相同。此控制元件相較於TUgMenuButton可提供更多的自定義樣式。關於其樣式的設定說明請參考TUgFSButton。

4. TUgFSToast

  該元件為彈出式提示資訊框，根據需要可以在控制元件中設定要顯示的內容，執行相應的方法來顯示自行定製的資訊。

4.1. 屬性

名稱	說明
Balloon	設定為氣球模式，提示框的進度條會顯示在提示框的頂部
BackgroundColor	設定背景顏色，顏色設定的文字樣式為RGB(118,23,224)，其中的三個數值的取值範圍均為0-255
ButtonCustomActive	設定是否顯示在提示框中顯示自定義的按鈕
ButtonCustomText	設定顯示于自定義按鈕中的文字
ButtonTextNo	設定顯示于No按鈕上的文字
ButtonTextYes	設定顯示于Yes按鈕上的文字
Close	設定是否在提示框中顯示關閉按鈕
CloseOnClick	設定是否使用單擊以關閉提示框的功能
CloseOnEscape	設定是否使用按esc以關閉提示框的功能
Drag	設定提示框是否支援滑鼠的拖動操作
Icon	設定提示框中使用的字型圖示，示例的字型圖示表示格式為far fa-user-circle 可用的字型圖示列表檢視https://fontawesome.com/v5.0/icons (opens new window)
iconColor	設定提示框中字型圖示的顏色，顏色設定的文字樣式為RGB(118,23,224)，其中的三個數值的取值範圍均為0-255
Layout	設定顯示的佈局樣式，可選擇的樣式為SmallInt(最小化佈局)以及Medium(中等佈局)
Msg	設定顯示于提示框中的資訊內容
MsgColor	設定顯示于提示框中的資訊的文字顏色
MsgLineHeight	設定顯示于提示框中的資訊的行高度
MsgSize	設定顯示于提示框中的資訊的字型大小
PauseOnHover	設定當滑鼠懸停在提示框上時進度條暫停移動
Position	設定提示框顯示的位置 bottomCenter：提示框顯示于底部居中位置 bottomLeft：提示框顯示于底部左側位置 bottomRight：提示框顯示于底部右側位置 center：提示框顯示于中心位置 topCenter：提示框顯示于頂部中心位置 topLeft：提示框顯示于頂部左側位置 topRight：提示框顯示于頂部右側位置
ProgressBar	設定是否顯示提示框中的進度條
ProgressBarColor	設定提示框中的進度條顯示的顏色，顏色設定的文字樣式為RGB(118,23,224)，其中的三個數值的取值範圍均為0-255
ResetOnHover	當滑鼠懸停在提示框上時進度條的進度是否被重置
Theme	設定提示框顯示的主題配色樣式，可選項有Dark與Light
TimeOut	設定提示框的預設超時時間，以毫秒為單位
Title	設定顯示的提示框標題
TitleColor	設定顯示的提示框標題的顏色，顏色設定的文字樣式為RGB(118,23,224)，其中的三個數值的取值範圍均為0-255
TitleLineHeight	設定顯示的提示框標題的行高度
TitleSize	設定顯示的提示框標題的文字字型大小
ToastOnce	設定是提示框資訊否僅顯示一次
TransitionIn	設定開始顯示提示框資訊時的動畫樣式
TransitionOut	設定提示框顯示消失時的動畫樣式

4.2. 事件

名稱	說明
OnClosePopup	當關閉對話方塊時觸發事件
OnShowPopup	當顯示對話方塊時觸發事件
OnClickPopup	當點選對話方塊時觸發事件
OnQuestionCallBack	當使用問題的對話方塊，點選其中的按鈕時觸發事件

4.2.1. OnQuestionCallBack

  當使用問題的對話方塊，點選其中的按鈕時觸發事件。事件使用的示例如下。

//JScript
function UgFSToast01OnQuestionCallBack(toastbutton)
{
  //表示點選確認按鈕
  if (toastbutton == 6)
  {
    ShowMessage("Yes");
  }
  //表示點選取消按鈕
  if (toastbutton == 7)
  {
    ShowMessage("No");
  }
}

//PasScript
procedure UgFSToast01OnQuestionCallBack(toastbutton: integer);
begin
  //表示點選確認按鈕
  if toastbutton = 6 Then
  Begin
    ShowMessage('Yes');
  End;
  //表示點選取消按鈕
  if toastbutton = 7 Then
  Begin
    ShowMessage('No');
  end;
end;

// Make sure to add code blocks to your code group

4.3. 方法

4.3.1. Show

procedure Show;

  當使用屬性中設定的專案時，呼叫此方法可顯示自定義的樣式資訊。

//JScript
  UgFSToast01.ButtonCustomActive = True;
  UgFSToast01.ButtonCustomText = "Text Button";
  UgFSToast01.Title = "Title Message";
  UgFSToast01.Msg = "Hi, you have new message";
  UgFSToast01.Show;

//PasScript
  UgFSToast01.ButtonCustomActive := True;
  UgFSToast01.ButtonCustomText := 'Text Button';
  UgFSToast01.Title := 'Title Message';
  UgFSToast01.Msg := 'Hi, you have new message';
  UgFSToast01.Show;

// Make sure to add code blocks to your code group

4.3.2. Success

procedure Success(Title: string; Msg: string);

  顯示運行成功樣式的提示資訊。

//JScript
  UgFSToast01.Success("Progress","Success");

//PasScript
UgFSToast01.Success('Progress','Success');

// Make sure to add code blocks to your code group

4.3.3. Info

procedure Info(Title: string; Msg: string);

  顯示提示資訊。

//JScript
  UgFSToast01.Info("Progress","In Progress");

//PasScript
UgFSToast01.Info('Progress','In Progress');

// Make sure to add code blocks to your code group

4.3.4. Warning

procedure Warning(Title: string; Msg: string);

  顯示警告提示資訊。

//JScript
UgFSToast01.Warning("Progress","Canceled");

//PasScript
UgFSToast01.Warning('Progress','Canceled');

// Make sure to add code blocks to your code group

4.3.5. Error

procedure Error(Title: string; Msg: string);

  顯示錯誤提示資訊。

//JScript
UgFSToast01.Error("Progress","Error");

//PasScript
UgFSToast01.Error('Progress','Error');

// Make sure to add code blocks to your code group

4.3.6. Question

procedure Question(const Title: string; const Msg: string;);

  設定提問。

//JScript
UgFSToast01.Question("Question","Do you know about FastWeb?");

//PasScript
UgFSToast01.Question('Question','Do you know about FastWeb?');

// Make sure to add code blocks to your code group

4.3.7. CloseAll

procedure CloseAll;

  關閉所有的對話方塊。

5. TUgFSiGrowl

  該元件顯示為一個訊息提示的控制元件。通過呼叫方法，執行自定義的文字內容，以達到顯示的效果。

5.1. 屬性

名稱	說明
AlertSize	設定資訊框的大小，可設定兩種樣式：Regular或者Small
Delay	設定從開始顯示提示框至子哦對那個關閉提示框的時間間隔，以毫秒為單位
EnableAnimation	設定是否啟用動畫效果
EnterAnimaition	設定顯示提示框時的動畫效果
ExitAnimation	設定提示框消失時的動畫效果
Icon	設定提示框中顯示的圖示的型別
Messages	設定顯示的提示框中顯示的訊息
OffsetX	設定提示框顯示的位置的橫向偏移量
OffsetY	設定提示框顯示的位置的縱向偏移量
PlacementX	設定提示框顯示的橫向相對位置
PlacementY	設定提示框顯示的縱向相對位置
Spacing	設定提示框之間顯示時的畫素間隔
Title	設定提示框顯示的文字標題
Types	設定顯示的提示框型別,不同的選項可適用於不同的場景

5.2. 方法

5.2.1. Run

procedure Run;

  當使用屬性設定自定義的提示框樣式后，使用此方法可顯示自定義樣式的提示框。

5.2.2. Success

procedure Success(const Title: string; const Msg: string);

  顯示成功提示資訊。

//JScript
UgFSiGrowl01.Success("Progress","Success");

//PasScript
UgFSiGrowl01.Success('Progress','Success');

// Make sure to add code blocks to your code group

5.2.3. Info

procedure Info(const Title: string; const Msg: string);

  顯示提示資訊。

//JScript
UgFSiGrowl01.Info("Progress","In Progress");

//PasScript
UgFSiGrowl01.Info('Progress','In Progress');

// Make sure to add code blocks to your code group

5.2.4. Warning

procedure Warning(const Title: string; const Msg: string);

  顯示警告提示資訊。

//JScript
UgFSiGrowl01.Warning("Progress","Canceled");

//PasScript
UgFSiGrowl01.Warning('Progress','Canceled');

// Make sure to add code blocks to your code group

5.2.5. Error

procedure Error(const Title: string; const Msg: string);

  顯示錯誤提示資訊。

//JScript
UgFSiGrowl01.Error("Progress","Error");

//PasScript
UgFSiGrowl01.Error('Progress','Error');

// Make sure to add code blocks to your code group

5.2.6. Simple

procedure Simple(const Title: string; const Msg: string);

  設定顯示簡單的提示資訊。

6. TUgFSPopup

  此控制元件可用於顯示彈出式的列表，可用於額外的功能表專案的展示。

6.1. 屬性

名稱	說明
ArrowLocation	設定列表的箭頭顯示的方向 left：箭頭顯示于彈出列表的左側 right：箭頭顯示于彈出列表的右側 bottom：箭頭顯示于彈出列表的底部 top：箭頭顯示于彈出列表的頂部 none：不顯示箭頭
DismissDelay	設定忽略提示的時長，以毫秒為單位
FadeInDuration	設定顯示彈出列表的動畫的持續時長，以毫秒為單位
FadeOutDuration	設定彈出列表的動畫消失時持續的時長，以毫秒為單位
Html	設定列表中顯示的內容，以html文字的方式來進行展示
PopupEvent	設定彈出列表需要觸發的事件型別，可選的專案為click，表示通過點選控制元件來觸發彈出列表的事件
RelativePosition	設定彈出列表的相對位置
RelativeX	設定彈出列表橫向的位置偏移量
RelativeY	設定彈出列表縱向的位置偏移量
Target	設定彈出列表繫結的控制元件對像

6.1.1. RelativePosition

property RelativePosition: TRelativePosition;

  設定彈出列表的相對位置。可設定的專案說明如下。

名稱	說明	圖例
b_t	彈出列表的底部與繫結控制元件的頂部對齊，且水平居中
b_b	彈出列表的底部與繫結控制元件的底部對齊，且水平居中
bl_tr	彈出列表的左下角與繫結控制元件的右上角對齊
br_tl	彈出列表的右下角與繫結控制元件的左上角對齊
c_c	彈出列表的中心與繫結控制元件的中心齊平，且水平居中
l_l	彈出列表的左側與繫結控制元件的左側對齊，且垂直居中
l_r	彈出列表的左側與繫結控制元件的右側對齊，且垂直居中
r_l	彈出列表的右側與繫結控制元件的左側對齊，且垂直居中
r_r	彈出列表的右側與繫結控制元件的右側對齊，且垂直居中
t_b	彈出列表的頂部與繫結控制元件的底部對齊，且水平居中
t_t	彈出列表的頂部與繫結控制元件的頂部對齊，且水平居中
tr_bl	彈出列表的右上角與繫結控制元件的左下角對齊
tr_br	彈出列表的右上角與繫結控制元件的右下角對齊

6.2. 事件

6.2.1. OnEvents

  設定其中的專案的點選事件，完整的設定以及響應方式如下。

//JScript
var SB;

function UgFSPopup02OnEvents(eventname,params)
{
  if (Params.Values["act"] == "act1"){
    ShowMessage("one");
  }
  if (Params.Values["act"] == "act2"){
    ShowMessage(Params.Values["cod"]);
  }
}

{
  SB = new TStringBuilder();
  try{    
    //繫結事件1
    SB.Append("<a onClick=ajaxRequest("+UgFSPopup02.JSName+",'popup',['act=act1','cod=125']); style='cursor: pointer;'");
    SB.Append(" class='fs-group-item'><i class='fas fa-lg fa-user-check text-blue'></i>&nbsp; AAA</a>");
    //繫結事件2
    SB.Append("<a onClick=ajaxRequest("+UgFSPopup02.JSName+",'popup',['act=act2','cod=126']); style='cursor: pointer;'");
    SB.Append(" class='fs-group-item'><i class='far fa-lg fa-envelope text-green'></i>&nbsp; BBB</a>");

    UgFSPopup02.SetHtml(SB.ToString);
  }
  finally{
    FreeAndNil(SB);
  }
}

//PasScript
var
  SB: TStringBuilder;

procedure UgFSPopup02OnEvents(eventname: string;params: tunistrings);
begin
  if Params.Values['act'] = 'act1' then
    ShowMessage('one');
  if Params.Values['act'] = 'act2' then
    ShowMessage(Params.Values['cod']);
end;

begin
  SB := TStringBuilder.Create;
  try    
    //繫結事件1
    SB.Append('<a onClick=ajaxRequest('+UgFSPopup02.JSName+',''popup'',[''act=act1'',''cod=125'']); style=''cursor: pointer;''');
    SB.Append(' class=''fs-group-item''><i class=''fas fa-lg fa-user-check text-blue''></i>&nbsp; AAA</a>');
    //繫結事件2
    SB.Append('<a onClick=ajaxRequest('+UgFSPopup02.JSName+',''popup'',[''act=act2'',''cod=126'']); style=''cursor: pointer;''');
    SB.Append(' class=''fs-group-item''><i class=''far fa-lg fa-envelope text-green''></i>&nbsp; BBB</a>');

    UgFSPopup02.SetHtml(SB.ToString);
  finally
    FreeAndNil(SB);
  end;
End.

// Make sure to add code blocks to your code group

  使用以上方式進行繫結后，列表中顯示的內容可響應事件。

6.3. 方法

6.3.1. SetHtml

procedure SetHtml(Value: string);

  設定要顯示的HTML內容。

//JScript
  var SB;
  SB = TStringBuilder;
  try{
    SB.Append("<a class='fs-group-item'><i class='far fa-smile fa-lg text-green'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-sync fa-lg text-green'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-puzzle-piece fa-lg text-red'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-sync fa-lg text-green'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-sync fa-lg text-green'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-puzzle-piece fa-lg text-red'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-sync fa-lg text-green'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-sync fa-lg text-green'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='fas fa-puzzle-piece fa-lg text-red'></i>&nbsp; 05/05/2020 - Hello </a>");
    SB.Append("<a class='fs-group-item'><i class='far fa-thumbs-up fa-lg text-purple'></i>&nbsp; 05/05/2020 - Hello </a>");

    UgFSPopup01.SetHtml(SB.ToString);
  }
  finally{
    FreeAndNil(SB);
  }

//PasScript
var
  SB: TStringBuilder;
begin
  SB := TStringBuilder.Create;
  try
    SB.Append('<a class=''fs-group-item''><i class=''far fa-smile fa-lg text-green''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-sync fa-lg text-green''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-puzzle-piece fa-lg text-red''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-sync fa-lg text-green''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-sync fa-lg text-green''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-puzzle-piece fa-lg text-red''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-sync fa-lg text-green''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-sync fa-lg text-green''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''fas fa-puzzle-piece fa-lg text-red''></i>&nbsp; 05/05/2020 - Hello </a>');
    SB.Append('<a class=''fs-group-item''><i class=''far fa-thumbs-up fa-lg text-purple''></i>&nbsp; 05/05/2020 - Hello </a>');

    UgFSPopup01.SetHtml(SB.ToString);
  finally
    FreeAndNil(SB);
  end;
End.

// Make sure to add code blocks to your code group

7. TUgFSQrCode

  此控制元件顯示為二維碼，可輸入資訊以呈現所需的二維碼資訊。

7.1. 屬性

7.1.1. QrOptions

property QrOptions: TQrOptions;

  設定二維碼顯示的選項。

名稱	說明
BackgroundColor	設定背景的顏色，無背景顏色的使用null，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)
Content	設定二維碼中包含的文字內容
Fill	設定填充二維碼的顏色，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)
FontColor	設定二維碼中心顯示的字型的顏色，此處的顏色值以CSS顏色為基準。若需要了解在此處可使用的顏色表達式，請檢視<color> (opens new window)
FontName	設定二維碼中心顯示的字型名稱
ImageUrl	輸入圖片的地址用於在二維碼中心區域顯示圖示
LabelQr	設定顯示在二維碼中心區域的文字的內容
Level	設定編碼的級別
MinVersion	用於設定二維碼的點陣密度
Mode	設定二維碼中心的圖示的顯示模式 image_box：設定顯示為圖片盒子 image_strip：設定顯示為圖片橫條 label_box：設定顯示為標籤盒子 label_strip：設定顯示為標籤條 normal：不顯示
PositionLabelQrX	設定標籤的橫向偏移量
PositionLabelQrY	設定標籤的縱向偏移量
QuietZone	設定控制元件邊框與二維碼之間的空白區域寬度
Radius	設定二維碼點陣的弧度
Render	設定二維碼在瀏覽器中的渲染模式
SizeLabelQr	設定二維碼中的標籤顯示的尺寸大小

7.2. 方法

7.2.1. Generate

procedure Generate;

  呼叫此方法可動態重新產生二維碼。

7.2.2. GetImage

procedure GetImage;

  使用此方法可動態更新獲取標籤中的影象資訊。

8. TUgFSCalcEdit

  此控制元件為帶有計算機功能的編輯框，可通過自帶的數字框計算器來快速實現數字的計算。其主要功能與TUgNumberEdit相同。

9. TUgFSGoogleChart

  該元件使用Google圖表進行數據展示。可顯示面積圖，柱狀圖等相關的統計圖表。

9.1. 屬性

屬性	功能說明
ChartType	設定圖表的型別
ChartDataSet	設定圖表繫結的數據集
ChartOptions	圖表的相關設定選項

9.1.1. ChartType

property ChartType: TChartType;

  設定GoogleChart的圖表型別。

名稱	說明	圖示
AreaChart	面積圖
Bar	柱狀圖
BubbleChart	氣泡圖
Gauge	儀表盤
GeoChart	地理資訊圖
LineChart	線型圖
PieChart	餅圖

9.1.2. ChartDataSet

property ChartDataSet: TDataSet;

  設定數據來源的數據集控制元件名稱。

9.1.3. ChartOptions

property ChartOptions: TStrings;

  圖表設定的相關選項。該選項以JSON格式進行儲存。

• GeoChart選項   一個GeoChart選項設定如下：

displayMode: "region",
backgroundColor: "#81d4fa",
colorAxis: {colors: ["#00853f", "black", "#e31b23"]},
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},

名稱	說明
displayMode	地理圖型別，數據表型別需與數據展示的型別相匹配，支援以下型別： auto:根據數據表的型別自動選擇 regions:可為區域上色的地理圖 markers:在區域內放置標記 text:為區域標記數據表中的文字內容
backgroundColor	設定圖表的背景顏色，可以是HTML定義的顏色，比如red或者#00cc00。
colorAxis	規定值地圖的顏色列的數值
tooltip	提示工具的相關選項

  如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart GeoChart文件 (opens new window)查閱。

• PieChart選項

  一個PieChart選項設定如下：

title: "My Daily Activities (1)", 
tooltip: {textStyle: {color: "#FF0000"}, showColorCode: true},

名稱	說明
title	標題名稱
tooltip	提示框的相關選項

  如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart PieChart文件 (opens new window)查閱。

• Gauge選項

  一個Gauge選項設定如下：

redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5

名稱	說明
redFrom	顯示紅色區域的起始值
redTo	顯示紅色區域的終止值
yellowFrom	顯示黃色區域的起始值
yellowTo	顯示黃色區域的終止值
minorTicks	在兩個顯示數值的刻度之間設定的小刻度區域的數量

  如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart Gauge文件 (opens new window)查閱。

• Area Charts選項

  一個Area Chart選項設定如下：

title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }

名稱	說明
title	圖表的標題名稱
curveType	曲線型別 function:函式曲線 none:無型別
lengend	圖表標籤的選項

  如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart AreaChart文件 (opens new window)查閱。

• Bar Chart選項

  一個Bar Chart選項設定如下：

title: 'Company Performance',
legend: { position: 'bottom' }

名稱	說明
title	圖表的標題名稱
lengend	圖表標籤的選項

  如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart BarChart文件 (opens new window)查閱。

• Bubble Chart選項

  一個Bubble Chart選項設定如下：

title: 'Correlation between life expectancy',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}

名稱	說明
title	圖表的標題名稱
hAxis	設定橫軸的標題名稱
vAxis	設定縱軸的標題名稱
bubble	設定氣泡內的樣式

  如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart BubbleChart文件 (opens new window)查閱。

• Line Chart選項

  一個Line Chart選項設定如下：

title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }

名稱	說明
title	圖表的標題名稱
curveType	曲線型別 function:函式曲線 none:無型別
lengend	圖表標籤的選項

  如需要更詳細的設定選項以實現自定義圖表，點選GoogleChart LineChart文件 (opens new window)查閱。

9.2. 方法

9.2.1. LoadChart

procedure LoadChart;

  該方法用於初始化並載入圖表。

10. TUgFSKendoUI

  該元件為圖表顯示元件，可用於圖表數據的分析結果的彙總展示。 10.2.1.

10.1. 屬性

屬性	功能說明
ChartDataSet	設定圖表繫結的數據集的名稱
ChartLengendPosition	設定圖表銘牌的位置
ChartNameExport	設定圖表導出時使用的檔名稱
ChartSeries	設定數據系列
ChartSeriesDefaults	設定數據系列的預設取值
ChartSeriesProperties	設定數據系列的選項
ChartStacked	設定堆疊
ChartTheme	設定圖表的主題
ChartTitle	設定圖表標題
ChartType	設定圖表型別

10.1.1. ChartDataSet

property ChartDataSet: TDataSet;

  設定圖表繫結的數據集控制元件的名稱。

10.1.2. ChartLengendPosition

property ChartLegendPosition: TUgFSKendoUIPosition;

  設定圖例說明的顯示位置。

10.1.3. ChartNameExport

property ChartNameExport: string;

  設定導出檔案的圖表名稱。

10.1.4. ChartProperties

property ChartProperties: TStrings;

  設定圖表的相關屬性。

//JScript
UgFSKendoUI01.ChartProperties.Values["valueAxis"] = "{labels: {format: \"0:c\"}}";

//PasScript
UgFSKendoUI01.ChartProperties.Values['valueAxis'] := '{labels: {format: "0:c"}}';

// Make sure to add code blocks to your code group

  關於屬性設定的相關內容可以參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。除以下屬性外的剩餘選項（通常處於JSON配置的末尾）可作為該屬性的內容進行填充。

10.1.5. ChartSeries

property ChartSeries: TStrings;

  設定數據系列。關於該內容可參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。配置為series部分的內容可用於該屬性的設定選項。

//JScript
UgFSKendoUI01.ChartSeries.Values["Mundo"] = "world_users";

//PasScript
UgFSKendoUI01.ChartSeries.Values['Mundo'] := 'world_users';

// Make sure to add code blocks to your code group

10.1.6. ChartSeriesDefaults

property ChartSeriesDefaults: string;

  設定數據系列的預設值。關於該內容可參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。配置為seriesDefaults部分的內容可用於該屬性的設定選項。

//JScript
UgFSKendoUI01.ChartSeriesDefaults := "labels: {visible: true, position: \"insideEnd\", format: \"0:c\"}";

//PasScript
UgFSKendoUI01.ChartSeriesDefaults := 'labels: {visible: true, position: "insideEnd", format: "0:c"}';

// Make sure to add code blocks to your code group

10.1.7. ChartSeriesProperties

property ChartSeriesProperties: TStrings;

  設定數據系列的選項。關於該內容可參考KendoUI屬性文件 (opens new window)進行配置，選擇對應的圖表型別後進行查詢。配置在series中的選項的展開選項專案可用於該屬性的選項設定。

//JScript
UgFSKendoUI01.ChartSeriesProperties.Values["United States"] := "labels: {visible: true, align: \"column\", format: \"{0}%\"}";

//PasScript
UgFSKendoUI01.ChartSeriesProperties.Values['United States'] := 'labels: {visible: true, align: "column", format: "{0}%"}';

// Make sure to add code blocks to your code group

10.1.8. ChartStacked

property ChartStacked: Boolean;

  是否進行圖表的堆疊。

10.1.9. ChartTheme

property ChartTheme: TUgFSKendoUITheme;

  設定圖表的主題風格。

10.1.10. ChartTitle

property ChartTitle: string;

  設定圖表標題。

10.1.11. ChartTitleVisible

property ChartTitleVisible: Boolean;

  設定圖表標題是否可見。

10.1.12. ChartType

property ChartType: TUgFSKendoUIType;

  設定圖表的型別。

名稱	說明	圖示
Columns	縱向柱狀圖
Bar	橫向柱狀圖
Line	折線圖
Pie	餅圖
Scatter	散點圖
ScatterLine	散點連線圖

10.2. 方法

10.2.1. InitChart

procedure InitChart;

  初始化設定圖表並打開。

11. TUgFSConfirm

  此控制元件用於設定顯示確認的提示對話方塊。

11.1. 屬性

屬性	功能說明
BackgroundDismiss	設定點選背景時是否忽視操作
boxWidth	設定顯示的提示框的寬度
ButtonEnterConfirm	設定按下enter按鍵表示為確認
ButtonTextCancel	設定取消按鈕上顯示的文字內容
ButtonTextConfirm	設定確認按鈕上顯示的文字內容
ButtonTextOK	設定OK按鈕上顯示的文字內容
ButtonTextOther	設定Other按鈕上顯示的文字內容
CloseIcon	設定是否顯示關閉按鈕
Content	設定提示框中顯示的正文的內容
Draggable	設定提示框是否可以被滑鼠拖動
EscapeKey	設定控制元件是否響應esc按鍵
Icon	設定顯示的字型圖示，所有可用的文字圖示的樣式請查閱https://fontawesome.com/v5.0/icons (opens new window)
PromptType	如果提示框需要使用者輸入資訊以進行確認提示的，則可設定其中的相關選項
ScreenMask	設定是否使用螢幕提示的友好資訊框
Theme	設定提示框顯示的主題
Title	設定提示框的標題內容
TypeAnimated	設定輸入框中的內容是否以動畫方式顯示
TypeColor	設定輸入框中主題顯示的顏色
TypeConfirm	設定輸入確認提示框的樣式

11.1.1. PromptType

property PromptType: TUniFSPromptType;

  設定需要輸入的提示框中的相關資訊。

名稱	說明
CharCase	設定文字的大小寫型別 Normal_：設定文字為正常模式，即保持所有文字預設的大小寫情形 LowerCase_：所有的英文字元均轉換為小寫 UpperCase_：所有的英文字元均轉換為大寫
RequireField	是否設定文字輸入為必須操作
TextRequireField	設定文字輸入為必須操作的提示資訊
TypePrompt	設定輸入的文字顯示的型別 text：設定顯示為文字型別 password：設定顯示為密碼字元型別

11.1.2. ScreenMask

property ScreenMask: TUniFSScreenMask;

  設定螢幕友好提示資訊，用於在處理過程中的顯示內容。

名稱	說明
Enabled	設定是否啟用遮罩的功能
Text	設定螢幕遮罩上顯示的文字內容

11.2. 事件

11.2.1. OnAlert

procedure UgFSConfirm01OnAlert(confirmbutton: tconfirmbutton);

  當在警告的對話方塊中按下確認按鈕后觸發事件。

11.2.2. OnConfirm

procedure UgFSConfirm01OnConfirm(confirmbutton: tconfirmbutton);

  當在確認的對話方塊中按下確認按鈕后觸發事件。

11.2.2.1. OnPrompt

procedure UgFSConfirm01OnPormpt(confirmbutton: tconfirmbutton;result: string);

  當在輸入的對話方塊中按下確認按鈕后觸發事件，result中儲存輸入的文字內容。

11.3. 方法

11.3.1. Clear

procedure Clear;

  設定清除內容。

11.3.2. ShowMask

procedure ShowMask(Msg: string);

  呼叫顯示相關資訊的遮罩。

11.3.3. ShowMaskPercent

procedure ShowMaskPercent(Msg: string; Percent: Integer);

  設定顯示包含進度條資訊的遮罩。

11.3.4. ShowMaskJSName

procedure ShowMaskJSName(Msg: string; JSName: string);

  呼叫指定控制元件JS的遮罩資訊。

11.3.5. ShowMaskUpdate

procedure ShowMaskUpdate(Msg: string; Percent: Integer);

  當遮罩啟用時設定遮罩的百分比數值更新。

//JScript
  try{
    UgFSConfirm01.ShowMaskPercent("Starting Processing...",10);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Creating Order...",25);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Processing Payment...",70);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate("Ending Asking...",90);
    Sleep(1000);
    UgFSConfirm01.ShowMaskUpdate("Ending Asking...",100);
    Sleep(1000);
    UgFSConfirm01.Alert("Thanks for the purchase","Order 561560");
  }
  finally{
    UgFSConfirm01.RemoveMask;
  }

//PasScript
  //更新進度的設定
  try
    UgFSConfirm01.ShowMaskPercent('Starting Processing...',10);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Creating Order...',25);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Processing Payment...',70);
    Sleep(2000);
    UgFSConfirm01.ShowMaskUpdate('Ending Asking...',90);
    Sleep(1000);
    UgFSConfirm01.ShowMaskUpdate('Ending Asking...',100);
    Sleep(1000);
    UgFSConfirm01.Alert('Thanks for the purchase','Order 561560');
  finally
    UgFSConfirm01.RemoveMask;
  end;

// Make sure to add code blocks to your code group

11.3.6. RemoveMask

procedure RemoveMask;

  如果目前正在顯示遮罩，使用此方法可移除遮罩。

11.3.7. Alert

procedure Alert(const Title: string; const Content: string);

  設定警告提示資訊。

11.3.8. Prompt

procedure Prompt(const Title: string; const Msg: string);

  設定文字的輸入資訊。

11.3.9. Question

procedure Question(const Title: string; const Content: string; TP: TTypeConfirm);

  顯示提問型別的對話方塊。

11.3.10. Mask

procedure Mask(const Msg: string);

  顯示遮罩。