javascript - 如何响应嵌入式 Tableau javascript api 中的 slider ？

Question

我对 Tableau 和 Javascript 很陌生，但是，我的任务是在网页中创建滑动条以将值输入到 Tableau 报告中，并且报告应该使用react并实时显示在同一页面中。

到目前为止，我已经在页面上创建了 slider ，我已经编写了以下代码来与 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 提供参数的情况下解决问题的一种方法是

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

在数据源中使用它。我希望您指定一个数据源，例如 SQL 或 postgre。如果是，您可以在 where 条件中传递参数值，如下面的屏幕截图所示

设置完这两件事后，您就可以开始使用 slider 通过 tableau URL 参数输入值。

更改 slider 后，为 slider 创建一个 onchange 事件，并使用如下所示的 url 参数将 slider 值传递到 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

这将根据 slider 值加载可视化。