第1章 背景

在SaCa DataViz中,用户可以通过网页资源把已存在的网页嵌入到图册中,但是作为一个外部页面,无法与图册内部的图表进行联动和交互。本文主要介绍外部页面如何实现与图册内图表的联动交互。

第2章 联动

2.1 实现原理

作为筛选器的图表,在触发联动时,其实是自动生成了一个过滤条件,并且把此条件加入到图册的全局条件中,然后调用图表刷新事件,由于条件的变化所以其他图表刷新后的数据也随之产生变化 。

因此,如果要实现页面与图册中图表的联动交互,在页面中需要实现两个功能:发送联动条件和接受联动条件。

在这里我们使用window.postMessage(message, targetOrigin)方法来发送联动条件。使用window.addEventListener("message", funtion(e){//TODO}, false)方法接收联动条件。

2.2 发送联动条件

联动条件主要内容如下:

var data = {
    action: "confirm",//联动分为两种状态:联动和取消联动,分别用confirm和cancel表示
    condition: {//联动条件主体信息
        id: "123123",//条件的唯一标识,建议用Math.uuid(), id的值在页面加载完后不能改变
        field: "地区",//联动参数名称,要与目标图表的数据集中的字段同名,否则无法生效
        matchValue: "西南",//参数值
        timeKey: ""//当联动字段类型为文本时,值为空;当联动字段为日期时间字段时,需要指定参数值的内容格式,值如下:
        Y:年,参数值表示年份,如2010
    Q:季度,参数值表示季度,如4
    M:月,参数值表示第几个月,如12
    W:周,参数值表示第几周,如53
    D:日,参数值表示第几天,如365
        Y-Q:年-季度,参数值表示年份和季度,如2010-4
    Y-M:年-月,参数值表示年份和季度,如2010-12
        Y-W:年-周,参数值表示年份和周,如2010-52
Y-M-D:年-月-日,参数表示年月日,如2010-12-11    
    }
};

发送联动条件可以使用如下代码:

window.parent.postMessage(data, '*');
想要发送的联动条件生效还需修改config.js中的配置,需要把looseCondition的值设置为true。

2.3 接收联动条件

接收联动条件可以使用如下代码:

window.addEventListener('message', acceptMessage, false);

function acceptMessage(e){
    var conditions = e.data;
    //TODO
}

当图册全局的过滤条件产生变化时,会触发图表内部的刷新事件,这时就会触发acceptMessage回调方法。可以通过e.data获取过滤条件数组。

联动条件是图册全局条件的一种,所以接收条件时也会接收到图册的全局条件,可以根据实际情况,选择需要的条件进行处理。

2.3.1 条件属性介绍

过滤条件一共分为3大类:字符过滤条件、数值过滤条件和日期时间过滤条件。

字符过滤条件

字符类型的过滤条件分为常规模式和通配符模式两种;联动条件属于常规模式的过滤条件。

1) 常规模式:

var condition={
    id:"qwe123",
    role:"string",
    isTemp: false,
    field: "地区",
    type:"routine",
    values:[],
    timeKey: "",
    selectAll:true,
    others:1
};

./interacting_external_webpage_in_story/1

属性解读:

id:条件唯一标识。

role:条件类型,string表示该条件属于字符类型。

isTemp:是否为联动条件。

field:参数名称,与数据集中的字段名称对应 。

type:模式信息,routine表示为常规模式。

values:过滤内容,数组,字段实际值的子集。

selectAll:是否选择全部。

timeKey:联动条件, 并且字段为日期时间字段时,需要指定参数值的内容格式,值如下:

Y:年,参数值表示年份,如2010

Q:季度,参数值表示季度,如4

M:月,参数值表示第几个月,如12

W:周,参数值表示第几周,如53

D:日,参数值表示第几天,如365

Y-Q:年-季度,参数值表示年份和季度,如2010-4

Y-M:年-月,参数值表示年份和季度,如2010-12

Y-W:年-周,参数值表示年份和周,如2010-52

Y-M-D:年-月-日,参数表示年月日,如2010-12-11

others:是否为排除,1:排除,0不排除。

./interacting_external_webpage_in_story/2

./interacting_external_webpage_in_story/3

2) 通配符模式:

var condition={
    id:"qwe123",
    role:"string",
    field: "地区",
    type:"wildcard",
    value:"华北",
    matchType:"equals",
    others:1
};

属性解读:

id:条件唯一标识。

role:条件类型,string表示该条件属于字符类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,wildcard表示为通配符模式。

value:过滤匹配值,根据实际设置的匹配值不同而变化。

matchType:匹配方式。可选值:contains、startWith、endWith、equals和isEmpty。当匹配方式为isEmpty时,value不起作用。

others:是否为排除,1:排除,0不排除。

  • 日期时间过滤条件

    时间类型的过滤条件分为相对时间、时间范围、开始时间、结束时间和特殊值五种模式。

    1) 相对时间

