56.4. 组件


页面包含不同类型的组件。您可以使用 Components 面板在页面中使用以下组件类型:

  • 核心组件
  • 导航组件
  • 报告组件
  • heatmap 组件

56.4.1. 核心组件

您可以使用核心组件 指定自定义 HTML 信息或显示现有页面。核心组件有三种类型:

注意

核心组件不是强制的。

表 56.1. 核心组件子类型
核心组件子类型描述

HTML

此组件打开 HTML 编辑器小部件,用于使用文本、镜像、表、链接和颜色创建 HTML 页面。如果需要,您还可以自定义 HTML 页面。

页面

此组件允许您将之前创建的 HTML 页面添加到新仪表板中。您可以使用此组件嵌套您在仪表板中创建的自定义页面。

logo

此组件允许您在页面中添加镜像。要在页面中添加镜像,您可以为镜像提供 URL,并根据您的要求设置镜像的宽度和高度。默认镜像是 Dashbuilder 的徽标。徽标 URL 字段是必需的。

56.4.2. 导航组件

Navigation 组件用于在页面之间导航。有六个类型的导航组件。

表 56.2. 导航组件子类型
导航组件子类型描述

目标 Div

此组件显示标签列表、菜单栏中和导航树的条目。此外,它还跟踪最后点击的项目。

菜单障碍

此组件以菜单栏中的形式显示导航树的条目。对 Business Central 支持的级别数量没有限制。

标题导航器

此组件以标题的形式显示导航组。组显示为文件夹,但用于单个条目,内容会在选择时显示。

tree

此组件以垂直树结构的形式显示条目。

Danousel

此组件以 lousel 或滑块显示表单显示所选页面。

标签页列表

此组件将所选菜单页面显示为组件顶部的标签页。

注意

非目标 div 组件不需要 Target Div 设置,如 carousel 或标题导航器。

56.4.3. 报告组件

Reporting 组件以图形、表、映射的形式显示数据集中的数据。报告组件有正常类型。有关数据集的更多信息,请参阅 数据集编写 部分。

您可以使用 New Displayer widget 来配置报告组件,它包含以下标签页:

  • 类型 :允许您选择如何以图形方式显示自定义数据。
  • Data: 可让您从 Settings 菜单中的 Data Sets 部分中创建的自定义数据集列表中选择数据集。
  • 显示 :允许您选择和自定义如何通过添加标题、更改颜色、大小来显示内容显示方式。
注意

对于 时间序列 Chart 组件,新建显示器 小部件包含 DatadisplayComponent Editor 选项卡。

表 56.3. 报告组件子类型
报告组件子类型描述

bar

此组件用来以栏图表的形式显示数据集中的数据。

pie

此组件用来以 pie chart 的形式显示数据集中的数据。在 pie 图表中,每个片段的 arc 长度与代表的数量成比例。

此组件用于将数据集中的数据显示为由两个路线段连接的一系列数据点。

区域

此组件将一行图表和栏图表相结合,以显示数据集中的数据。

bubble

此组件在双维图中显示多个 circles (bubbles)。它是 scatter 图表的规范化,可将点替换为 bubbles。

英国

此组件用来以音频的形式显示数据集中的数据。

Map

此组件允许您在使用不同层的上下文(通常是地理)中位置您的数据。data 值显示为映射上的标记。data 值可以充当协调或地址。

指标

此组件用来以指标的形式显示数据集中的数据。您可以使用 PreviewhtmlJavascript 选项卡编辑您的数据。

此组件用来以表的形式显示数据集中的数据。如果需要,您可以隐藏或显示列。

Filter

此组件允许您过滤数据集中的数据。

时间序列图表

此组件用来以时间序列形式显示数据集中的数据。

56.4.4. 组件属性

页面中使用的组件关联有不同的属性。Properties 面板允许您通过编辑以下属性来自定义组件:

  • 面板 属性 :用于自定义组件面板属性,如 WidthHeightBackground Color
  • C itit 属性:用于自定义组件敏感度属性,如 TopBottomLeft右边
  • padding 属性:用于自定义组件 padding 属性,如 TopBottomLeft右边

