Logo
    立即注册
    数说方舟
    本页目录
    产品文档
    页面交互与数据集元数据
    最近更新时间:2022-08-16 10:23:44
    本页目录

    上一章我们的小练习中,你已经尝试通过一个数据集接口地址,从客户端通过http发起数据集请求,并在Response中得到了一份JSON格式的数据。

    Response中的JSON总是满足这样的格式:

    Response
    ├── code
    ├── data
    │   ├── meta
    │   │   ├── datasetType
    │   │   ├── parameters
    │   │   ├── dimensions
    │   │   ├── measures
    │   │   └── fieldsInfo
    │   └── dataset
    ├── message
    └── success

    其中,code、message和success用来表示接口服务的运行状态,我们本章主要关注data部分。

    data包含了dataset和meta两部分。其中dataset就是数据集,我们在上一章中已经讨论过它们的类型和结构,通过dataset中的数据,前端组件可以呈现内容。meta部分是对数据集的描述,通过meta信息,方舟支持用户在UI中对组件做动态的交互操作。比如说组件之间的相互联动。

    组件联动

    下图页面三个组件分别为

    图表 图表类型 数据集类型
    性别比例 饼状图 aggregation
    爱好分布 柱状图 aggregation
    会员明细 表格 list

    我们已经知道如何用不同类型的数据集去填充这样三个图表了。但是如何自动化地实现图表组件之间的联动关系呢?

    下图中组件联动关系如红色箭头所示,当用户点击饼状图“性别比例”的某一种性别的时候,“爱好分布”和“会员明细”组件也会对应地呈现此种性别条件下对应的信息。而用户点击柱状图“爱好分布”的某一个种爱好,会员明细也会受其影响,并呈现有此种爱好的会员的明细。

    1.页面联动示例

    方舟的联动依赖的是数据服务接口的重新请求,所以接口需要同时返回数据集和其描述信息。

    比如说,如何定义点击饼状图的时候,发出的参数是性别而点击柱状图时发出的参数是爱好? 如何控制柱状图的爱好参数可以发送给会员明细表格,而饼状图却无法接收?

    方舟通过如下的信息,定义上述联动规则。

    图表 图表类型 数据集类型 维度 指标 过滤参数
    性别比例 饼状图 aggregation 性别 会员ID(计数)
    爱好分布 柱状图 aggregation 爱好 会员ID(计数) 性别
    会员明细 表格 list 性别、爱好

    得到维度、指标、过滤参数信息后,方舟可以自动建立联动关系。当用户点击事件组件的时候,会产生联动变量,联动变量发送给影响组件使得影响组件重新请求,以实现联动效果。所以联动关系如下表所示:

    事件组件 联动变量 影响组件
    性别比例 性别 爱好分布、会员明细
    爱好分布 爱好 会员明细

    那么维度、指标、过滤参数信息,就是接口返回的meta的主要内容

    此外,我们还注意到meta中还有一些其他信息,如datasetType和fieldsInfo,这些参数的作用如下

    meta参数 说明 是否必须 作用
    datasetType 数据格式 数据集格式类型,明确了前端组件如何使用当前数据集
    version 接口版本 当前版本是2,该参数非常重要,用于确保前端按当前文档描述的规则来解析meta
    dimensions 维度 用于定义图表在联动时可以向外发送的变量,在list数据集中还可用于描述数据集表头,以便排序
    measures 指标 图表的指标运算方式,只在aggregation图表生效,用于前端自动计算统计值
    parameters 过滤参数 用于定义图表在联动时可以接受的联动变量
    datasourceId 数据源ID 用于协助前端更有信心地匹配联动关系 (避免受到字段重名的影响)
    fieldsInfo 字段类型 维度、指标、过滤参数中所需字段在数据源底层存储的类型和字段别名映射关系,用于确定传参格式查找别名

    上表列出了meta中各个参数在方舟UI中的作用,但是由于不同的datasetType有不同的特征,所以在不同的datasetType中,dimensions和measures也有不同的定义规则,具体可以在后文的不同类型的数据集文档中查看。

    微信扫描二维码在线咨询