Question

我对Tableau和Javascript很感兴趣，但是，我的任务是在网页中创建滑动条以将值输入到Tableau报告中，报告应该做出反应并实时显示在同一页面中。

到目前为止，我已经在页面上创建了滑块，我编写了以下代码来与Tableau报告进行通信。

// Global variables

var metrics = [
    {
        id:"Metric1",
        label:"5-25 ratio",
        isShortTermDefault:true,
        isLongTermDefault:false,
        tableauParamName: "P_5-25 ratio"
    },
    {
        id:"Metric2",
        label:"Existing ratio",
        isShortTermDefault:false,
        isLongTermDefault:false,
        tableauParamName: "P_Existing ratio
    },
    // Many other metrics that each of them correspond to one slider
];

var viz1;
var url1 = "https://...somelink.../FINAL_Results";
var vTableauPlaceholderId1 = "tableauViz_1";
var workbook, activeSheet, workbook1;

function init()
{
    //......

    // I've added a listener function here, so once the slider is changed, the new metric value will be sent to the report
    child1.addEventListener("change",
            function(metricId, viz, param_name){
                return function(){
                    updateTableauParameter(viz, param_name, this.value, workbook1);
                }
            }(metrics[i].id, viz1, metrics[i].tableauParamName));

    //......

    viz1 = initializeStaticViz( vTableauPlaceholderId1, url1);
    viz1 = dynamics1[0];
    workbook1 = dynamics1[1];

    //......
}


// Below is the function I used to initialize viz
function initializeViz(tableauViz_placeholderId, url) {
    var placeholderDiv = document.getElementById(tableauViz_placeholderId);

    var options = {
        width:placeholderDiv.style.width,
        height:placeholderDiv.style.height,
        hideTabs: true,
        hideToolbar: true,
        onFirstInteractive: function () {
            workbook = viz.getWorkbook();
            activeSheet = workbook.getActiveSheet();
            updateTableauParameter(viz, param_name, value);
        }
    };
    viz = new tableau.Viz(placeholderDiv, url, options);

    return [viz, workbook, activeSheet];
}

function updateTableauParameter(viz, param_name, value, vizWorkbook){
    workbook = viz.getWorkbook();
    vizWorkbook.changeParameterValueAsync(param_name, value);   // <<------- This line is not executed

//    viz.getWorkbook().changeParameterValueAsync(param_name, value).then(
//        function (){ console.log('Parameter set');}
//    );

    viz.refreshDataAsync();
}

但是，上面的代码卡在函数updateTableauParameter()上，我已经标记了代码失败的确切位置。因此，viz.refreshDataAsync()从未执行过，报告根本没有反应。

你可以帮帮我吗？任何想法都表示赞赏。非常感谢。

Answer 1

在不使用javascript提供参数的情况下解决问题的一种方法是

在tableau中创建一个参数，帮助您获取参数值

在数据源中使用它。我希望你有一个像SQL或postgre这样的数据源。如果是，您可以在where条件中传递参数值，如下面的屏幕截图

设置完这两件事后，您可以使用滑块到tableau URL参数开始输入值。

更改滑块后，为滑块创建一个onchange事件，并使用url参数将滑块值传递给tableau报告，如下所示。

http://<your server address>/views/<workbookname>/<viewname>?@studentid=<slider selected value>&:embed=y&:tabs=yes&:toolbar=yes&:display_count=no&:refresh=yes&:customViews=no

这将根据滑块值加载可视化。

如何响应嵌入式Tableau javascript api中的滑块？

1 个答案: