圖表控制元件

# FastWeb圖表控制元件

適用平臺： WEB(桌面)

該組下的元件主要是一些圖表元件，可配合DBGird，以動態儀表的方式進行數據展示。只需在欄位的屬性設定中WidgetColumn設定Widget並將Enabled設定為True。

# 1. TUgButtonWidget

該元件在DBGrid的表格中顯示為一個按鈕，按鈕中顯示欄位的取值。在DBGrid的結構觀察器中，點選對應需要顯示為按鈕型別的欄位，在其WidgetColumn中設定Widget為UgButtonWidget，將其Enabled屬性設定為True。

# 2. TUgPorgressBarWidget

該元件在DBGrid的表格中顯示為進度條。在DBGrid的結構觀察器中，點選對應需要顯示為按鈕型別的欄位，在其WidgetColumn中設定Widget為UgPorgressBarWidget，將其Enabled屬性設定為True。

# 3. TUgSliderWidget

該元件在DBGrid的表格中顯示為滑塊。在DBGrid的結構觀察器中，點選對應需要顯示為按鈕型別的欄位，在其WidgetColumn中設定Widget為UgSliderWidget，將其Enabled屬性設定為True。

# 4. TUgJQueryFrame

該元件顯示為一個網頁，雙擊可打開JQuery元件管理器。具體的使用方法可參考JQuery元件。

# 4.1. 屬性

屬性	說明
GUID	設定元件引用的全域性ID名稱
Params	設定元件引用的參數資訊

# 4.1.1. GUID

property GUID: string;

設定元件引用的全域性ID。

# 4.1.2. Params

property Params: TStrings;

設定元件引用的參數資訊。

# 4.2. 方法

# 4.2.1. Init

procedure Init(const AGUID: string);

初始化顯示設定。如指令碼中未填寫參數資訊，將使用控制元件中的預設設定進行顯示。

//JScript
  //在GUID屬性中設定了內容的，直接初始化
  UgJQueryFrame01.Init;
  
  //選擇特定GUID的內容進行初始化
  UgJQueryFrame01.Init("E65E69B8-D584-4199-AC82-F0A4D37902FF");

1
2
3
4
5
6

//PasScript
  //在GUID屬性中設定了內容的，直接初始化
  UgJQueryFrame01.Init;
  
  //選擇特定GUID的內容進行初始化
  UgJQueryFrame01.Init('E65E69B8-D584-4199-AC82-F0A4D37902FF');

1
2
3
4
5
6

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

# 4.2.2. JSONToData

procedure JSONToData(const Value: string);

將JSON序列化的數據傳遞至控制元件實現參數的傳遞。

//JScript
//單個參數傳遞
UgJQueryFrame01.JSONTOData("{\"param_value\":\"11\"}");
//多個參數的傳遞
UgJQueryFrame01.JSONTOData("{\"param_value1\":\"11\",\"param_value2\":\"22\"}");

1
2
3
4
5

//PasScript
//單個參數傳遞
UgJQueryFrame01.JSONTOData('{"param_value":"11"}');
//多個參數的傳遞
UgJQueryFrame01.JSONTOData('{"param_value1":"11","param_value2":"22"}');

1
2
3
4
5

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

# 5. TUgEChart

該元件為EChart控制元件，關於EChart的內容可以參考EChart (opens new window)。

# 5.1. 屬性

# 5.1.1. Options

property Options: TStringList;

該屬性用於指定控制元件顯示的數據以及樣式資訊。關於這部分內容可以參考EChart教程 (opens new window)。將Option部分的內容填寫至該屬性中即可。

例如我們將以下內容填寫至Options屬性中。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

1
2
3
4
5
6
7
8
9
10
11
12
13

運行界面如下圖所示：

# 6. TUgCodeMirror

該元件用於對程式碼部分的內容進行語法高亮顯示，以便於程式碼的閱讀。

# 6.1. 屬性

屬性	說明
HiglightSelectionMatches	是否對選擇的高亮顯示部分的內容進行匹配，其他與選中部分相同的字元也會高亮顯示
Language	高亮匹配的語法型別
Lines	程式碼編輯器中輸入的內容
Theme	程式碼編輯器的外觀型別

# 7. TUgHtmlReport

該元件用於獲取表格中的數據並輸出表格。從數據集表格中獲取到數據集資訊后，輸入表格的資訊來輸出報表資訊。

# 7.1. 屬性

屬性	說明
DBGrid	設定表格數據的來源控制元件
Footer	設定頁尾資訊
Header	設定頁首資訊

# 7.2. 方法

# 7.2.1. Print

function Print:Boolean;

該方法用於輸出表格。

UgHtmlReport01.Print;

# 8. TUgSyntaxEditor

此元件顯示為一個語法編輯器。可指定語法的型別，實現特定關鍵字的高亮顯示，使文字或程式碼的閱讀更高效。

# 8.1. 屬性

屬性	說明
Language	指定文字的語法型別
Lines	指定要顯示的文字內容

# 9. TUgServerStatistics

此控制元件用於設定顯示的服務統計資訊。

# 9.1. 方法

# 9.1.1. UpdateStats

procedure UpdateStats;

此方法用於更新服務統計數據表格。

# 10. TUgSystemResources

此控制元件用於設定顯示的系統資源使用情況資訊。

# 10.1. 方法

# 10.1.1. UpdateStats

procedure UpdateStats;

此方法用於更新系統資源使用情況統計數據表格。

