5.4 过滤条件

SaCa DataViz支持对图表和图册的数据添加过滤条件,起到筛选有效数据、过滤脏数据的作用。 本章节首先介绍过滤条件的使用方法,之后讲解时间、数值和字符三种过滤条件概念以及使用方法,最后讲解一些高级应用例如在第三方平台嵌套集成SaCa DataViz产品时,如何通过URL传参的方式过滤图册或图表中的数据内容。

5.4.1 过滤条件的使用方法

5.4.1.1 在图表中使用过滤条件

以字符型过滤条件做例子,图表当前有XX省份的数据,通过过滤仅保留上海北京两地的数据,步骤如下:
(1)拖拽“省份”字段到过滤栏位中,弹出对话框(如图2-1);
(2)在对话框中勾选“北京”、“上海”两个字段后,点击确定(如图2-2);
(3)地图上仅剩“北京”、“上海”两地的数据(如图2-3);

./filter/1

图2-1

./filter/1
图2-2

./filter/1
图2-3

5.4.1.2 在图册中使用过滤条件

在图册中的过滤条件有两种展现方式,在功能上完全相同,可以根据项目的需求选择或搭配使用:
(1)将所有筛选栏布置到图册页的最上方,并通过按钮控制展开和收起,点击“确认”按钮使过滤条件生效,点击“重置”按钮可以初始化过滤条件;
(2)在图册页的页面中自由摆放过滤条件,此方式需要拖拽“确定”和“重置”按钮到页面中,点击“确认”按钮使过滤条件生效,点击“重置”按钮可以初始化过滤条件;

5.4.1.2.1 采用上方布局的步骤

(1)在图册编辑页面,展开左侧“数据”栏,将其中字段拖拽到过滤栏位中(如图2-4所示);
(2)在图册播放界面,展开图册顶部的过滤栏位,可以进行过滤操作(如图2-5所示);

./filter/1

图2-4

./filter/1
图2-5

5.4.1.2.2 采用自由布局的步骤

(1)在图册编辑页面,展开左侧“数据”栏,将其中字段拖拽到过滤栏位中(如图2-4所示);
(2)将过滤栏位中的条件,拖拽到已经做好的 “空白块” 或 “自由块” 中(如图2-6所示);
(3)将资源栏中的“按钮”拖拽到已经做好的“空白块”或“自由块”中(如图2-7所示),并右侧内容设置中指定按钮的功能;

./filter/1

图2-6

./filter/1
图2-7

5.4.1.3 在图册和图表中使用过滤条件的区别

既然SaCa DataViz同时支持在图表和图册中使用过滤条件,那么这两种方式有什么区别?在不同的情形下如何选择呢? 在图表中设置的过滤条件,将硬性过滤掉所有不满足条件的数据,过滤掉的数据将永远显示不出来,一般用于脏数据的处理。 而在图册中设置的过滤条件,会根据条件的变化动态的筛选数据,将新数据重新赋值给图表,并触发图表刷新,一般用于业务的自助式数据分析。

5.4.2 三种过滤条件的概念及使用方法

5.4.2.1 时间型过滤条件

时间型过滤条件针对时间类型的字段,包括“年月日”、“时分秒”以及“年月日时分秒”等等类型,时间类型需要在数据集页面中设置,设置成功后字段前会有日历图标(如图3-1)。时间类型的过滤条件包括“相对时间”、“时间范围”、“开始时间”、“结束时间”、“特殊时间”等5类,下面介绍“相对时间”和“特殊时间”两种比较难的用法。

./filter/1

图3-1

5.4.2.1.1 下拉列表

下拉列表用于快速选择一些常用的相对时间范围,并且在播放时已下拉列表的方式展示,左侧为目前支持的选线, 右侧是播放时下拉列表中显示的项,并且可以在右侧设置条件的默认值。下拉列表的内容支持扩展,详情参考《时间过滤条件下拉列表扩展》

./filter/1

图3-2

5.4.2.1.2 相对时间

相对时间适用于动态的、实时更新的数据(界面如图3-2)。举例说明:在2017-02-04对图表设置了相对时间为当前季度,此时图表查询的数据为2017-01-01至2017-03-31段内的数据。然后在系统时间2019-02-04日播放此图表,图表中查询的数据是2019-01-01至2019-03-31段内的数据。
再比如,在选择前3年至当前后,在2017-02-04日播放图表,图表中查询的是从2014-01-01至2017-02-04段的数据,而在2019-02-04日播放图表,图表中查询的数据是2016-01-01至2019-02-04段内的数据。

./filter/1

图3-3

5.4.2.1.2.1 “前X年”和“前X年至当前”有什么区别?

“前X年”指的是前X年当年,图表中将仅显示那一年的数据。
“前X年至当前”指的是前X年到今天的整个时间段,图表中显示的是这个时间段内的所有数据。

5.4.2.1.2.2 “播放时显示为下拉列表”是什么意思?

正常时间类型的过滤条件,在交互时展现为时间控件的形式(如图3-3)。如果勾选此功能,将展现为下拉列表的形式(如图3-4)。

./filter/3-3

图3-4

./filter/1
图3-5

5.4.2.1.3 特殊时间

特殊时间使用情形较少,适合过滤空数据。 “NULL值”会筛选出空值数据,“非NULL值”会筛选出非空值数据,“所有值”会筛选出所有数据,等同于没有过滤。

./filter/1

图3-6

5.4.2.2 数值型过滤条件

数值型过滤条件针对数值类型的字段(即度量字段,如图3-6)。数值类型的过滤条件包括“双向”、“至多”、“至少”和“特殊值”等4类,这些功能或在前文介绍过或容易理解,就不再赘述,下面着重介绍“聚合前过滤”和“聚合后过滤”(如图3-7),为了更好的说明,将所用数据集截了出来(如图3-8)。

./filter/1

图3-7

./filter/1
图3-8

./filter/1
图3-9

5.4.2.2.1 聚合前过滤

在上图所示的数据集中,有5条“吉林省”的数据,对“订单数量”字段使用“聚合前过滤”(如图3-9),那么在图表中将直接过滤数据集中不满足条件的2条数据(如图3-10),剩下3条数据参与聚合,即在图表中“吉林省”的“订单数量”显示为“16+25+20=61”。

./filter/1

图3-10

./filter/1
图3-11

5.4.2.2.2 聚合后过滤

依旧是上图的数据集在做图表时,“吉林省”的“订单数量”将聚合为“16+25+20+25+30=116”,此时如果对“订单数量”字段使用“聚合后过滤”(如图3-11)并限定最大值为25,选择“求和”方法。此时数据集中的5条数据都会被过滤掉,图表中不会出现“吉林省”关于“订单数量”的信息。

./filter/1

图3-12

5.4.2.3 字符型过滤条件

字符型过滤条件针对文字类型的字段(即维度字段,如图3-12)。字符类型的过滤条件包括“常规”与“通配符”2类,下面介绍“通配符”的使用方法。

./filter/1

图3-13

5.4.2.3.1 通配符的使用方法

在“请输入通配符”栏中,输入“吉林”,并选择“包含”(如图3-13),意思是过滤掉所有不包含“吉林”两个字的数据(效果展示如图3-14所示),选择“排除”功能后,将过滤掉所有包含“吉林”两个字的数据(效果展示如图3-15所示)。

./filter/1

图3-14

./filter/1
图3-15

./filter/1
图3-16

5.4.3 高级设置

展开“高级设置”栏,可以看到一些额外的功能,本章将对这些功能的应用场景和使用方法逐一介绍。

./filter/1

图4-1

5.4.3.1 通过URL传参过滤图表和图册中的数据

在第三方平台嵌套集成SaCa DataViz产品时,可以在第三方平台生成URL参数并拼接到图表或图册的播放链接中,通过这种方式可以实现在SaCa DataViz系统外部动态更换数据内容。

5.4.3.1.1 参数的获取

在用户编辑好需要的过滤条件后(如图4-3所示,选择“北京”、“上海”、“云南省”三个字段),在“高级设置”栏中点击“地址传参”,弹出对话框中有JSON格式的参数(如图4-2所示),就是根据之前交互编辑的过滤条件生成的JSON对象。

./filter/1

图4-2
./filter/1
图4-3

5.4.3.1.2 使用方法及步骤

(1)获取过滤参数并在外层添加方括号构成json数组,数组内可添加多个条件,如下;

[
    {
        "field": {
            "name": "省份",
            "dataSetId": "42f699f0-559e-4864-83a0-d8d966153869",
            "role": "string",
            "type": "STRING"
        },
        "type": "routine",
        "values": [
            "辽宁"
        ],
        "allIn": false,
        "others": 0
    }
]

(2)将参数字符串通过JS原生方法“encodeURIComponent(URIstring)”转码(介绍链接:http://www.w3school.com.cn/jsref/jsref_encodeURIComponent.asp);
(3)转码得到可使用的URL参数字符串,如下;

%5B%7B%22field%22%3A%7B%22name%22%3A%22%E7%9C%81%E4%BB%BD%22%2C%22dataSetId%22%3A%2242f699f0-559e-4864-83a0-d8d966153869%22%2C%22role%22%3A%22string%22%2C%22type%22%3A%22STRING%22%7D%2C%22type%22%3A%22routine%22%2C%22values%22%3A%5B%22%E8%BE%BD%E5%AE%81%22%5D%2C%22allIn%22%3Afalse%2C%22others%22%3A0%7D%5D

(4)将得到的参数字符串拼接到图册和图表的URL中,在浏览器中打开拼接后的URL,即可看到过滤条件生效;

http://localhost:8082/dataviz/src/q.html?b=d78167c9-3d4b-47da-bb91-e646799162e6&conditions=%5B%7B%22field%22%3A%7B%22name%22%3A%22%E7%9C%81%E4%BB%BD%22%2C%22dataSetId%22%3A%2242f699f0-559e-4864-83a0-d8d966153869%22%2C%22role%22%3A%22string%22%2C%22type%22%3A%22STRING%22%7D%2C%22type%22%3A%22routine%22%2C%22values%22%3A%5B%22%E8%BE%BD%E5%AE%81%22%5D%2C%22allIn%22%3Afalse%2C%22others%22%3A0%7D%5D

(5)示例代码
以下代码实现html页面内嵌DataViz图册,外层控件刷新图册条件。

<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <button onclick="updateCondition()">刷新过滤条件</button>
    <script>
        var data = 
        [
            {"field":{"name":"品牌描述","dataSetId":"ca8bbf66-0abd-4fe6-956f-95e6cf127a3a","role":"string","type":"STRING"},"type":"routine","values":["PAW IN PAW","汇总"],"allIn":false,"others":0,"hidden":true}
        ];
        var src="http://localhost:8082/dataviz/src/q.html?b=5d825bfd-dc86-4387-a37b-167efa2e0c87";//图册播放地址
        function updateCondition(){
            document.getElementById("dvbook").src=src + "&conditions=" + encodeURIComponent(JSON.stringify(data));
        };
    </script>
    <iframe id="dvbook" style="width:100%; height:90%;border-width:0px;" src="http://localhost:8082/dataviz/src/q.html?b=5d825bfd-dc86-4387-a37b-167efa2e0c87"></iframe>
</body>
</html>

5.4.3.1.3 参数的规则介绍

不同过滤条件的参数规则并不相同,过滤参数仅支持用户进行内容的修改,不支持用户自定义规则。

5.4.3.1.3.1 字符类型

(1)常规模式:

  field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。  
  type:模式信息,此处表示为常规模式。  
  values:过滤内容,数组,字段实际值的子集。  
  others:是否为排除,1:排除,0不排除。  

(2)通配符模式:

  field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。
  type:模式信息,此处表示为通配符模式。
  value:过滤匹配值,根据实际设置的匹配值不同而变化。
  matchType:匹配方式。可选值:contains、startWith、endWith、equals和isEmpty。当匹配方式为isEmpty时,value不起作用。
  others:是否为排除,1:排除,0不排除。

5.4.3.1.3.2 时间类型

(1)相对时间

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。  
type:模式信息,此处表示为相对时间模式。  
relativeUnit:相对时间单位。  
relativeValue:相对时间,整数,为正数时表示后XX时间单位,为0时表示为当前时间单位,为负数时表示前XX时间单位。  

(2)时间范围

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。  
type:模式信息,此处表示为时间范围模式。  
start:开始时间,不能大于结束时间。时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。  
end:结束时间,不能小于开始时间,时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。  

(3)开始时间

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。  
type:模式信息,此处表示为开始时间模式。  
start:开始时间,时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。  

(4)结束时间

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。  
type:模式信息,此处表示为结束时间模式。  
end:结束时间,时间格式固定为yyyy-MM-dd或yyyy-MM-dd HH:mm:ss。

(5)特殊值

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。  
type:模式信息,此处表示为特殊值模式。  
specialValue:特殊值,可选值:isNull、isNotNull和all。

5.4.3.1.3.3 数值类型

(1)双向

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。
type:模式信息,此处表示为双向模式。
min:最小值。
max:最大值。
includeMin:是否包含最小值,1:包含,0:不包含。
includeMax:是否包含最大值,1:包含,0:不包含。
aggregateFilter:是否聚合前过滤,1:是,0:否。
aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

(2)至多

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。
type:模式信息,此处表示为至多模式。
max:最大值。
includeMax:是否包含最大值,1:包含,0:不包含。
aggregateFilter:是否聚合前过滤,1:是,0:否。
aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

(3)至少

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。
type:模式信息,此处表示为至少模式。
min:最小值。
includeMin:是否包含最小值,1:包含,0:不包含。
aggregateFilter:是否聚合前过滤,1:是,0:否。
aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

(4)特殊值

field:字段信息;其中包含字段名称,数据集ID,字段角色和数据类型。
type:模式信息,此处表示为特殊值模式。
specialValue:特殊值,可选值:isNull、isNotNull和all。
aggregateFilter:是否聚合前过滤,1:是,0:否。
aggregation:聚合方式,可选值:sum、max、min、avg、count和count_distinct。

5.4.3.2 图册内资源传参过滤

在SaCa DataViz中,用户可以通过网页资源把已存在的网页嵌入到图册中。本文主要介绍外部页面如何实现对图册内图表的过滤。

5.4.3.2.1 参数的获取

参考 5.4.3.1.1参数的获取

5.4.3.2.2 使用方法及步骤

(1)获取过滤参数
./filter/1

(2)将所获取参数构建到新的结构中

data = {
    action: "confirm",
    conditions: [
            {
            "id":"自定义的唯一ID"
            "field":{
                "name":"省份",
                "dataSetId":"f8b8eb5f-484b-4e15-a82f-28170e081e09",
                "role":"string",
                "type":"STRING"
            },
             "type":"routine",
             "values":["上海","北京","云南"],
             "allIn":false,
             "others":0
         }
    ]
}

conditions内是过滤参数的原始结构。注意这里添加了"id"属性,id要唯一这是后续更新条件的基础。
如果在图册中配置“全局传参过滤”做图册全局过滤,图表依赖的数据集字段名相同即可响应过滤。否则给条件中的dataSetId赋值,那么可以指定数据集所关联的图表响应过滤。

(3)将代码写入一个页面,比如innerfilter.html,使用window.postMessage方法发送条件。
示例代码

<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <button onclick="postCondition()">发送过滤条件</button>
    <script>
        var data ={
            action: "confirm",
            conditions: [
                {"id":"111","field":{"name":"省份","dataSetId":"f8b8eb5f-484b-4e15-a82f-28170e081e09","role":"string","type":"STRING"},"type":"routine","values":["上海","北京","云南"],"allIn":false,"others":0}
            ]
        };
        function postCondition(){
            window.parent.postMessage(data, '*');
        }
    </script>
</body>
</html>

(4)可将html页面放入dataviz前端路径
比如 dataviz-web/tmp/innerfilter.html

(5)在图册中引入这个页面
./filter/1
这样就实现了自定义的图册页过滤控件。
./filter/1 【注意】因为图册网页控件用的是iframe,如果有自定义的下拉框样式会被iframe边缘遮挡,H5原生标签无遮挡问题。

5.4.3.1.3参数的规则介绍

参考 5.4.3.1.3参数的规则介绍

5.4.3.3 设置列表数据

SaCa DataViz支持自定义字符型过滤条件的中内容,并以多选下拉列表的形式进行交互。下拉列表中的内容有4种指定方式:“其他数据集”、“自定义”、“系统用户或组织”、“组织结构树”,下面将介绍这几种列表数据的应用情形和使用方法。

5.4.3.3.1 数据集

有的应用场景需要用其他数据集的字段组成过滤条件,来过滤当前数据集中的数据。使用方式如图4-7所示,点击“完成”按钮之后,下拉列表中的内容已经切换。

./filter/1

图4-7

5.4.3.3.2 自定义数据

适用于自定义下拉列表中的内容,输入内容如图4-8所示,点击“完成”按钮之后,下拉列表中的内容已经切换(如图4-9)。

./filter/1

图4-8

./filter/1
图4-9

5.4.3.3.3 系统变量

适用于将下拉列表中的内容定义为系统的组织列表、角色列表或用户列表,关于系统组织、列表和用户的设置请参考权限管理章节。在设置上述信息后,即可在此进行关联。

./filter/1

图4-10

5.4.3.3.4 树形列表

组织的从属关系可以用树形结构表达,在这里支持以树形的结构进行筛选,效果如图4-11所示。

./filter/1

图4-11

5.4.3.4 设置级联影响条件

适用于若干个过滤条件存在从属关系,比如“地区”、“省份”和“城市”三个字段(如图4-12所示),希望在“地区”字段中选择“东北”后,“省份”仅列出属于“东北”的省份(如图4-13)。

./filter/1

图4-12

./filter/1
图4-13

5.4.3.5 播放隐藏

过滤条件的交互空间在界面中默认是显示的状态,如果用户想隐藏控件(如采用URL传参的,就没有必要在界面中再显示控件),则勾选此选项。

5.4.3.6 自动刷新数据

适用于在设置好过滤条件后,不需要点击“确定”按钮,直接使过滤条件生效的情形。SaCa DataViz为了兼顾查询性能,默认关闭了此功能。关于确认按钮请详见“2.2在图册中使用过滤条件”章节。

5.4.3.7 设置条件输入框宽度

目前仅字符过滤条件支持自定义下拉框宽度,该功能默认是关闭状态,开启该功能需要修改配置文件\dataviz_web\common\config.js,把customWidthEnable属性的值修改为true, 然后在条件编辑页面就可以设置控件的宽度,如下图:

./filter/1

results matching ""

    No results matching ""

    results matching ""

      No results matching ""