javascript - Tableau HTML 嵌入在 Chrome 中不起作用

标签 javascript html google-chrome embed tableau-api

我已将 2 个 Tableau 仪表板嵌入到我公司使用的内部网站中。 2 天前添加它们时,我能够在 Chrome 中查看它们。但是,现在页面上只显示一个空白区域。如果我使用 Internet Explorer 8 打开页面,我仍然可以查看嵌入式仪表板。

您对我的嵌入代码为何停止工作有任何想法吗?

我已删除所有 cookies/浏览器历史记录。我能够直接访问仪表板(因此这似乎不是许可问题。)

<script type='text/javascript' src='***TABLEAUWORKBOOKURL***'></script>
<div class='tableauPlaceholder' style='width: 1004px; height: 862px;'>
 <object class='tableauViz' width='1004' height='862' style='display:none;'>
  <param name='host_url' value='https%3A%2F%2Ftableau.***COMPANYNAME***.org%2F' />
  <param name='site_root' value='&#47;t&#47;Sandbox' />
  <param name='name' value='***WORKBOOKNAME***' />
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
 </object>
</div>

谢谢!

最佳答案

希望对您有所帮助。

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>          
            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
            <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/js/jquery-ui-1.10.0.custom.min.js"></script>
            <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
            <script type="text/javascript">
                function initializeViz() {
                 var placeholderDiv = document.getElementById("tableauViz");
                 var url = "http://public.tableausoftware.com/views/WorldIndicators/GDPpercapita";
                 var options = {
                    width: placeholderDiv.offsetWidth,
                    height: placeholderDiv.offsetHeight,
                    hideTabs: true,
                    hideToolbar: true,
                    onFirstInteractive: function () {
                      workbook = viz.getWorkbook();
                      activeSheet = workbook.getActiveSheet();
                    }
                  };
                  viz = new tableauSoftware.Viz(placeholderDiv, url, options);
                  }


function filterSingleValue() {
  activeSheet.applyFilterAsync(
    "Region",
    "The Americas",
    tableauSoftware.FilterUpdateType.REPLACE);
}

                function clearFilters() {
  activeSheet.clearFilterAsync("Region");
  activeSheet.clearFilterAsync("F: GDP per capita (curr $)");
}
            </script>
            <style>
                #tableauViz
                {
                    height: 800px;
                    width: max-content;
                }
            </style>
    </head>
    <body>
        <div id="tableauViz">
                  <p>
                    <button onclick="$(initializeViz);">Run this code</button>
                  </p>
                  <p>
                    <button onclick="$(filterSingleValue);">Filter View</button>
                  </p>
                  <p>
                    <button onclick="$(clearFilters);">Load Default</button>
                  </p>
        </div>
    </body>
</html>

我创建了一个 id 为 tableauViz 的 div,我正在映射 tableau 工作簿及其所需参数,以使用 javascript 加载初始可视化。

这个方法很适合我。

关于javascript - Tableau HTML 嵌入在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26785809/

相关文章:

javascript - 显示/隐藏隐藏的 div 并更改 css

html - 如何使用 Mozilla 浏览器自动打印横向?

javascript - 无法在 Chrome 中获取图像的宽度

javascript - javascript函数和函数隐藏代码的执行顺序?

javascript - 使用 {{render}} 渲染时的循环计数器

javascript - 如何让我的移动 div 通过按下按钮来移动,而不是通过按下 div 本身来移动?

html - 如何使 HTML 元素在同一行开始但以换行符结束?

javascript - 全局 JavaScript 异常处理程序(在 Chrome 中)

css - 如何删除 Chrome 中的选择选项黑色边框?

javascript - meteor :删除帖子,并使用 _uihooks 为其他帖子设置动画