【Tableau server 】Tableau 如何用javaScript嵌入web前端网页？

最新推荐文章于 2025-03-17 13:49:19 发布

张国荣家的弟弟

最新推荐文章于 2025-03-17 13:49:19 发布

阅读量3.7k

点赞数 5

分类专栏： Tableau server 【thexing笔记】文章标签： javascript 前端 java Tableau 嵌入

本文链接：https://blog.csdn.net/qq_43674360/article/details/126266610

版权

Tableau server 同时被 2 个专栏收录

29 篇文章

订阅专栏

【thexing笔记】

12 篇文章

订阅专栏

文章目录

为什么要进行Tableau 嵌入？

1.可以将Tableau可视化效果嵌入并集成道自己的web应用程序中，比如大家常见的博客里面嵌入了tableau 可视化，并且可以与各个视图进行交互。
2.可以创建与视图交互的自定义接口，比如导出文件格式，导出图像或者数据的图标设置，更加的符合个人或者组织的品牌形象。
3.当我们把tableau可视化嵌入到我们web应用程序中(这里引用自己的博客)，就可以利用 ppt里面的web viewer 加载项进行ppt展示(可能是因为微软和tableau是竞争关系，不能直接将tableau可视化放入ppt里面)，当然这个主题功能是有人提出来想要将tableau的可视化交互在ppt里面展示，毕竟导出的图片太生硬了，达不到我们想要的交互效果，采用这种方式可以完全实现。

核心代码讲解

导入 Tableau JavaScript API 库
YOU-SERVER：你自己的tableau server名称或者IP
tableau-2.min.js：tableau 的javaScript API库文件()，这个库文件也可以下载在本地的

<script src="https://YOUR-SERVER/javascripts/api/tableau-2.min.js"></script>

例如，假设您要从 Tableau Public 嵌入可视化效果，则首先只需在 Web 应用程序中包含 Tableau Public 上托管的 JavaScript API 库文件即可。在本例中，我们使用的是缩小后的文件。下面显示了库的 URL。

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

可以API访问阅读

HTML 主题设置

在页面创建一个调用的元素：vizContainer ，并且可以设置宽度和高度

调用API方法并与可视化进行交互

要查找 Tableau Server 或 Tableau Cloud 上视图的 URL，请单击工具栏上的“共享”，然后从“共享视图”对话框中选择“复制链接”。对于 Tableau Public，请从浏览器中的地址栏中复制视图的 URL。

<script type="text/javascript">
    function initViz() {
      var containerDiv = document.getElementById("vizContainer"),
          url = "https://public.tableau.com/views/RegionalSampleWorkbook/Storms",
          options = {
            hideTabs: true,
            onFirstInteractive: function () {
            console.log("Run this code when the viz has finished loading.");
            }
          };

      var viz = new tableau.Viz(containerDiv, url, options);
     
      }
</script>

加载调用函数initViz（）

当 HTML 页面在浏览器中加载时，将调用该函数并创建新对象并加载交互式 Tableau 可视化效果。这就是它的全部内容！

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

下面是简单的外观：
在这里插入图片描述
GIF演示：

提示：下面是写好的完整源代码，复制下面全部代码，更改后缀成html即可实现嵌入模板。

<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<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 = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
      options = {
        hideTabs: true,
        onFirstInteractive: function () {
          console.log("Run this code when the viz has finished loading.");
        }
      };

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

</head>

  <body onload="initViz();">
    <header>
        <h1>
<span>嵌入 JavaScript API </span>
</h1>
        <h3>