56.4.5. 将组件放在页面编辑器中,以创建页面

要创建页面,您必须将组件拖到 Pages 视角的 Editor canvas 中。在将所有必需的组件放在页面中后,单击 Save

56.4.6. 使用 Preview 选项卡预览页面

在创建或编辑页面时,点 Page Editor 中的 Preview 选项卡来预览页面,然后再保存页面。

56.4.7. 在页面中添加时间序列 chart 组件

您可以使用时间序列 Chart 组件来表示任何时间序列数据。您可以创建自己的仪表板,这些仪表板可以连接到您的时间序列数据集。

您可以将时间序列组件导出到 Dashbuilder Runtime,并从 KIE 服务器或任何 Prometheus 数据集检索信息。您还可以使用时间序列 chart 组件创建、编辑和构建仪表板。

先决条件

  • KIE 服务器部署并连接到 Business Central。

流程

  1. 使用以下步骤创建新的 KIE Server 数据集:

    1. 在 Business Central 中,前往 Admin Data Sets

      Data Set Explorer 页面将打开。

    2. New Data Set,根据您的要求选择任何供应商类型。

      Data Set Creation Wizard 页面将打开。

    3. 在您选择的供应商类型的 Data Set Creation 向导中输入所需详情,然后点 Test
    4. 点击 Save
  2. 在 Business Central 中,进入 Menu Design Pages
  3. Pages 面板中,单击 New
  4. 点击 OK
  5. New Page 对话框中,在 Name 字段中输入名称,然后选择所需的样式。

    新页面将在 Page Editor 中打开。

  6. Components 面板中,展开 Reporting 组件,并将时间序列图 拖到 Page Editor 中。
  7. Displayer 编辑器 向导中,点 Data 选项卡并选择您创建的数据集。
  8. Data 选项卡中,根据您的要求从 Columns 字段中选择值。
  9. Display 选项卡,并根据需要编辑 Chart、CariginsFilterRefreshColumns 的值。
  10. Component Editor 选项卡,将以下组件属性更新为 Component Properties 字段:

    表 56.4. 时间序列组件属性
    组件属性描述

    Transpose dataset

    定义提供的数据集使用时间序列作为单独的列或行。

    显示区域

    选中复选框,将类型设置为行图表或区域图表。

    日期类别

    从下拉列表中选择 categorydatetime 或 number 选项。

    标签

    选中复选框以在数据点上启用或禁用数据标签。

    缩放类型

    从下拉列表中选择 xyxy 选项。

    启用缩放

    选中在 axis chart 中启用缩放的复选框。默认情况下会选中复选框。

    缩放自动扩展 Y axis

    选中根据可见区域重新缩放高和低的复选框。

    工具栏自动选择

    从下拉列表中选择 缩放选择pan 选项。

    title 文本

    编辑时间序列 chart 组件的标题。

    title align

    从下拉列表中选择 左下中心 选项,以更改标题对齐。

    显示工具栏

    它是在图右上角启用或禁用工具栏的复选框。默认情况下会选中此复选框。如果启用了此组件属性,您可以使用 缩放 in、zoom out、选择缩放和时间序列图表组件的 panning 功能。

    Chart 名称

    根据您的要求设置 chart 名称。默认情况下,chart 名称被设置为 Newchart

  11. 可选:点图表右上角的 sandwich 菜单图标下载 CSV、PNG 或 SVG 格式设置的数据。
  12. 点击 OK

    图 56.2. 时间序列组件示例

    时间序列组件
Red Hat logoGithubRedditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务,以及可以信赖的内容,帮助红帽用户创新并实现他们的目标。

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情,请参阅红帽博客.

關於紅帽

我们提供强化的解决方案,使企业能够更轻松地跨平台和环境(从核心数据中心到网络边缘)工作。

© 2024 Red Hat, Inc.