# 11. TUgInfoGraphiq

此控制元件用於設定顯示SVG元素的點選響應功能，通過參數設定來展示。

# 11.1. 屬性

# 11.1.1. Options

設定控制元件的顯示相關的選項。

# 11.1.1.1. button_text

property button_text: string;

設定全屏按鈕上顯示的內容，預設為Full Screen。

# 11.1.1.2. colored_sections

property colored_sections: Boolean;

資訊圖中不同類別的可點選元素是否應具有不同的懸停顏色。如果 colored_sections 設定為 True，則 hover_color 參數將被參數 section_colors 取代。如果鏈接表中存在 section 列，則此參數應僅設定為 True 。

# 11.1.1.3. csv

property csv: Boolean;

設定鏈接表的檔案路徑，允許使用相對和絕對鏈接。其示例如下。

svg,icon,title,link,section,not_modal
illustrator_example.svg,chartexample1,Google Charts Example,library/js/infographiq/modals/modal_google_charts.html,Category 1,F
illustrator_example.svg,chartexample2,Google Charts Example with Trend Bar,library/js/infographiq/modals/modal_google_charts2.html,Category 1,F
illustrator_example.svg,chartexample3,Highcharts Example,library/js/infographiq/modals/modal_highcharts.html,Category 1,F
illustrator_example.svg,chartexample4,Charts as Image Example,library/js/infographiq/modals/modal_image.html,Category 2,F
illustrator_example.svg,chartexample5,Link Out to Other Page,https://www.noaa.gov/,Category 2,T
illustrator_example.svg,chartexample6,Google Charts Example using CSV data,library/js/infographiq/modals/modal_google_charts3.html,Category 2,F

1
2
3
4
5
6
7

第一行為表頭的內容，每項均以逗號分隔，從第二行開始，每行均為記錄，記錄中每一項以逗號分隔，項的數量要與第一行的數量一致。

svg：鏈接的對象引用的svg檔案的名稱。名稱為相對地址。
icon：鏈接圖示使用的對應的SVG的ID地址，此ID需要與SVG中定義的元素ID相同。
title：設定彈出視窗的標題名稱。
link：設定鏈接的專案的名稱，或者是其它的URL。
section：設定鏈接專案所在的組的序號。
not_modal：一種直接鏈接到外部 HTML 資源的方法，而不是將其作為模式視窗載入到影象上方。此列中允許使用兩個值：
- T：直接鏈接到外部 HTML 資源，基於 link 列（不是模式視窗）中的值。
- F：外部 HTML 檔案在 Infographiq 影象上方打開，基於 link 列（模式視窗）中的值。

# 11.1.1.4. full_screen_button

property full_screen_button: Boolean;

設定是否顯示全屏的按鈕。

# 11.1.1.5. height

property height: String;

資訊圖影象的高度，需要一個百分比。高度的預設值為 100% 。

# 11.1.1.6. hover_color

property hover_color: TColor;

影象中可點選元素被選中時的顏色。

# 11.1.1.7. modal_url_pfx

property modal_url_pfx: String;

新增到鏈接表中提供的模式視窗鏈接的 URL 字首。

# 11.1.1.8. section_colors

property section_colors: String;

用於不同類別的可點選元素的顏色列表。預期值是一組符合 CSS 的顏色。section_colors 的預設值為 [『LightGreen』, 『MediumOrchid』, 『Orange』]。 section_colors 僅在 colour_sections 設定為 True 時使用。 section_colors 中的陣列元素數不必與節數匹配。如果陣列元素少於節，則陣列元素在節上重複。如果陣列元素多於節，則忽略多餘的陣列元素。

# 11.1.1.9. svg

property svg: String;

資訊圖影象的檔案路徑，允許使用相對和絕對鏈接。

# 11.1.1.10. svg_filter

property svg_filter

如果鏈接表包含多個資訊圖影象的數據，則應包含鏈接表的哪些行。僅當鏈接表中存在 svg 列時才應設定此參數。只有鏈接表中 svg 列值與 svg_filter 匹配的行才會被包含在內。

# 11.1.1.11. text_toggle

property text_toggle: Boolean;

要顯示在目錄上方的文字切換按鈕型別。

# 11.1.1.12. toc_style

property toc_style: Ttoc_style;

目錄的樣式。允許的值為： accordion、list、none和sectioned_list。

# 11.1.1.13. width

property width: String;

資訊圖影象的寬度，需要一個百分比。寬度的預設值為 100% 。

# 11.2. 方法

# 11.2.1. Init

procedure Init;

此方法用於對控制元件進行初始化操作，在設定完成Options中的相關選項后，可呼叫此方法來載入顯示。

# 12. TUgSwitchImage

該元件為一個開關狀態切換元件，可以為該元件指定不同狀態下的圖片，點選以進行切換。

雙擊控制元件，打開圖片列表界面，雙擊控制元件，打開影象編輯器，點選左上角的+號打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中。索引號為零的表示IsChecked=True時顯示的圖片狀態。索引號為1的表示IsChecked=False時顯示的圖片狀態。

# 12.1. 屬性

# 12.1.1. IsChecked

property IsChecked: Boolean;

該屬性用於確定目前控制元件的開啟/關閉狀態指示，用於顯示反饋不同的圖片。

# 12.2. 事件

事件	觸發條件
OnSwitch	當點選按鈕，狀態切換時觸發該事件

← 數據控制控制元件儀表控制元件→