Javascript API for Tableau

Javascript API for Tableau

本文关键字：Tableau for API Javascript      更新时间：2023-09-26

我有一个带有的tableau工作簿

  • 2张
    • 条形图
    • 饼图
  • 2个仪表板
    • 条形图全屏（称为FULLBAR的表格）
    • 饼图全屏显示（称为FULLPIE的工作表）

现在我正试图将它们加载到一个HTML页面中，该页面带有在面板之间切换的按钮。我遵循了教程，它很好地引入了初始面板（FULLBAR），但面板的切换是我遇到问题的地方。

当点击链接进行切换时，我在控制台中得到了这个错误

Error: Sheet is not found in Workbook

这是我的代码（服务器显然是XXXX'ed out）

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Proof of Concept</title>
        <meta name="description" content="Proof of Concept">
        <meta name="author" content="thisDude">
        <script type="text/javascript" src="http://xxx.xxx.xxx.xxx:xxxx/javascripts/api/tableau-2.0.0.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class='container'>
        <div class='row'>
            <div class='span3 col-xs-6'><img style="height:39px; width:100px;" src="logo.jpg" ></div>
            <h2 class='col-xs-6 span7 pagination-centered'>Proof of Concept</h2>
        </div>
        <div class='row'>
            <h3 class='offset3 span7 pagination-centered' id='sheetName'></h3>
        </div>
        <div class='row'>
            <!-- All of our work will happen here -->
            <!-- Viz located at http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR -->
            <ul id = 'menu' class='nav nav-list offset1 span2'>
                <!-- This is the menu where we will add all of our buttons. -->
                <li class='nav-header'>Switching Views</li>
                <li><a onClick="switchView('FULLBAR')">Bar Chart</a></li>
                <li><a onClick="switchView('FULLPIE')">Pie Chart</a></li>                
            </ul>
            <div id='tableauViz'></div>
            <script>
            </script>

            <!-- This is the end of the section where we will do our work. -->
        </div>
    </div>
</body>
</html>

和我的app.js代码：

window.onload=function() {
    var vizDiv = document.getElementById('viz');
    var vizURL = "http://xxx.xxx.xxx.xxx:xxxx/views/TEST_VIS2/FULLBAR_1";
    var options = {
        width: '100%',
        height: '500px',
        hideToolbar: true,
        hideTabs: true
    };
    viz = new tableauSoftware.Viz (vizDiv, vizURL, options);
};
function switchView(sheetName) {
    workbook = viz.getWorkbook();
    workbook.activateSheetAsync(sheetName);
    console.log(sheetName);
    console.log(workbook + " workbook var");
    console.log(viz.getWorkbook() + " viz.getWorkbook var");
}

找到答案--

我最初在服务器上发布了"将图纸显示为选项卡"选项，取消了选择。我的javascript也使用了hideTabs:true。

这样做会导致JSapi不知道工作表的名称。

通过在发布"将图纸显示为选项卡"期间选择该选项，API能够正确地切换可视化效果。js选项"hideTabs:true"仍然会隐藏视觉选项卡。

我的tableau公共帐户中有三张表。我创建了两个按钮，并将其描述为java脚本文件，如下所示。

function switchView(sheetName) { var workbook = viz.getWorkbook(); workbook.activateSheetAsync（表单名称）；}`单击按钮后不会执行任何操作。

相关文章：