通过javascript API保存和恢复Tableau图的当前视图状态

Saving and restoring current view state of a Tableau graph through javascript API

本文关键字：视图状态 Tableau 恢复 javascript API 保存 通过      更新时间：2023-09-26

问题：

如何通过javascript-API存储并在以后检索Tableau视图的自定义状态？

描述：

我正在一个网站上工作，我们目前允许任何用户将一组Tableau视图协作到类似PowerPoint的在线演示文稿中，以供以后使用。在我们目前的实现中，Tableau图的状态没有存储，因此用户每次都必须在持有演示文稿的同时应用他或她想要的过滤器、选择工作表等。这正是我们现在想要避免的。

最简单的解决方案是存储和检索通过底部栏界面访问的"共享"链接之一；这些链接包含当前视图的状态，但到目前为止，我们还无法做到这一点：首先，由于域问题，我们无法简单地从嵌入代码iframe中获取Share链接；其次，API-方法workbook.getUrl（）似乎不包括当前视图的状态。

我目前正在研究工作簿。rememberCustomViewAsync（名称）和工作薄。showCustomViewAsync[名称]方法，这似乎是一个可能的解决方案。然而，我似乎无法从这两种方法中获得任何合理的结果，因为它们在运行时都会产生模糊的、没有信息的500个错误。

示例文件和错误：

为了更好地说明这个问题，我创建了一个最小的演示（下面的片段），尝试使用上面描述的第二种方法。当在Google Chrome中打开时，两个按钮（"保存状态"answers"检索状态"）都不适用于我，并且在开发者工具中可以看到以下错误（分别是http响应消息和开发者控制台输出）：

Http响应：

<br>
2015-11-11 16&#x3a;14&#x3a;17.916
&#x28;VkNpWQrCQaIAACQo2YYAAAPi,0,0&#x29;

控制台错误：

POST http://public.tableau.com/vizql/w/Book6_426/v/YRKE/save_customized_view/sessions/208A699D34E14708A2268AA10A827C99-0:0 500 (Internal Server Error)

有人知道我如何解决这个问题吗，通过使所提供的代码示例起作用（描述的第二种方法），或者通过任何其他方式？任何帮助都将不胜感激！

PS:此处的代码段模拟器将导致Access Control Allow Origin错误。该文件也已在此处发布

<html>
<head>
  <title>A simple Tableau API demo</title>
  <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <!--script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau_v8.js"></script-->
  <script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js "></script>
</head>
<body>
  <H2>Custom view storage demo</H2>
  <button id="remember-button">
    Remember state 'test'
  </button>
  <button id="retrieve-button">
    Retrieve state 'test'
  </button>
  <div id="viz-placeholder" style="width: 1000px; height: 1000px; display: block;"></div>
  <script>
    
    // Render tableau graph
    function initializeViz() {
      var placeholderDiv = document.getElementById("viz-placeholder");
      var url = "https://public.tableau.com/views/Book6_426/YRKE";
      var options = {
        width: placeholderDiv.offsetWidth,
        height: placeholderDiv.offsetHeight,
        hideTabs: true,
        hideToolbar: true,
        onFirstInteractive: function() {
          workbook = viz.getWorkbook();
          activeSheet = workbook.getActiveSheet();
        }
      };
      viz = new tableau.Viz(placeholderDiv, url, options);
    }
    $(initializeViz)
    
     // Assign and set up button actions for storing and retrieving the custom view
    var customViewName = "test";
    $('#remember-button').click(function() {
      console.log("Remembering: ", customViewName);
      
      // Try to save state, or print error
      viz.getWorkbook().rememberCustomViewAsync(customViewName).otherwise(function(err) {
        console.log("An error occured:");
        console.log(err);
      });
      
    });
    $('#retrieve-button').click(function() {
      console.log("Retrieving: ", customViewName);
      
      // Try to retrieve state, or print error
      viz.getWorkbook().showCustomViewAsync(customViewName).otherwise(function(err) {
        console.log("An error occured:");
        console.log(err);
      });
      
    });
  </script>
</body>
</html>

Okey，所以我一直在联系Tableau客户支持，他们似乎已经发现了这个问题。

显然，javascript-API的某些元素仅适用于Tableau Online和Tableau Server-而不适用于Tableau Public。

换句话说，函数workbook.rememberCustomViewAsync('customViewName')不支持Tableau Public托管的图，例如上面示例中使用的图（https://public.tableau.com/views/...）。

相关文章：