Question

当前，基于JavaScript，我在网站中嵌入了一个Tableau仪表板，代码如下所示。现在，我想在同一个网站中嵌入2个仪表板（第二个仪表板来自另一个表格发布的Web链接，例如我正在使用的链接），我该怎么做？同时，我需要创建类似“切换”按钮的内容，以便单击时可以切换到不同的仪表板内容。有人可以帮我吗？

当前代码：

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    
    <script type="text/javascript"
        src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <script type="text/javascript">
        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "https://us-east-1.online.tableau.com/t/zuar/views/Regional/GlobalTemperatures",
                options = {
                    hideTabs: true,
                    onFirstInteractive: function () {
                        console.log("Run this code when the viz has finished loading.");
                    }
                };

            var viz = new tableau.Viz(containerDiv, url, options);
            // Create a viz object and embed it in the container div.
        }
    </script>
</head>

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

</html>

Answer 1

您可以使用简单的js切换功能，并在仪表板或您想要的任何内容之间切换。只需将各个div的文本内容替换为仪表板的viz容器即可。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript"
    src="https://public.tableau.com/javascripts/api/tableau-2.min.js"> 
</script>


<script>
function toggle() {
  var x1 = document.getElementById("dashboard1");
  var x2 = document.getElementById("dashboard2");
  var bl = document.getElementById("button1");

  if (x1.style.display === "none") {
    x1.style.display = "block";
    x2.style.display = "none";
    bl.firstChild.data = "To Data B";
  } else {
    x1.style.display = "none";
    x2.style.display = "block";
    bl.firstChild.data = "To Data A";
  }
}

function initialize() {


var containerDiv1 = document.getElementById("dashboard1"),
            url1 = "https://public.tableau.com/views/liveintegration1/Dashboard1",
            options1 = {
                hideTabs: true,
                onFirstInteractive: function () {
                    console.log("Run this code when the viz has finished loading.");
                }
            };

        var viz1 = new tableau.Viz(containerDiv1, url1, options1);
        // Create a viz object and embed it in the container div.


var containerDiv2 = document.getElementById("dashboard2"),
            url2 ="https://public.tableau.com/views/LearnEmbeddedAnalytics/SalesOverviewDashboard",
            options2 = {
                hideTabs: true,
                onFirstInteractive: function () {
                    console.log("Run this code when the viz has finished loading.");
                }
            };

        var viz2 = new tableau.Viz(containerDiv2, url2, options2);
}

</script>

<style>
#dashboard1 {
  border: 1px solid green;
  width:800px; 
  height:700px;
  width: 100%;
  margin-top: 20px;
}
#dashboard2 {
  border: 1px solid blue;
  width:800px; 
  height:700px;
  width: 100%;
  margin-top: 20px;
}
</style>
</head>
<body onload="initialize()">

<button id="button1" onclick="toggle()">To Data B</button>

<div id="dashboard1" style="width:800px; height:700px;"></div>

<div id="dashboard2" style="width:800px; height:700px;"></div>


</body>
</html>

检查页面时，您现在可以看到将iframe导入到空div：

如何在1个网站中嵌入2个Tableau仪表板？

1 个答案: