You need to enable JavaScript to run this app.
导航

覆盖筛选器

最近更新时间2024.02.28 11:39:43

首次发布时间2022.10.27 11:09:30

1. 概述

你可以传入筛选器配置以覆盖嵌入仪表盘、嵌入图表的筛选器操作、筛选值。

  • 嵌入仪表盘时,你可以覆盖仪表盘的 公共筛选器。请将对应的筛选字段添加为仪表盘的公共筛选器,使用 筛选器名称 进行匹配覆盖
  • 嵌入单个图表时,你可以覆盖 图表筛选项。请在可视化查询模块为图表添加对应字段到 筛选 中,使用 字段名称 进行匹配覆盖
  • 如果希望在嵌入仪表盘时覆盖指定图表的筛选项,请将该筛选项添加为仪表盘的公共筛选器
2. 配置规则

完整的筛选器配置形如:
field1 op1 value1 and field2 op2 'value2','value22' and field3 op3 value3,value33
不同的筛选配置之间用 and 相连,表示配置是且的关系。智能数据洞察不支持覆盖筛选器之间为或关系。

每一个筛选配置均包含三个部分 field、 op、 value

  • field - 筛选器名称,嵌入仪表盘时为公共筛选器名称,嵌入图表时为图表上添加的筛选字段名称
  • op - 筛选操作符
  • value - 筛选值。如果筛选值为字符串,需要使用引号''包裹。多个筛选值用逗号,隔开。

设筛选器完整配置为S,单个筛选器配置为A,筛选器规则文法描述如下

S -> S | S and A
S -> A
A -> [filterName] OP V
OP -> eq | ne | lt | gt | le | ge | in | ni | btw | lk | nl | arrayhas | last | lastsync
V -> NUMBER | STRING | V,NUMBER | V,STRING

所有筛选操作符说明如下

op说明
eqequal
nenot equal
ltless than
gtgreater than
leless or equal
gegreater or equal

in

in (value1,value2)
注意:value值间不加空格

ninot in
btwbetween
lklike
nlnot like
arrayhasarray has
lastlast * time-units
lastsynclast sync * time-units
3. 配置示例

注意

  • 如果你嵌入完整的仪表盘,需要覆盖仪表盘图表的筛选条件,必须在仪表盘上添加公共筛选器,通过覆盖公共筛选器的方式来影响图表查询。
  • 如果你嵌入仪表盘上的单个图表,需要覆盖图表筛选条件,必须在图表上添加对应的筛选字段。

3.1 示例一

Category eq 'Furniture' and Region in 'Central','South'

该配置表示查询 Category 为 Furniture,且 Region 为 Central 或 South 的数据。

3.2 示例二

Category ne 'Furniture' and ShipMode eq 'First Class' and ProductName lk '%Desktop%'

该配置表示查询 Category 不为 Furniture,且 ShipMode 为 First Class,且 ProductName 包含 Desktop 的数据。特别地,lk需要使用通配符:

  • keyword% 表示以 keyword 开头
  • %keyword 表示以 keyword 结尾
  • %keyword% 表示包含 keyword

3.3 示例三

OrderDate btw '20210101','20210301' and Profit gt 100

该配置表示查询 OrderDate 在 2021-01-01 与 2021-03-01之间,且 Profit 大于 100的数据。

4. 使用方式

4.1 在 iframe 中使用

在 iframe 的 url 中传入 filter 参数来配置覆盖筛选器。

import React from 'react'
import ReactDOM from 'react-dom'
import '@aeolus/sdk'

class BIComponent extends React.Component {
  render() {
    return (
      <iframe 
        src={`https://console.volcengine.com/bi/datawind/#/external/dashboard/******?appId=******&inline=true&filter=OrderDate btw '20210101','20210301' and Profit gt 100`}
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))

4.2 在 SDK 中使用

在SDK组件中,可以传入 filter 参数来配置覆盖筛选器。

import React from 'react'
import ReactDOM from 'react-dom'

class BIComponent extends React.Component {
  render() {
    return (
      <bi-dashboard
        urlPrefix='https://console.volcengine.com/bi/datawind'
        dashboardId='******'
        appId='******'
        filter={`OrderDate btw '20210101','20210301' and Profit gt 100`}
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))