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

文章目录

为什么要进行Tableau 嵌入？
核心代码讲解
HTML 主题设置
调用API方法并与可视化进行交互
加载调用函数initViz（）

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