倒計(jì)時(shí)js代碼(js倒計(jì)時(shí)代碼時(shí)分秒)
日常工作或生活中,我們幾乎時(shí)時(shí)會(huì)遇到按日期來(lái)進(jìn)行數(shù)據(jù)過(guò)濾,然后進(jìn)行相關(guān)的數(shù)據(jù)分析工作。在永洪BI中,我們有專門的日期過(guò)濾組件,如下圖1、圖2。
圖片1
圖片2
使用過(guò)后,我們會(huì)發(fā)現(xiàn)這些日期過(guò)濾組件可自定義選擇日期或日期區(qū)間,滿足大多數(shù)使用場(chǎng)景。而有很多時(shí)候我們可能會(huì)有日期快捷篩選的需求,例如:今天、昨天、前天、最近7天、最近半月......
這時(shí)如果還是使用自定義篩選日期或日期區(qū)間的話,在篩選像最近7天、最近半月這些日期區(qū)間時(shí)還需倒推一下日期區(qū)間的開(kāi)始日期,就沒(méi)有那么方便快捷了,而若多個(gè)使用者對(duì)最近7天(包含今天或是不包含今天?)的理解不統(tǒng)一也會(huì)導(dǎo)致最終的篩選出的數(shù)據(jù)不一致。這時(shí)如果有一個(gè)定義好的日期快捷篩選,那就不需要再去倒推日期,也不會(huì)因?yàn)椴煌褂谜咭蚶斫獠煌鴮?dǎo)致的篩選出的數(shù)據(jù)不一致的問(wèn)題。
所以今天這里就簡(jiǎn)單講講如何使用腳本與傳參組件組合起來(lái)實(shí)現(xiàn)一個(gè)日期快捷篩選的實(shí)用功能。
展開(kāi)全文
1傳參組件與腳本的簡(jiǎn)單介紹
傳參組件,其作用是給參數(shù)賦值,向其他組件傳遞參數(shù)值,可以用來(lái)篩選數(shù)據(jù)。
腳本,永洪提供了一個(gè)嵌入式的腳本環(huán)境,通過(guò)JavaScript的語(yǔ)言標(biāo)準(zhǔn)來(lái)支持,可以完全訪問(wèn)組件的綁定,獲取組件的數(shù)據(jù)、屬性,以及數(shù)據(jù)的輸入,或其它(如日期、時(shí)間、區(qū)域、參數(shù)等),來(lái)動(dòng)態(tài)修改報(bào)告及組件的外觀和行為。腳本可以在報(bào)告初始化的時(shí)候執(zhí)行任務(wù),也可以在改變報(bào)告時(shí)(如更改篩選條件)執(zhí)行任務(wù)。腳本語(yǔ)言簡(jiǎn)單但功能強(qiáng)大,只需要最少的編程知識(shí)即可。
永洪腳本是永洪產(chǎn)品適用面較廣的功能,讓用戶可以自己定制化一些高級(jí)需求 , 幫助您應(yīng)對(duì)更復(fù)雜的業(yè)務(wù)場(chǎng)景。相關(guān)JS知識(shí)可上永洪官網(wǎng)幫助文檔(點(diǎn)擊跳轉(zhuǎn))查看學(xué)習(xí),深入學(xué)習(xí)可參閱JavaScript書籍或教程網(wǎng)站。
日期快捷篩選功能實(shí)現(xiàn)效果
1)快捷篩選條件
當(dāng)選擇自定義時(shí),右側(cè)會(huì)彈出日期區(qū)間篩選框;若選擇其他條件,如今天、昨天......則直接篩選當(dāng)天或區(qū)間數(shù)據(jù)。
2)今天
3)昨天
4)最近7天
5)月初至今
6)自定義
日期快捷篩選功能實(shí)現(xiàn)步驟
1)
選取組件。從右側(cè)【組件傳參組件】拖拽一個(gè)“下拉參數(shù)”,兩個(gè)“文本參數(shù)”與其他數(shù)據(jù)圖表進(jìn)入畫布即可。
2)
選中組件“下拉參數(shù)”,數(shù)據(jù)界面自定義快捷篩選條件,然后切換到設(shè)置界面更改組件名稱。
TIPS:記得選中相應(yīng)組件才可進(jìn)行以上設(shè)置
3)
選中“文本參數(shù)”,進(jìn)入設(shè)置界面,更改組件名稱,隱藏標(biāo)題,編輯器-數(shù)據(jù)類型選擇日期類型,設(shè)置提示信息等。另一個(gè)文本參數(shù)組件記得做同樣的設(shè)置。
4)
選擇報(bào)告-腳本-變化時(shí)運(yùn)行進(jìn)行腳本編寫。
var data =快捷篩選.getSelectedObjects()[0];//獲取下拉參數(shù)選中值
day_0=today() //今天
day_1=dateAdd(today(),'day',-1) //昨天
day_2=dateAdd(today(),'day',-2) //前天
day_7=dateAdd(today(),'day',-6) //最近7天起始日期,此例考慮的包含今天,可根據(jù)實(shí)際調(diào)整
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;//兩個(gè)文本參數(shù)組件默認(rèn)隱藏
if(data=='自定義'){
start_date.visible=true;end_date.visible=true;//當(dāng)下拉參數(shù)選中值為“自定義”時(shí),兩個(gè)文本參數(shù)組件顯示
}
if(data=='今天'){
param["start_date"]=day_0;param["end_date"]=day_0//當(dāng)下拉參數(shù)選中值為“今天”時(shí),兩個(gè)文本參數(shù)組件分別設(shè)置日期且不顯示
}
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
}
上面的腳本代碼可直接復(fù)制使用,注意根據(jù)實(shí)際情況做相應(yīng)的調(diào)整。
5)
選中綁定好數(shù)據(jù)的圖表組件,添加過(guò)濾條件。
以上就是本篇文章的全部?jī)?nèi)容,感謝您的閱讀!
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。