参数查询

实现效果

​ 要实现效果如下图所示:

demo

​ 上面的仪表板中,共包含三行一个输入框和五个图表。第一行里就是一个输入框;第二行有两个图表:一个是柱图,另一个是线图;第三行为三个图表,分别是散点图、饼图和区域图。

学习视频:

实现过程

添加参数

​ 创建一个仪表板文件,点击工具栏上的设置按钮,添加一个名为area的参数,默认值为%%,如下图所示:

image-20220325112728540

创建数据集

​ 创建一个可以连接到baskreport示例数据库的数据源,采用该数据源,添加一个名为orders数据集,如下图所示:

image-20220325112932419

​ 可以看到,该数据集从orders表中获取数据,同时添加了area字段like的条件,like条件的值为我们上一步设置的参数area。

在数据集中使用表达式需要放在${}中,表达式中引用参数需要以$开头,所以上面的SQL中引用参数area的写法就是${$area}。

点击下方的预览数据按钮,可以正常看到数据内容,这是因为area参数的默认值为%%,所以上面的数据集中引用的SQL预览时生成的SQL就是area like '%%',所以我们可以正常看到预览数据。

创建组件

​ 选中页面左侧组件面板中组件结构树中的根容器节点,添加三个垂直类型的容器。

​ 选中第一个容器,在其中添加一个参数,就是我们设置的名为area的参数,添加好该参数后,选中它,在右侧属性面板中设置它的标题为空,点位符属性值为所在区域,值前、后缀属性值都为%,同时勾选值更改时提交查询复选框,如下图所示:

image-20220325114044148

这里的值前、后缀属性如果设置,那么在预览时在这个文本框中输入了值,这个值前后会自动添加这里配置的前、后缀属性属性。这里我们设置的值前、后缀属性值都为%,这里在SQL查询中就可以实现like模糊匹配查询。

​ 在第二、三个容器中,分别添加柱图、线图、散点图、饼图和区域图,并设置好他们与数据集orders中相关字段的绑定。

​ 保存预览,就可以看到我们需要的效果,在第一行输入框中可输入不同区域,数据集就会执行相应的过滤操作,与该数据集绑定的图表也会相应作出变化。

​ 上面的例子中,对于第一行对应的容器,它里面放的是一个查询用的输入框,该输入框高度是固定的,但默认情况下,所有组件的尺寸采用的都是百分比,在这种情况下,可能会出现在预览时不同窗口尺寸、或分辨率情况下输入框尺寸不一致的情况。为解决这一问题,我们可以选中第一行的容器,在右侧属性窗口中,切换到其它属性选项卡,将该容器尺寸改为固定尺寸,然后手动拖拽调整好该容器高度即可。如下图所示:

image-20220325121947598

​ 保存预览,可以看到无论在什么窗口尺寸或分辨率下,第一行输入框都以固定70个象素的高度显示,如下图:

image-20220325122206478

results matching ""

    No results matching ""