Tableau Embedding API V3
Tableau Embedding API V3から<tableau-viz>というWeb Componentを利用できる。このWeb Componentを利用すると、html上シンプルにTableauのVizを埋め込める。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Embedding via Web Component</title>
<!-- Importing the Embedding API Library. -->
<!-- Learn more here:
https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_get.html -->
<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.js"></script>
</head>
<body>
<!-- Defining the div container for the visualization. -->
<div style="width:800px; height:700px;">
<!-- Initialization of the Tableau visualization via web component. See more properties here:
https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html -->
<tableau-viz id="tableauViz" src="https://public.tableau.com/views/RegionalSampleWorkbook/Storms"
toolbar="bottom" hide-tabs>
</tableau-viz>
</div>
</body>
</html>Configure Embedding Objects and Components (tableau.com)
埋め込みViewのサイズ
組み込まれたビューの高さと幅は、以下の順序で決定されます：
<tableau-viz>または<tableau-authoring-viz>コンポーネントに設定された高さと幅の属性、または TableauViz および TableauAuthoringViz オブジェクトの対応するプロパティによって。- 指定されていない場合、ビューのサイズ（幅と高さ）は、囲むHTML要素（例えば
<div>や<body>など）によって指定されたコンテンツエリアに基づいています。 - HTML要素によって指定されたコンテンツエリアのサイズが無効な場合（例えば、height=0の場合）、ビューのデフォルトサイズは幅800ピクセル、高さ600ピクセルです。
Configure Embedding Objects and Components (tableau.com)