页面数据集

操作场景

通过页面数据集，实现多个组件对接同一个数据输入，减少重复的请求和配置。同时，在新建页面数据集时，还支持配置多数据输入（最多5个），来实现组件同时对接多个数据流。

本章节以将两个静态数据集（多数据流1、多数据流2）中的数据汇合后，作为组件的数据来源为例，向您介绍如何创建并使用页面数据集。

前提条件

已参考静态数据中操作，创建静态数据类型的数据集。

图1 多数据流1

图2 多数据流2

创建页面数据集

1. 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
2. 在编辑页面状态下，选择“数据”，单击。
3. 输入页面数据集的名称，单击“确定”。
   图3 新建页面数据集
   
   • 页面数据集名称：数据集名称长度为1~60个字符，可包括中文、字母、数字和下划线。
   • 描述：新建数据集的附件描述信息，通常设置为数据集的功能或使用场景，长度为0~512个字符。
   • 刷新周期：每隔多少秒从数据集中读取一次数据，默认配置为“0”，表示只获取一次。

4. 从数据输入中拖拽数据输入节点到右侧画布中，数据集选择已创建的“多数据流1”。
   图4 添加一个数据输入节点
   
   图5 添加多数据流1后效果
   

5. 再从数据输入中，拖拽一个数据输入节点到右侧画布中，数据集选择已创建的“多数据流2”。
   图6 再添加一个数据输入节点
   

6. 选中转换器，“联合方式”选择“转换器”，并新增一个转换器。
   

   您也可以将“联合方式”设置为“连接”，通过连接实现数据的汇总，如图8。

   • 左连接：返回左表中的所有行，如果左表中的行在右表中没有匹配的行，则结果中右表中的列返回“null”。
   • 右连接：与左连接相反，返回右表中的所有行，如果右表中的行在左表中没有匹配的行，则结果中左表中的列返回“null”。
   • 内连接：取两个表的交集，两张表都有的才能显示出来。
   • 全连接：返回左表和右表中的所有行。如果某行在另一表中没有匹配的行，则另一表中的列返回“null”。
   图7 新建汇合转换器
   
   图8 通过左连接实现数据汇总
   
   • 转换器：新建转换器的名称，本示例中设置为“汇合”。
   • 目录：选择转换器的存放目录，本示例选择预置分类。
   • 转换器内容：按需进行设置，本示例转换器内容如下，即将“多数据流1”和“多数据流2”中的数据进行汇总。

     const [a, b] = dataset;
     return a.map((item) => ({
         ...item,
         ...b.find((i => i["学号"] === item["学号"])),
     }))

7. 转换器保存成功后，单击页面右上角的“保存”，返回设计界面。
   在页面数据集页签中，可查看到已创建的数据集。

   图9 查看页面数据集
   

使用页面数据集

1. 在开发页面，从“组件 > 图表”中，拖拽基本柱图组件到画布中。
   图10 拖拽基本柱图到画布中
   

2. 选中组件，单击组件上方的，进入数据源设置页面。
3. “数据类型”选择“页面数据集”，选择创建页面数据集中创建的数据集。
   图11 选择页面数据集
   

4. 在组件预览中，拖拽表格中的字段到配置中，即可预览效果。
   图12 预览效果