图表控件

# 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	当点击按钮，状态切换时触发该事件

← 数据控制控件仪表控件→