Tableau JavaScript API的时间应用

Tableau JavaScript API的时间应用

  在实际报表开发中，往往会给用户提供关于时间的可视化控件，便于用户查询某个时间范围内的数据。关于时间控件有两种方法，一是筛选器，二是参数控件。筛选器用法比较简单，只需要把时间字段拉入到筛选器栏下面，比如“时间范围”。参数控件是通过在参数栏中“创建参数”，数据类型选择“日期”，然后在度量的计算中，将现有字段如“时间”和参数通过函数关联起来。比如要计算一周的数据，已有字段为[时间范围]，参数为[当前日期]，那么判断条件即为如下，函数DATETRUNC()和dateadd()用法这里暂不做解释。

IF(  DATETRUNC(‘day’,[时间范围])>=[当前日期] AND

      DATETRUNC(‘day’,[时间范围])<=dateadd(“day”,6,[当前日期])

 )THEN ...

一．时间筛选器的js控制

http://onlinehelp.tableau.com/current/api/js_api/zh-cn/JavaScriptAPI/js_api_concepts_filtering.htm 这里用的是链接中的时间范围的方法,用的是applyRangeFilterAsync()函数。.then()是回调函数

// Date Range 

.then(function () {

return worksheet.applyRangeFilterAsync("Date", {

min: new Date(Date.UTC(2010, 3, 1)),

max: new Date(Date.UTC(2010, 12, 31))

});

})

前提：筛选器栏下面一定要是用户界面显示的字段，简单来说就是[时间范围]这个字段，因为之后就是根据这个名称来控制的，[时间范围]对应上面的”Date”。时间范围拉进筛选器栏的时候会出现一个提示框，选择“相对日期”就会得到关于时间的滑动块。

 


  在它的下拉菜单中“显示快速筛选器”，就会得到如下图所示的滑动块。而选择“应用于工作表”-“使用此数据源的所有项”可以将多个工作表由一个“时间范围”的滑块控制。

 


  然后由“工作表”转移到“仪表板”中。仪表板的名称也有讲究，一旦名称改变，发布在Tableau Server中name的value值也会改变。因此，要保持仪表板的名字和嵌入系统页面中给的链接的名字一致（比如系统中有个标签叫“报表”，那么仪表板的名称也要叫“报表”，点击“报表”之后就会出现对应的仪表板内容），这样在根据名称获取仪表板时才能找到相应的仪表板。

 

二．参数控件的js控制

http://onlinehelp.tableau.com/current/api/js_api/zh-cn/JavaScriptAPI/js_api_ref.htm#changeParameterValueAsync 这里用的就是changeParameterValueAsync()这个函数，这个函数是属于workBook类的，而applyRangeFilterAsync()是属于workSheet类。

类间关系api参考:

http://onlinehelp.tableau.com/current/api/js_api/zh-cn/JavaScriptAPI/js_api_ref.htm

用法大致如下：将名称为“当前日期”的参数控件日期改为2016年1月1日

workbook.changeParameterValueAsync("当前日期", new Date(Date.UTC(2016, 0, 1)));

 

在点击参数栏的字段[当前日期]，有个下拉的箭头，选择“显示参数控件”，会得到下图：

 

             


和筛选器不同的是，参数控件是全局的，转到“仪表板”中也能满足多个工作表受一个控件控制，仪表板名称要求和筛选器相同。

三.部分js代码

 代码将两种方法合并在一起，其中的thisTmp,lastStart,lastEnd,thisStart,thisEnd都是自定义的，我这边用到了moment.js，

var thisTmp = moment().subtract(1,'days');
//昨天

var lastStart = moment().day(-9);  
//上上周五

var lastEnd = moment().day(-2);  
//上周五

var thisStart = moment().subtract(1,'days').startOf('day');       //昨天的0:00

var thisEnd = moment().startOf('day');                      
//今天的0:00

        .......

options = {
hideTabs:true,
onFirstInteractive: function() {
var worksheet;

                viz.getWorkbook().activateSheetAsync(sheetName).then(function(sheet){
               worksheet = sheet;
         })
        .then(function() {

                 //对参数控件中时间的控制，

                        viz.getWorkbook().changeParameterValueAsync(

                                   "当前日期",

                                   new Date(Date.UTC(thisTmp.format("YYYY"),thisTmp.format("MM")-1,thisTmp.format("DD")))

                        );

                        viz.getWorkbook().changeParameterValueAsync(

                                   "去年同期",

                                   new Date(Date.UTC(thisTmp.format("YYYY")-1,thisTmp.format("MM")-1,thisTmp.format("DD")))

                        );

                        

                        

                        //对筛选器中时间的控制                        
                   var sheetsArray = [];
                   for(var i = 0; i < worksheet.getWorksheets().length; i++) {
                   sheetsArray.push(worksheet.getWorksheets()[i].applyRangeFilterAsync("时间范围",{
                     
min : new Date(Date.UTC(lastStart.format("YYYY"),lastStart.format("MM")-1,lastStart.format("DD"))),
                        max : new Date(Date.UTC(lastEnd.format("YYYY"),lastEnd.format("MM")-1,lastEnd.format("DD")))
             
     }));

                                            sheetsArray.push(worksheet.getWorksheets()[i].applyRangeFilterAsync("日期",{
                      min : new Date(Date.UTC(thisStart.format("YYYY"),thisStart.format("MM")-1,thisStart.format("DD"))),
                      max : new Date(Date.UTC(thisEnd.format("YYYY"),thisEnd.format("MM")-1,thisEnd.format("DD")))
                   }));
                   }
                   return sheetsArray;
        })
}

};