55.4. 组件
页面包含不同类型的组件。您可以使用组件面板在页面中使用以下组件 类型 ：
- 核心组件
- 导航组件
- 报告组件
- Heatmap 组件
55.4.1. 核心组件
您可以使用核心组件 指定自定义 HTML 信息或显示现有的页面。核心组件有三种类型：
核心组件不是必须的。
| 核心组件子类型 | 描述 |
|---|---|
| HTML | 此组件会打开 HTML 编辑器小部件，用于使用文本、镜像、表、链接和颜色创建 HTML 页面。如果需要，您还可以自定义 HTML 页面。 |
| 页面 | 此组件允许您将之前创建的 HTML 页面添加到新仪表板中。您可以使用此组件嵌套您在仪表板中创建的自定义页面。 |
| 徽标 | 此组件允许您在页面中添加镜像。要在页面上添加镜像，您可以提供一个镜像的 URL，并根据要求设置镜像的宽度和高度。默认镜像是 Dashbuilder 的徽标。Logo URL 字段是必需的。 |
55.4.3. 报告组件
Reporting 组件用于显示数据收集的数据，格式为图形、表、映射。报告组件有十大类型。有关数据集的更多信息，请参阅 数据集编写 部分。
您可以使用 New Displayer 小部件配置报告组件，其中包含以下标签页：
- 键入 ：允许您选择如何以图形方式显示自定义数据。
- Data ：使您能够从 Settings 菜单中提供的 Data Sets 部分中从您创建的自定义数据集列表中选择数据集。
- 显示 ：使您能够选择和自定义如何通过添加标题、更改颜色、大小自定义内容显示方式。
对于 Time Series Chart 组件，New Displayer widget 包含 Data、Display 和 Component Editor 选项卡。
| 报告组件子类型 | 描述 |
|---|---|
| bar | 此组件用于以条图表格式显示数据集的数据。 |
| pie | 此组件用于显示数据收集的数据，格式为 pie Chart。在饼图中，每个片段的rc 长度与代表的数量成比例。 |
| 行 | 此组件用于将数据收集数据显示为由两个 axes 上直接线片段连接的一系列数据点。 |
| 区域 | 此组件包含一行 chart 和条图表，用于显示数据收集的数据。 |
| bubble | 此组件在双维图表中显示多个圆圈（兆字节）。它是 scatter 图表的规范化，它用 bubbles 替换点。 |
| meter | 此组件用于以计量格式显示数据集的数据。 |
| map | 此组件可让您在上下文（通常是地理）中定位数据，使用不同的层。数据值以映射上的标记的形式显示。数据值可以充当协调或地址。 |
| 指标 | 此组件用于以指标格式显示数据集的数据。您可以使用 Preview、HTML 或 Javascript 选项卡来编辑数据。 |
| 表 | 此组件用于以表格格式显示数据集的数据。如果需要，您可以隐藏或显示列。 |
| Filter | 此组件允许您过滤数据收集的数据。 |
| 时间序列数据库图 | 此组件用于以时间序列格式显示数据集的数据。 |
55.4.4. 组件属性
页面中使用的组件关联有不同的属性。Properties 面板允许您编辑以下属性来自定义组件：
- 面板 属性：用于自定义组件面板属性，如 Width、Height 和 Background Color。
- 边缘属性：用于自定义组件边缘属性，如 top、Bottom、Left 和 right。
- padding 属性：用于自定义组件 padding 属性，如 Top、Bottom、Left 和 right。
55.4.5. 将组件放在页面编辑器上以创建页面
要创建页面，您必须将组件拖到 Pages 视角的 Editor 可以撤离。将所有必需的组件放在页面后，点 Save。
55.4.6. 使用 Preview 选项卡预览页面
在创建或编辑页面时，点 Page Editor 上的 Preview 选项卡来预览页面，然后再保存该页面。
55.4.7. 在页面中添加时间序列 chart 组件
您可以使用 Time Series Chart 组件来代表任何时间序列数据。您可以创建自己的仪表板，以连接到您的时间序列数据集。
您可以导出时间序列组件到 Dashbuilder Runtime，并从 KIE 服务器或任何 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。 - 在 页面 面板中，单击新建。
- 点击 确定。
在 New Page 对话框中，在 Name 字段中输入名称并选择所需风格。
新的页面会在页面 编辑器 中打开。
- 在 组件 面板中，展开 Reporting 组件，并将 Time Series Chart 拖到 页面编辑器中。
- 在 Displayer 编辑器 向导中，点 Data 选项卡并选择您创建的数据集。
- 在 Data 选项卡中，根据要求选择 Columns 字段中的值。
- 单击 Display 选项卡，再根据需要编辑 Chart、Martgins、Filter、刷新 和 Columns 的值。
点 Component Editor 选项卡，将以下组件属性更新到 Component Properties 字段中：
表 55.4. 时间序列组件属性 组件属性 描述 Transpose dataset
定义提供的数据集将时间序列用作单独的列或行。
显示区域
选择将类型设置为行 chart 或一个区域图表的复选框。
日期类别
从下拉列表中选择 类别、日期时间 或数字选项。
标签
选择在数据点上启用或禁用数据标签的复选框。
zoom 类型
从下拉列表中选择 x、y 或 xy 选项。
启用 zoom
选择在 xis chart 中启用缩放的复选框。默认情况下选中该复选框。
zoom autoscale Y axis
选择根据可见区域重新缩放高和低的复选框。
自动选择工具栏
从下拉列表中选择 zoom、os 或 pan 选项。
标题文本
编辑时间序列 chart 组件的标题。
标题对齐
从下拉列表中选择 左侧、中心 或 右 选项，以更改标题对齐。
显示工具栏
它是在图表右上角启用或禁用工具栏的复选框。默认情况下选中此复选框。如果启用了这个组件属性，您可以使用 zoom in、zoom out、osoom 和 panning 功能。
Chart 名称
根据您的要求设置 chart 名称。默认情况下，图表名称设置为 Newchart。
- 可选：点击图表右上角的 sandwich 菜单图标，以下载 CSV、PNG 或 SVG 格式的数据集。
点击 确定。
图 55.2. 时间序列组件示例
