下拉菜单代码(下拉框代码)
日常工作或生活中,我们几乎时时会遇到按日期来进行数据过滤,然后进行相关的数据分析工作。在永洪BI中,我们有专门的日期过滤组件,如下图1、图2。
图片1
图片2
使用过后,我们会发现这些日期过滤组件可自定义选择日期或日期区间,满足大多数使用场景。而有很多时候我们可能会有日期快捷筛选的需求,例如:今天、昨天、前天、最近7天、最近半月......
这时如果还是使用自定义筛选日期或日期区间的话,在筛选像最近7天、最近半月这些日期区间时还需倒推一下日期区间的开始日期,就没有那么方便快捷了,而若多个使用者对最近7天(包含今天或是不包含今天?)的理解不统一也会导致最终的筛选出的数据不一致。这时如果有一个定义好的日期快捷筛选,那就不需要再去倒推日期,也不会因为不同使用者因理解不同而导致的筛选出的数据不一致的问题。
所以今天这里就简单讲讲如何使用脚本与传参组件组合起来实现一个日期快捷筛选的实用功能。
展开全文
1传参组件与脚本的简单介绍
传参组件,其作用是给参数赋值,向其他组件传递参数值,可以用来筛选数据。
脚本,永洪提供了一个嵌入式的脚本环境,通过JavaScript的语言标准来支持,可以完全访问组件的绑定,获取组件的数据、属性,以及数据的输入,或其它(如日期、时间、区域、参数等),来动态修改报告及组件的外观和行为。脚本可以在报告初始化的时候执行任务,也可以在改变报告时(如更改筛选条件)执行任务。脚本语言简单但功能强大,只需要最少的编程知识即可。
永洪脚本是永洪产品适用面较广的功能,让用户可以自己定制化一些高级需求 , 帮助您应对更复杂的业务场景。相关JS知识可上永洪官网帮助文档(点击跳转)查看学习,深入学习可参阅JavaScript书籍或教程网站。
日期快捷筛选功能实现效果
1)快捷筛选条件
当选择自定义时,右侧会弹出日期区间筛选框;若选择其他条件,如今天、昨天......则直接筛选当天或区间数据。
2)今天
3)昨天
4)最近7天
5)月初至今
6)自定义
日期快捷筛选功能实现步骤
1)
选取组件。从右侧【组件传参组件】拖拽一个“下拉参数”,两个“文本参数”与其他数据图表进入画布即可。
2)
选中组件“下拉参数”,数据界面自定义快捷筛选条件,然后切换到设置界面更改组件名称。
TIPS:记得选中相应组件才可进行以上设置
3)
选中“文本参数”,进入设置界面,更改组件名称,隐藏标题,编辑器-数据类型选择日期类型,设置提示信息等。另一个文本参数组件记得做同样的设置。
4)
选择报告-脚本-变化时运行进行脚本编写。
var data =快捷筛选.getSelectedObjects()[0];//获取下拉参数选中值
day_0=today() //今天
day_1=dateAdd(today(),'day',-1) //昨天
day_2=dateAdd(today(),'day',-2) //前天
day_7=dateAdd(today(),'day',-6) //最近7天起始日期,此例考虑的包含今天,可根据实际调整
day_15=dateAdd(today(),'day',-14) //最近15天起始日期,同上
month_0=date(year(today()),month(today()),1) //月初
year_0=date(year(today()),1,1) //年初
//debug(year_0) //可使用debug查看值是否正确
start_date.visible=false;end_date.visible=false;//两个文本参数组件默认隐藏
if(data=='自定义'){
start_date.visible=true;end_date.visible=true;//当下拉参数选中值为“自定义”时,两个文本参数组件显示
}
if(data=='今天'){
param["start_date"]=day_0;param["end_date"]=day_0//当下拉参数选中值为“今天”时,两个文本参数组件分别设置日期且不显示
}
if(data=='昨天'){
param["start_date"]=day_1;param["end_date"]=day_1
}
if(data=='前天'){
param["start_date"]=day_2;param["end_date"]=day_2
}
if(data=='最近7天'){
param["start_date"]=day_7;param["end_date"]=day_0
}
if(data=='最近15天'){
param["start_date"]=day_15;param["end_date"]=day_0
}
if(data=='月初至今'){
param["start_date"]=month_0;param["end_date"]=day_0
}
if(data=='年初至今'){
param["start_date"]=year_0;param["end_date"]=day_0
}
上面的脚本代码可直接复制使用,注意根据实际情况做相应的调整。
5)
选中绑定好数据的图表组件,添加过滤条件。
以上就是本篇文章的全部内容,感谢您的阅读!