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

我不熟悉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();
}

//全局变量
var度量=[
{
id:“Metric1”，
标签：“5-25比例”，
IsShortermdefault：是的，
isLongTermDefault:false，
表格名称：“P_5-25比率”
},
{
id:“Metric2”，
标签：“现有比率”，
IsShortermDefault:错误，
isLongTermDefault:false，
tableauParamName：“P_现有比率
},
//许多其他指标，每个指标对应一个滑块
];
var-viz1；
变量url1=”https://...somelink.../FINAL_Results";
var vTableauPlaceholderId1=“tableauViz_1”；
var工作簿、活动表、工作簿1；
函数init（）
{
//......
//我在这里添加了一个侦听器函数，所以一旦滑块被更改，新的度量值将被发送到报告中
child1.addEventListener（“更改”，
函数（metricId，即参数名称）{
返回函数（）{
UpdateTableUpParameter（即参数名称、this.value、workbook1）；
}
}（metrics[i].id，viz1，metrics[i].tableauParamName））；
//......
viz1=初始值estaticviz（vTableId1，url1）；
viz1=动态1[0]；
workbook1=dynamics1[1]；
//......
}
//下面是我用来初始化viz的函数
函数initializeViz（tableauViz_占位符ID，url）{
var placeholder div=document.getElementById（tableauViz_placeholder id）；
变量选项={
宽度：占位符div.style.width，
高度：占位符div.style.height，
希德塔布斯：没错，
是的，
onFirstInteractive:函数（）{
工作簿=即getWorkbook（）；
activeSheet=workbook.getActiveSheet（）；
UpdateTableUpParameter（即参数名称、值）；
}
};
viz=newtableau.viz（占位符div、url、选项）；
返回[即工作簿、活动表]；
}
函数updateTableUpParameter（即，参数名称、值、vizWorkbook）{
工作簿=即getWorkbook（）；
vizWorkbook.changeParameterValueAsync（param_name，value）；//不使用javascript提供参数而解决问题的一种方法是

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

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

一旦设置好这两件事，就可以开始使用slider through 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

http:///views//?@studentid=&:embed=y&:tabs=yes&:toolbar=yes&:display\u count=no&:refresh=yes&:customview=no

这将基于滑块值加载可视化。
在不使用javascript提供参数的情况下解决问题的一种方法是

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

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

一旦设置好这两件事，就可以开始使用slider through 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

http:///views//?@studentid=&:embed=y&:tabs=yes&:toolbar=yes&:display\u count=no&:refresh=yes&:customview=no

这将基于滑块值加载可视化