Tableau Embedding API V3

更新日:2023.12.17 作成日:2023.12.17

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のサイズ

組み込まれたビューの高さと幅は、以下の順序で決定されます：

  1. <tableau-viz> または <tableau-authoring-viz> コンポーネントに設定された高さと幅の属性、または TableauViz および TableauAuthoringViz オブジェクトの対応するプロパティによって。
  2. 指定されていない場合、ビューのサイズ（幅と高さ）は、囲むHTML要素（例えば <div> や <body> など）によって指定されたコンテンツエリアに基づいています。
  3. HTML要素によって指定されたコンテンツエリアのサイズが無効な場合（例えば、height=0の場合）、ビューのデフォルトサイズは幅800ピクセル、高さ600ピクセルです。

Configure Embedding Objects and Components (tableau.com)

参考