Tableau 中的动态参数答案

【问题标题】：Dynamic Parameter in TableauTableau 中的动态参数
【发布时间】：2017-09-16 04:07:36
【问题描述】：

所以我的印象是，使用 html 中的 JS，您可以在 Tableau 中做一个动态参数。这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://public.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script>
<script>
$(function() {
    var url  = 'points to dashboard url';
    var vizOptions = {
        showTabs           : true,
        hideToolbar        : true,
        width              : "420px",
        height             : "420px"
    };

    currentViz = new tableauSoftware.Viz(document.getElementById('viz'), url, vizOptions);
 currentViz.addEventListener(tableauSoftware.TableauEventName.FILTER_CHANGE, onFilterChange);
});


function onFilterChange(e)
{
if (e.getFieldName() == 'Department') {
    e.getFilterAsync().then(function(filter) {
        var values = filter.getAppliedValues();
        var value = values[0]['value'];

        // Value of the parameter if "All" is selected in the filter.
        if (values.length > 1) {
            value = 'All';
        }

        currentViz.getWorkbook().changeParameterValueAsync('Parameter1', value);
    });
}
}

我从https://www.interworks.com/blog/daustin/2015/12/17/dynamic-parameters-tableau 获得的这段代码看起来很即插即用。但是，我的参数结果没有改变。注意，可能的原因是参数实际上是整数和列表，与教程不同。

对这个问题有任何见解吗？

【问题讨论】：

标签： javascript tableau-api

【解决方案1】：

我也从 interworks 中发现了该链接，但遇到了一些问题。我能够利用他们的一些代码来使用动态参数。在下面的代码中，使用您的服务器更新 url，指向您的工作簿，以及工作簿中使用的参数和过滤器。我对 html 和 javascript 的了解很少，因此代码可能不漂亮或不高效，但它确实对我有用。如果您遇到任何问题，请告诉我。

注意 - 为了使用 Tableau Javascript API，工作簿需要位于 tableau 服务器上。

<!DOCTYPE html>
<html>

<head>
<title>Prototype</title>
<script type="text/javascript" src="https://yourserver/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var viz, containerDiv
    function initViz() {
        containerDiv = document.getElementById("vizContainer"),
            url = "https://yourserver/views/yourworkbook/yourdashboard",
            options = {
                    onFirstInteractive: function () {
                    console.log("Run this code when the viz has finished loading.");
                    mainWorkbook = viz.getWorkbook();
                }
            }; // end options

        // Create a viz object and embed it in the container div.
        viz = new tableau.Viz(containerDiv, url, options);
        viz.addEventListener(tableauSoftware.TableauEventName.FILTER_CHANGE, function(e){
          if (e.getFieldName() == 'Filter1'){
            e.getFilterAsync().then(function(filter) {
              var values = filter.getAppliedValues();
              var value = values[0]['value'];
              // Value of the parameter if "All" is selected in the filter.
              if (values.length > 1) {
                  value = 'All';
              }
              viz.getWorkbook().changeParameterValueAsync('Parameter1', value);
            });
          } // end if statement
      }); // end event listener
    } // end initViz
</script>

<body onload="initViz();">
<div id="vizContainer" style="width:800px; height:700px;"></div>

</body>

</html>

【讨论】：

第一行 <script> 更新到您的画面服务器。 containerDiv 下的 url 行更新为指向 tableau 服务器上的工作簿。将“Filter1”和“Parameter1”更新为您的过滤器和参数的名称。