Tableau server Tableau 如何用javaScript嵌入web前端网页？
Posted 张国荣家的弟弟
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