55.4. 组件
页面包含不同类型的组件。您可以使用组件面板在页面中使用以下 组件类型 :
- 核心组件
- 导航组件
- 报告组件
- heatmap 组件
55.4.1. 核心组件 复制链接链接已复制到粘贴板!
您可以使用 Core 组件指定自定义 HTML 信息或显示现有页面。核心组件有三种类型:
核心组件不是必须的。
核心组件子类型 | 描述 |
---|---|
HTML | 此组件将打开 HTML 编辑器小部件,用于使用文本、镜像、表、链接和颜色创建 HTML 页面。如果需要,您还可以自定义 HTML 页面。 |
页面 | 此组件可让您将之前创建的 HTML 页面添加到新仪表板中。您可以使用此组件嵌套您在仪表板中创建的自定义页面。 |
徽标 | 此组件允许您在页面中添加镜像。要在页面上添加镜像,您可以为镜像提供 URL,并根据要求设置镜像的宽度和高度。默认镜像是 Dashbuilder 的徽标。Logo URL 字段是必需的。 |
55.4.3. 报告组件 复制链接链接已复制到粘贴板!
Reporting 组件用于以图形、表、映射的形式显示来自数据集的数据。报告组件有 eleven 类型。有关数据集的更多信息,请参阅 数据集编写 部分。
您可以使用 New Displayer 小部件配置报告组件,其中包含以下标签页:
- 键入 :使您能够选择如何以图形方式显示自定义数据。
- Data :使您能够从 Settings 菜单中提供的 Data Sets 部分中创建的自定义数据集列表中选择数据集。
- 显示 :使您能够通过添加标题、更改颜色、大小来选择和自定义内容的显示方式。
对于 时间序列 Chart 组件,新建显示器 小部件包含 Data、Dis 显示 和组件 编辑器 选项卡。
报告组件子类型 | 描述 |
---|---|
bar | 此组件用于以条形图表的形式显示来自数据集的数据。 |
pie | 此组件用于以 pie chart 表单的形式显示来自数据集的数据。在 pie 图表中,每个片段的发生长度与代表的数量成比例。 |
行 | 此组件用于显示数据集中的数据,作为在两个 axes 中直接行片段连接的一系列数据点。 |
区域 | 此组件结合了行图表和条形图来显示数据集中的数据。 |
bubble | 此组件在两维图表中显示多个圆圈(bubbles)。它是分散图表的一般形式,用 bubbles 替换点。 |
meter | 此组件用于以量表的形式显示来自数据集的数据。 |
Map | 此组件可让您使用不同层在上下文(通常是地理)中定位您的数据。数据值在映射中显示为标记。数据值可以充当协调或地址。 |
指标 | 此组件用于以指标的形式显示来自数据集的数据。您可以使用 预览、HTML 或 Javascript 选项卡编辑数据。 |
表 | 此组件用于以表的形式显示来自数据集的数据。如果需要,您可以隐藏或显示列。 |
Filter | 此组件允许您过滤数据集中的数据。 |
时间序列图 | 此组件用于以时间序列格式显示来自数据集的数据。 |
55.4.4. 组件属性 复制链接链接已复制到粘贴板!
页面中使用的组件会关联不同的属性。Properties 面板允许您通过编辑以下属性来自定义组件:
- 面板 属性:用于自定义组件面板属性,如 Width、Height 和 Background Color。
- margin 属性:用于自定义组件边缘属性,如 Top、Bottom、Left 和 Right。
- padding 属性:用于自定义组件 padding 属性,如 Top、Bottom、Left 和 Right。
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。
流程
使用以下步骤创建一个新的 KIE 服务器数据集:
在 Business Central 中,前往 Admin
Data Sets。 Data Set Explorer 页面将打开。
单击 New Data Set,并根据您的要求选择任何提供程序类型。
Data Set Creation Wizard 页面将打开。
- 在所选提供程序类型的 Data Set Creation Wizard 中输入所需的详情,然后点 Test。
- 点击 Save。
-
在 Business Central 中,前往 Menu
Design Pages。 - 在 Pages 面板中,单击 New。
- 点击 OK。
在 New Page 对话框中,在 Name 字段中输入名称,然后选择所需的样式。
新页面将在 Page Editor 中打开。
- 在 组件 面板中,展开 Reporting 组件,并将 时间序列数据库图 拖到 页面编辑器。
- 在 Displayer 编辑器 向导中,点 Data 选项卡并选择您创建的数据集。
- 在 Data 选项卡中,根据您的要求选择 Columns 字段中的值。
- 单击 Display 选项卡,再根据需要编辑 Chart、Margins、Filter、Refresh 和 Columns 的值。
点 Component Editor 选项卡,在 Component Properties 字段中更新以下组件属性:
Expand 表 55.4. 时间序列组件属性 组件属性 描述 Transpose 数据集
定义提供的数据集使用时间序列作为单独的列或行。
显示区域
选中该复选框,将类型设置为行图表或区域图表。
日期类别
从下拉列表中选择 类别、datetime 或 数字 选项。
标签
选中在数据点上启用或禁用数据标签的复选框。
zoom 类型
从下拉列表中选择 x、y 或 xy 选项。
启用 zoom
选中在 axis chart 中启用缩放的复选框。默认情况下,选中复选框。
zoom autoscale Y axis
选中根据可见区域重新扩展高和低的复选框。
工具栏自动选择
从下拉列表中选择、选择 或 pan 选项。
标题文本
编辑时间序列 chart 组件的标题。
标题对齐
从下拉列表中选择 左、center 或 right 选项,以更改标题对齐。
显示工具栏
它是启用或禁用图表右上角的工具栏复选框。默认情况下,选中此复选框。如果启用了此组件属性,您可以使用 zoom in、缩放、选择缩放以及时间序列图组件的 panning 功能。
Chart 名称
根据您的要求设置 chart 名称。默认情况下,图表名称被设置为 Newchart。
- 可选:点击 chart 右上角的 sandwich 菜单图标,以下载 CSV、PNG 或 SVG 格式设置的数据。
点击 OK。
图 55.2. 时间序列组件示例