Docs Menu

iFrame でダッシュボードを埋め込み

iFrame を使用して Web アプリケーションにダッシュボードを埋め込み、高さ、幅、更新間隔、表示テーマなどの設定を指定できます。

i フレーム内には、認証を必要としない(非認証)ダッシュボードのみを埋め込むことができます。

1

ダッシュボード ページから、埋め込むダッシュボードを選択します。

2

ダッシュボードから次をクリックします:埋め込み情報にアクセスするには、ダッシュボードの右上にある を参照してください。 ドロップダウン メニューからEmbedを選択します。

3

このダッシュボードが使用するデータソースですでに外部共有を有効にしている場合は、この手順をスキップします。 データソースへの埋め込みをまだ有効にしていない場合は、これで有効にできます。 Configureリンクをクリックします。

4
5
6

ダッシュボード ビューアがデータをフィルタリングできるフィールドを指定します。 デフォルトでは、フィールドは指定されていません。つまり、少なくとも 1 つのフィールドを明示的に許可するまで、ダッシュボードをフィルタリングできません。

または、 Allow all fields in the data source used in this dashboardを選択して、ダッシュボード内のすべてのフィールドを指定することもできます。

フィルタ可能なフィールドの詳細については、「 フィルタ可能なフィールドの指定 」を参照してください。

7

Iframeパネルを選択すると、iFrame 埋め込みコードが表示され、更新オプションと表示オプションを設定できるようになります。

8
  1. 埋め込みダッシュボードをロードまたは更新するときに、キャッシュから読み込むデータの最大経過時間を指定します。

  2. 埋め込みダッシュボードを自動的に更新するかどうかを指定します。

  3. 埋め込みダッシュボードにLightまたはDarkの表示テーマを選択します。

  4. ダッシュボード内のチャートの幅を固定するか、埋め込みダッシュボードに合わせてチャートの幅を増やすかを指定します。

  5. ダッシュボード内のチャートの高さを固定するか、埋め込みダッシュボードに合わせてチャートの高さを増やすかを指定します。

  6. 埋め込みダッシュボードにタイトルと説明を表示するかどうかを指定します。

9

i Frame 埋め込みコードには、ダッシュボードのベース URL と ダッシュボード ID、および設定したオプションが含まれています。

10

iFrame コードを手動で編集して、高さ、幅、境界線半径などの他のいくつかのダッシュボード オプションを設定できます。 詳細については、「埋め込みダッシュボード オプション 」を参照してください。

設定したオプションでiFrame コードが準備できたら、それをウェブ ページに配置してダッシュボードを表示できます。