Tableau server Tableau 如何用javaScript嵌入web前端网页?

Posted zgrjddd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Tableau server Tableau 如何用javaScript嵌入web前端网页?相关的知识,希望对你有一定的参考价值。

文章目录

为什么要进行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>

以上是关于Tableau server Tableau 如何用javaScript嵌入web前端网页?的主要内容,如果未能解决你的问题,请参考以下文章

Tableau Server 企业日常问题 24如何更改 Tableau Server 用户会话的超时值?

Tableau实战系列如何在 Google 云平台上安装 Tableau Server

Tableau Server 企业日常问题 22Tableau server如何更改管理员密码?

tableau应用实战案例(五十五)-如何在Centos中安装Tableau Server

Tableau Server 企业日常问题 25如何自定义 Tableau Server 登录页面背景

Tableau Server 企业日常问题 25如何自定义 Tableau Server 登录页面背景