55.4. 组件


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

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

55.4.1. 核心组件

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

注意

核心组件不是必须的。

Expand
表 55.1. 核心组件子类型
核心组件子类型描述

HTML

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

页面

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

徽标

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

55.4.2. 导航组件

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

Expand
表 55.2. 导航组件子类型
导航组件子类型描述

target Div

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

菜单栏

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

标题导航器

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

tree

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

Carousel

此组件以 carousel 或一个滑块显示表单显示选定的页面。

标签页列表

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

注意

非目标 div 组件(如 carousel 或 tile navigator)不需要 Target Div 设置。

55.4.3. 报告组件

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

您可以使用 New Displayer 小部件配置报告组件,其中包含以下标签页:

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

对于 时间序列 Chart 组件,新建显示器 小部件包含 DataDis 显示 和组件 编辑器 选项卡。

Expand
表 55.3. 报告组件子类型
报告组件子类型描述

bar

此组件用于以条形图表的形式显示来自数据集的数据。

pie

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

此组件用于显示数据集中的数据,作为在两个 axes 中直接行片段连接的一系列数据点。

区域

此组件结合了行图表和条形图来显示数据集中的数据。

bubble

此组件在两维图表中显示多个圆圈(bubbles)。它是分散图表的一般形式,用 bubbles 替换点。

meter

此组件用于以量表的形式显示来自数据集的数据。

Map

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

指标

此组件用于以指标的形式显示来自数据集的数据。您可以使用 预览HTMLJavascript 选项卡编辑数据。

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

Filter

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

时间序列图

此组件用于以时间序列格式显示来自数据集的数据。

55.4.4. 组件属性

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

  • 面板 属性:用于自定义组件面板属性,如 WidthHeightBackground Color
  • margin 属性:用于自定义组件边缘属性,如 TopBottomLeftRight
  • padding 属性:用于自定义组件 padding 属性,如 TopBottomLeftRight

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

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

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

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

55.4.7. 在页面中添加时间序列 Chart 组件

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

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

先决条件

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

流程

  1. 使用以下步骤创建一个新的 KIE 服务器数据集:

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

      Data Set Explorer 页面将打开。

    2. 单击 New Data Set,并根据您的要求选择任何提供程序类型。

      Data Set Creation Wizard 页面将打开。

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

    新页面将在 Page Editor 中打开。

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

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

    Transpose 数据集

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

    显示区域

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

    日期类别

    从下拉列表中选择 类别datetime数字 选项。

    标签

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

    zoom 类型

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

    启用 zoom

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

    zoom autoscale Y axis

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

    工具栏自动选择

    从下拉列表中选择、选择pan 选项。

    标题文本

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

    标题对齐

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

    显示工具栏

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

    Chart 名称

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

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

    图 55.2. 时间序列组件示例

返回顶部
Red Hat logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

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

让开源更具包容性

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

關於紅帽

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

Theme

© 2025 Red Hat