var condition = {
    id: "qwe123",
    role: "datetime",
    field: "订单日期",
    type: "relativeTime",
    relativeUnit:"day",
    relativeValue: 1
};

./interacting_external_webpage_in_story/4

属性解读: id:条件唯一标识。

role:条件类型,datetime表示该条件属于时间类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,relativeTime表示为相对时间模式。

relativeUnit:相对时间单位。可选值为:year, quarter, month, week, day, hour, minute, second。

relativeValue:相对时间,整数,为正数时表示后XX时间单位,为0时表示为当前时间单位,为负数时表示前XX时间单位。

2) 时间范围

var condition = {
    id: "qwe123",
    role: "datetime",
    field: "订单日期",
    type: "rangeTime",
    start:"2010-10-12",
    end: "2010-11-23"
};

./interacting_external_webpage_in_story/5

属性解读:

id:条件唯一标识。

role:条件类型,datetime表示该条件属于时间类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,rangeTime表示为时间范围模式。

start:开始时间,不能大于结束时间。时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。

end:结束时间,不能小于开始时间,时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。

3) 开始时间

var condition = {
    id: "qwe123",
    role: "datetime",
    field: "订单日期",
    type: "startTime",
    start:"2010-10-12",
};

./interacting_external_webpage_in_story/6

属性解读:

id:条件唯一标识。

role:条件类型,datetime表示该条件属于时间类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,startTime表示为开始时间模式。

start:开始时间,时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。

4) 结束时间

var condition = {
    id: "qwe123",
    role: "datetime",
    field: "订单日期",
    type: "endTime",
    end:"2010-10-12",
};

./interacting_external_webpage_in_story/7

属性解读:

id:条件唯一标识。

role:条件类型,datetime表示该条件属于时间类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,endTime表示为结束时间模式。

end:结束时间,时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。

5) 特殊值

var condition = {
    id: "qwe123",
    role: "datetime",
    field: "订单日期",
    type: "specialTime",
    specialValue:"isNull"
};

./interacting_external_webpage_in_story/8

属性解读:

id:条件唯一标识

role:条件类型,datetime表示该条件属于时间类型

field:参数名称,与数据集中的字段名称对应。

type:模式信息,specialTime表示为特殊值模式。

specialValue:特殊值,可选值:isNull、isNotNull和all。

数值过滤条件

数值类型分为双向、至多、至少和特殊值四中模式。

1) 双向

var condition = {
    id: "qwe123",
    role: "number",
    field: "订单数量",
    type: "twoWay",
    min: 1,
    max: 100,
    includeMin: 1,
    includeMax: 1,
    aggregateFilter: 1,
    aggregation: "sum"
};

./interacting_external_webpage_in_story/9

属性解读:

id:条件唯一标识。

role:条件类型,number表示该条件属于数值类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,twoWay表示为双向模式。

min:最小值。

max:最大值。

includeMin:是否包含最小值,1:包含,0:不包含。

includeMax:是否包含最大值,1:包含,0:不包含。

aggregateFilter:是否聚合前过滤,1:是,0:否。

aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

2) 至多

var condition = {
    id: "qwe123",
    role: "number",
    field: "订单数量",
    type: "atMost",
    max: 100,
    includeMax: 1,
    aggregateFilter: 1,
    aggregation: "sum"
};

./interacting_external_webpage_in_story/10

属性解读:

id:条件唯一标识。

role:条件类型,number表示该条件属于数值类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,atMost表示为至多模式。

max:最大值。

includeMax:是否包含最大值,1:包含,0:不包含。

aggregateFilter:是否聚合前过滤,1:是,0:否。

aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

3) 至少

var condition = {
    id: "qwe123",
    role: "number",
    field: "订单数量",
    type: "atLeast",
    min: 1,
    includeMin: 1, 
    aggregateFilter: 1,
    aggregation: "sum"
};

./interacting_external_webpage_in_story/11

属性解读:

id:条件唯一标识。

role:条件类型,number表示该条件属于数值类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,atLeast表示为至少模式。

min:最小值。

includeMin:是否包含最小值,1:包含,0:不包含。

aggregateFilter:是否聚合前过滤,1:是,0:否。

aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

4) 特殊值

var condition = {
    id: "qwe123",
    role: "number",
    field: "订单数量",
    type: "special",
    specialValue:"isNull",
    aggregateFilter: 1,
    aggregation: "sum"
};

./interacting_external_webpage_in_story/12

属性解读:

id:条件唯一标识。

role:条件类型,number表示该条件属于数值类型。

field:参数名称,与数据集中的字段名称对应。

type:模式信息,special表示为特殊值模式。

specialValue:特殊值,可选值:isNull、isNotNull和all。

aggregateFilter:是否聚合前过滤,1:是,0:否。

aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

2.3.2 监听销毁

在页面销毁时要移除监听,可使用如下代码:

window.removeEventListener("message", acceptMessage, false);

results matching ""

    No results matching ""