前端页面嵌入Tableau的可视化报表

    Tableau是很好BI分析工具,它的visualizations也是做得很好,今天就来简单的说说Tableau报表嵌入视图的。

iframe标签设置url嵌入

iframe就是内联外面的页面(width,height就是宽度和高度),iframe更详细的介绍,https://www.w3school.com.cn/tags/tag_iframe.asp
src里面直接带上,其中的源是您在Tableau视图上单击“共享”并随后单击“复制链接”时获得的 URL

<iframe src="http://tabserver/t/Sales/views/MyCoSales/SalesScoreCard
?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe> 

至于这个url里面那些参数的含义,请看一下官方的说明:
https://help.tableau.com/current/pro/desktop/zh-cn/embed_list.htm#URL_params

使用Tableau JavaScript

先引用Tableau前端api,这样页面才知道去处理那些包含了tableau的object的那些div

<script type='text/javascript' src='https://tabserver/javascripts/api/viz_v1.js'>
</script>

<object>对象里面的参数的解释请查看
https://help.tableau.com/current/pro/desktop/zh-cn/embed_list.htm#Object_params

<!--div标签就把它看成是一个容器,来存放Tableau可视化的那个报表,style就是css的样式,这里设置了宽度和高度-->
<div class='tableauPlaceholder' style='width: 1500px; height: 1827px;'>
<!--这里object标签就是用来写参数参数的-->
    <object class='tableauViz' width='1500' height='1827' style='display:none;'>
        <param name='host_url' value='https%3A%2F%2F#######.#####.###.####%2F' /> 
        <param name='embed_code_version' value='3' />
        <param name='site_root' value='&#47;t&#47;Aftersales' />
        <param name='name' value='UserReport&#47;DetailReport' />
        <param name='tabs' value='no' /><param name='toolbar' value='yes' />
        <param name='showAppBanner' value='false' /><param name='filter' value='iframeSizedToWindow=true' />
    </object>
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容