日常工作或生活中，我們幾乎時時會遇到按日期來進行數(shù)據(jù)過濾，然后進行相關(guān)的數(shù)據(jù)分析工作。在永洪BI中，我們有專門的日期過濾組件，如下圖1、圖2。

圖片1

圖片2

使用過后，我們會發(fā)現(xiàn)這些日期過濾組件可自定義選擇日期或日期區(qū)間，滿足大多數(shù)使用場景。而有很多時候我們可能會有日期快捷篩選的需求，例如：今天、昨天、前天、最近7天、最近半月......

這時如果還是使用自定義篩選日期或日期區(qū)間的話，在篩選像最近7天、最近半月這些日期區(qū)間時還需倒推一下日期區(qū)間的開始日期，就沒有那么方便快捷了，而若多個使用者對最近7天（包含今天或是不包含今天？）的理解不統(tǒng)一也會導(dǎo)致最終的篩選出的數(shù)據(jù)不一致。這時如果有一個定義好的日期快捷篩選，那就不需要再去倒推日期，也不會因為不同使用者因理解不同而導(dǎo)致的篩選出的數(shù)據(jù)不一致的問題。

所以今天這里就簡單講講如何使用腳本與傳參組件組合起來實現(xiàn)一個日期快捷篩選的實用功能。

展開全文

1傳參組件與腳本的簡單介紹

傳參組件，其作用是給參數(shù)賦值，向其他組件傳遞參數(shù)值，可以用來篩選數(shù)據(jù)。

腳本，永洪提供了一個嵌入式的腳本環(huán)境，通過JavaScript的語言標(biāo)準(zhǔn)來支持，可以完全訪問組件的綁定，獲取組件的數(shù)據(jù)、屬性，以及數(shù)據(jù)的輸入，或其它（如日期、時間、區(qū)域、參數(shù)等），來動態(tài)修改報告及組件的外觀和行為。腳本可以在報告初始化的時候執(zhí)行任務(wù)，也可以在改變報告時（如更改篩選條件）執(zhí)行任務(wù)。腳本語言簡單但功能強大，只需要最少的編程知識即可。

永洪腳本是永洪產(chǎn)品適用面較廣的功能，讓用戶可以自己定制化一些高級需求 , 幫助您應(yīng)對更復(fù)雜的業(yè)務(wù)場景。相關(guān)JS知識可上永洪官網(wǎng)幫助文檔（點擊跳轉(zhuǎn)）查看學(xué)習(xí)，深入學(xué)習(xí)可參閱JavaScript書籍或教程網(wǎng)站。

日期快捷篩選功能實現(xiàn)效果

1）快捷篩選條件

當(dāng)選擇自定義時，右側(cè)會彈出日期區(qū)間篩選框；若選擇其他條件，如今天、昨天......則直接篩選當(dāng)天或區(qū)間數(shù)據(jù)。

2）今天

3）昨天

4）最近7天

5）月初至今

6）自定義

日期快捷篩選功能實現(xiàn)步驟

1)

選取組件。從右側(cè)【組件傳參組件】拖拽一個“下拉參數(shù)”，兩個“文本參數(shù)”與其他數(shù)據(jù)圖表進入畫布即可。

2)

選中組件“下拉參數(shù)”，數(shù)據(jù)界面自定義快捷篩選條件，然后切換到設(shè)置界面更改組件名稱。

TIPS：記得選中相應(yīng)組件才可進行以上設(shè)置

3）

選中“文本參數(shù)”，進入設(shè)置界面，更改組件名稱，隱藏標(biāo)題，編輯器-數(shù)據(jù)類型選擇日期類型，設(shè)置提示信息等。另一個文本參數(shù)組件記得做同樣的設(shè)置。

4）

選擇報告-腳本-變化時運行進行腳本編寫。

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ù)實際調(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;//兩個文本參數(shù)組件默認(rèn)隱藏

if(data=='自定義'){

start_date.visible=true;end_date.visible=true;//當(dāng)下拉參數(shù)選中值為“自定義”時，兩個文本參數(shù)組件顯示

}

if(data=='今天'){

param["start_date"]=day_0;param["end_date"]=day_0//當(dāng)下拉參數(shù)選中值為“今天”時，兩個文本參數(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ù)實際情況做相應(yīng)的調(diào)整。

5）

選中綁定好數(shù)據(jù)的圖表組件，添加過濾條件。

以上就是本篇文章的全部內(nèi)容，感謝您的閱讀！