使用 Tableau 嵌入 API 将 Tableau 可视化集成到您自己的 Web 应用程序中</h3>
    </header>
    <div class="flex">
        <nav>
            <a class="logo" href="#">
                <h2>学习资源</h2>      
            </a>

            <a href="https://mp.weixin.qq.com/s?__biz=MzkxNzM4MDQzMg==&mid=2247486799&idx=1&sn=ee5b0393e8bd693e2743eaae9550200d&chksm=c140c170f63748669e6d68a329aab6a89a055b1f277b1f9ea8ebe005cf77d4d4c1b6232e5184&token=1467488687&lang=zh_CN#rd">
                <i class="fa fa-home fa-lg"></i>
                <span>Tableau 公众号</span>
            </a>

            <a href=" https://www.bilibili.com/video/BV1Ya411L75n/?vd_source=f2877075bd00f799560909c9e0b91a10">
                <i class="fa fa-user fa-lg"></i>
                <span>B站视频</span>
            </a>

            <a href="https://public.tableau.com/app/profile/thexing">
                <i class="fa fa-envelope-o fa-lg"></i>
                <span>Tableau public</span>
            </a>

            <a hrefhttps://blog.csdn.net/qq_43674360/category_11487202.html?spm=1001.2014.3001.5482">
                <i class="fa fa-html5 fa-lg"></i>
                <span>博客</span>
            </a>

            <a href="https://www.tableau.com/zh-cn/developer/learning/tableau-javascript-api">
                <i class="fa fa-css3 fa-lg"></i>
                <span>JavaScript API</span>
            </a>

           
            <a href="https://zhuanlan.zhihu.com/p/420620906">
                <i class="fa fa-question-circle fa-lg"></i>
                <span>关于我们</span>
            </a>
        </nav>
        <div class="contents">
            <h1>Tableau 嵌入API学习</h1>
          
  <div id="vizContainer" style="width:800px; height:600px;"></div>

        </div>
    </div>
    <footer>
        <div class="left">
            Powered by 张国荣家的弟弟提供支持
        </div>
        <div class="right">
            <font _mstmutation="1"><a href="#" _mstmutation="1">家</a>
                <a href="#" _mstmutation="1">关于</a>
                <a href="#" _mstmutation="1">目录</a>
                <a href="#" _mstmutation="1">政策</a>
            </font>
        </div>
    </footer>
    <style>
        header{
          background-color:#ee6664; 
          text-align:center;
          padding:10px 0px; 
        }
        header h1{
          margin:0px;
          font-size:26px; 
          color:#414141; 
          font-weight:1000;
          font-family: 'Acme', sans-serif;
        }
        
        h1 span{
          font-weight:400;
        }
        body{
          font-family: "Open Sans", arial;
          color:#fff;
          background: #666c82;  
          margin:0;
        }
        .flex{
          display:flex;
        }
        nav{
          margin-top:15px;
          background:#DAF7A6;
          height:100%;
          width:250px;
          box-shadow:4px 4px 4px #3C3F35;
          border-radius:5px;
          margin-left:1%;
        
          position:sticky;
          position:-webkit-sticky;
          top:20px;
        }
        
        nav a {
          text-decoration:none;
          color:BLACK;
          font-size: 16px;
          display:block;
          border-bottom:1px solid #03A2A2;  
        }
        .fa {
          position: relative;
          top:12px;
          width: 70px;
          height: 36px;
          text-align: center;
          font-size:20px;
        }
        nav span {
          position:relative;
          top:12px;
        }
        .logo{
          position:relative;
          top:0px;
          padding:1px;
          background-color:#CCF581;
          color:#07145D; 
          font-family: 'Big Shoulders Display', cursive;
          text-align:center;
          line-height: 0.8;
        }
        .logo p{
          color:black;
        }
        nav a:hover{
          color:#fff;
          background-color:#3863F4; 
        }
        .contents{
          background-color:#3E414F;
          padding:15px 30px;
          width:75%;
          margin:15px 3%;
         
          box-shadow:4px 4px 4px #3C3F35;
          border-radius:5px;
        }
        
        .contents h3{
          border-bottom: 1px solid grey;
          padding-bottom:10px;
          font-family: 'Shadows Into Light', cursive;
          margin-bottom: 20px
        }
        
        .contents p{
          text-align:justify;
          margin-bottom:50px;
          line-height:2;
        }
        footer{
          background:#323232;
          padding:10px;
          height:25px;
        
        }
        .left{
          float:left;
          margin-left:3%;
        }
        .right{
          display:inline-block;
          float:right;
          margin-right:3%;
        }
        .right a{
          color:white;
          margin-right:8px;
          text-decoration:none;
        }
        .right a:hover{
          border-bottom: 2px solid white;
        }
    </style>


</body>

</html>