页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

如果默认的数据格式和字段值的数据真实格式不一致时,可在 筛选器设置 中修改。下面通过一个简单的示例演示如何使用筛选器组件的数据格式设置功能。

日期筛选器示例
日期筛选器示例

1、前提条件:

(1)本示例中使用到的数据:wiki示例-产品明细数据.xlsx 。

...

(3)选中年周筛选器组件,在组件数据中点击 筛选器设置 ,设置数据格式为 yyyy-ww ,点击 确定

数据格式可选内容是受日期控件类型影响的。

Image RemovedImage Added

(4)此时再选择2017年第1周,能正常查询2017年第1周的数据。

...

在组件设置的属性中,可对日期类筛选器修改样式效果,属性设置包括:名称和控件,详情可参考 筛选器组件通用样式设置

Image Removed

6 树筛选组件

详情可查看:树筛选组件

1 概述

筛选器组件主要包括以下类型:单选下拉树、多选下拉树、单选列表树、多选列表树、单选列表、多选列表、单选下拉、多选下拉、单选输入框、多选输入框、日期、年、年季、年月、年周、时间和日期时间,您可根据实际业务场景选择合适的筛选器组件类型。

本文仅介绍各筛选器类型的特有功能,筛选器组件创建及通用功能详情可参考 创建筛选器组件筛选器组件基础功能

2 列表筛选器

列表筛选器包括单选和多选两种形式,一般适用于备选值较少的场景。

2.1 展示效果

...

Image Removed

...

Image Removed

2.2 选择筛选值

列表筛选器备选值最多只能显示前100行,当数据量超过100行时,建议使用下拉或输入框筛选器。

  • 单选列表选择 全部 时,是查询所有数据
  • 多选列表选择 全选 时,因只勾选了前100行的值,所以只查询前100行的值去过滤数据

筛选器设置 中可设置是否在备选值中显示 全部/全选 选项,详情可参考 筛选器备选值 。

Image Removed

2.3 属性设置

在组件设置的属性中,可对列表筛选器修改样式效果,样式设置包括:名称、每行列数、滚动条、风格

Image Removed

1、名称 是筛选器组件的通用设置项,详情可参考 筛选器组件通用样式设置

2、每行列数 是设置备选值列表要分为几列展示,效果如下图所示:

Image Removed

3、滚动条 是指当列表备选值过多时,可设置筛选器组件内部是否显示滚动条。

组件高宽在某些临界值时刚好出现了滚动条,但调整组件高宽比较难设置实现在不同显示设备都不显示滚动条,为了美观可通过此设置项设置隐藏组件内部的滚动条。

Image Removed

4、风格 

列表样式筛选器支持设置两种风格:选框和按钮,默认效果为 选框

(1)选框风格支持设置选框颜色和文字样式,以多选列表为例,设置项及效果如下图所示:

Image Removed

(2)按钮风格样式设置分为:按钮组样式、按钮默认样式和按钮选中样式 三类,包括设置圆角、间隔、宽度、边框等样式。

Image Removed

设置项及效果如下图所示:

...

圆角 设置按钮平铺后单行四周的圆角。

Image Removed

...

Image Removed

...

边框 设置按钮平铺后单行的边框样式。

Image Removed

...

Image Removed

...

高度 设置按钮平铺后单行的高度。

Image Removed

...

Image Removed

...

间隔 设置按钮和按钮之间的间隔。

Image Removed

...

Image Removed

...

宽度 设置单个按钮的宽度。

  • 内容自适应:根据内容自适应显示按钮宽度。
  • 固定宽度:设置每个按钮的统一宽度。

Image Removed

...

Image Removed

Image Removed

...

背景 设置单个按钮的背景。

  • 颜色:背景设置为单色。
  • 图片:背景设置为某个图片。

Image Removed

...

Image Removed

...

边框 设置单个按钮的边框样式。

Image Removed

...

Image Removed

...

圆角 设置单个按钮的四周圆角效果。

Image Removed

...

Image Removed

...

字体 设置按钮内容的字体样式。

Image Removed

...

Image Removed

...

背景 设置单个按钮被选中/鼠标移入时的背景。

  • 颜色:背景设置为单色。
  • 图片:背景设置为某个图片。

Image Removed

...

Image Removed

...

字体 设置单个按钮被选中/鼠标移入时的字体样式。

Image Removed

...

Image Removed

3 下拉筛选器

下拉筛选器包括单选和多选两种形式,一般适用于备选值较多、控件展示空间较小的场景。

3.1 展示效果

...

Image Removed

...

Image Removed

3.2 选择筛选值

1、下拉筛选器备选值只显示前100行,100行后的数据可通过搜索选择。

Image Removed

2、全部 

(1)下拉筛选器在 筛选器设置 中可设置在备选值中是否显示 全部 选项,详情可参考 筛选器备选值 。

(2)选择 全部 时,是查询所有数据。

3、部分选择

如果先选择 全部 ,再取消选择某些项,此时下拉筛选器会显示 部分选择 ,代表过滤数据时仅排除这些被取消的项。比如 订单编号 筛选器的操作符是 包含 ,先选择 全部 ,此时查询结果是获取全部数据。再取消选择某些项,此时下拉筛选器显示 部分选择 ,筛选条件是不包含被取消的项。

Image Removed

3.3 属性设置

在组件设置的属性中,可对下拉筛选器修改样式效果,属性设置包括:名称、控件和自定义值

1、其中 名称控件筛选器组件的通用设置项,详情可参考 筛选器组件通用样式设置

2、自定义值 指是否允许用户使用自定义的值作为筛选值。

设置为 允许 时,在筛选器文本框中输入任意一个不存在于备选值中的值,如输入“test数据”,可将所输入文本作为筛选值使用。

Image Removed

4 输入框筛选器

输入框筛选器包括单选和多选两种形式,输入框筛选器是通过手动输入关键字去筛选数据,一般适用于备选值较多,且对要筛选的内容比较明确,不需要利用列表/下拉筛选器获取全量信息才能勾选的场景。

4.1 展示效果

...

下图中,城市筛选器的操作符是 模糊匹配 ,输入关键字 ,此时会查询出所有城市名字中含 的城市。

Image Removed

...

多选输入框筛选器支持通过换行符、英文逗号分隔符,分别查询多个值。

信息

限制最多可查询1000个值。

...

下图中,城市筛选器的操作符是 模糊匹配 ,输入关键字 京,海,,此时会查询出所有城市名字中含 京,海, 的城市。

Image Removed

4.2 属性设置

在组件设置的属性中,可对输入框筛选器修改样式效果,属性设置包括:名称、控件和数据类型

Image Removed

1、其中 名称控件筛选器组件的通用设置项,详情可参考 筛选器组件通用样式设置

2、数据类型 设置项是控制输入内容的数据类型,主要是为了避免输入内容的数据类型和筛选器绑定的字段数据类型不一样,在某些数据库中会出现查询异常。

数据类型支持设置为字符串、数字。如果设置数据类型为数字,而输入的内容是字符串时,会自动将内容替换成0。

Image Removed

4.3 筛选器设置

多选输入框特有设置:在筛选器设置中,可对 多选输入框筛选器 设置分隔符,默认“(新文本行)”、“,(逗号)”都勾选,“(新文本行)”不允许取消勾选,“,(逗号)”可以取消勾选

Image Removed

5 日期类筛选器

一般适用于日期型、日期时间型和时间层次字段的筛选场景。

5.1 展示效果

日期类筛选器包括:日期、年、年季、年月、年周、时间和日期时间,根据筛选器类型不同下拉选择不同时间频度。

...

Image Removed

...

Image Removed

...

Image Removed

...

Image Removed

...

Image Removed

...

Image Removed

...

Image Removed

5.2 数据格式

日期类筛选器设置的数据格式需要和字段值的数据真实格式保持一致,才能筛选出正确的数据,各筛选器类型默认的数据格式如下所示:

...

2023W31

2023W1

...

如果默认的数据格式和字段值的数据真实格式不一致时,可在 筛选器设置 中修改。下面通过一个简单的示例演示如何使用筛选器组件的数据格式设置功能。

1、前提条件:

(1)本示例中使用到的数据:wiki示例-产品明细数据.xlsx 。

(2)将上述数据导入到数据模型中,并保存该数据模型,功能详见:导入文件数据 

(3)在仪表盘中创建组件时,业务数据集选择上述步骤2中创建的数据模型。

2、操作步骤

(1)创建一个 年周 筛选器组件,并绑定 日期(week)字段,效果如下图所示,筛选器组件和图表组件创建示例可参考 创建筛选器组件、 创建第一个可视化组件 

Image Removed

(2)此时选择2017年第1周查询不出数据,因为字段值的数据真实格式是yyyy-ww,而年周筛选器默认数据格式是yyyy-Ww。

Image Removed

(3)选中年周筛选器组件,在组件数据中点击 筛选器设置 ,设置数据格式为 yyyy-ww ,点击 确定

数据格式可选内容是受日期控件类型影响的。

Image Removed

(4)此时再选择2017年第1周,能正常查询2017年第1周的数据。

Image Removed

5.3 属性设置

在组件设置的属性中,可对日期类筛选器修改样式效果,属性设置包括:名称和控件,详情可参考 筛选器组件通用样式设置

Image Removed

Image Removed

...

Image Added


6 日期区间类筛选器

日期区间类型的筛选器,可实现通过1个筛选器进行日期区间的筛选。

注意
title注意

1、202505发布的版本中日期区间筛选器为beta版,仅支持“日期”类型、仅支持交互式仪表盘。

2、从交互式仪表盘转入透视分析模式、转入即席查询模式时,会丢弃日期区间筛选器。

3、宏代码、跳转规则功能暂不支持对日期区间筛选器传值。

4、文本组件中获取日期区间筛选器的值为  “开始日期,结束日期”格式。


类型说明效果
日期

以日期的形式展示,选择日期区间。

操作符:支持“介于...之间(闭区间)”,即大于等于且小于等于;以及 “介于...之间(开区间)”,即大于且小于。

Image Added

5.2 数据类型

日期区间类筛选器,支持的字段数据类型为 日期、字符串。

5.3 数据格式

当筛选器中的字段数据类型为字符串时,筛选器设置的数据格式需要和字段值的数据真实格式保持一致,才能筛选出正确的数据,各筛选器类型默认的数据格式如下所示:

筛选器类型默认数据格式示例
日期yyyy-MM-dd2023-01-01

如果默认的数据格式和字段值的数据真实格式不一致时,可在 筛选器设置 中修改。具体使用请参考日期筛选器示例章节的内容。

5.4 属性设置

在组件设置的属性中,可对日期区间类筛选器修改样式效果,属性设置包括:名称和控件,详情可参考 筛选器组件通用样式设置

Image Added

Image Added



7 树筛选组件

详情可查看:树筛选组件