Docs Menu
Docs Home
/
Atlas Charts
/ /

iFrame で Charts を埋め込む

項目一覧

  • 前提条件
  • 手順

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

iFrame 内に埋め込まれた Charts は次のいずれかになります。

  • 認証されていない場合は、誰でも表示できます。

  • 検証済み署名で認証されています。

    注意

    検証済み署名による認証は非推奨です。 埋め込み Charts SDKは、複数の認証プロバイダーによる認証を提供します。

1

ダッシュボード ページから、埋め込み可能にするチャートを含むダッシュボードを選択します。

2

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

注意

埋め込みが有効になっているダッシュボード上のグラフは、 Embed Chartオプションが自動的に有効になります。 したがって、埋め込みが有効になっている ダッシュボード内のグラフに対してEmbed chartオプションを選択することはできません。

3

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

4
埋め込み非認証チャート
クリックして拡大します
5
6

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

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

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

7

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

8
  1. 更新間隔によって、データソースからの新しいデータ(存在する場合)でチャートが更新される頻度が決まります。

  2. グラフにはLightまたはDarkの表示テーマを選択できます。

9

iFrame 埋め込みコードには、チャートのベース URL とチャート ID、および設定したオプションが含まれます。

10

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

重要

Using a Verified Signature for authentication is deprecated. 代わりに、チャートを保護する手順については、 Authenticated Embeddingタブを参照してください。

1

Atlas Charts がまだ表示されていない場合は、Atlas UI の [ Charts ] タブをクリックします。

Atlas がプロジェクトにリンクされた Charts のインスタンスを起動します。

2

ダッシュボード ページから、埋め込みを有効にするグラフを含むダッシュボードを選択します。

3

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

4

このチャートが使用するデータソースで外部共有をすでに有効にしている場合は、この手順をスキップします。 データソースで外部共有をまだ有効にしていない場合は、これを有効にできます。 Configure external sharingリンクをクリックします。

5
  1. ダイアログ ボックスでVerified Signature ] タブを選択します。

  2. Enable signed authentication accessOn に切り替えます。

モーダル ウィンドウに表示される HTMLコードは、認証を有効にしてチャートを共有するために必要なパラメータを示しています。 このコードを使用するには、認証されたアクセスを有効にするために、次の手順に進む必要があります。

6

サイドバーの [ Development ] 見出しの下の [ Embeddingをクリックします。

埋め込みページが表示されます。

7

注意

Authentication Settingsページにアクセスするには、プロジェクト オーナーである必要があります。 管理者以外のユーザーでも埋め込みチャートは引き続き使用できますが、プロジェクト オーナーからキーを取得する必要があります。

[Authentication Settings] タブをクリックします。

[ Authentication Settings(認証設定) ] タブが表示されます。

8

新しい埋め込みキーを作成するには、 Generate New Keyボタンをクリックします。 キーを安全な場所に保存します。

警告

新しいキーを生成すると、以前のキーは無効になります。 古いキーを使用する既存の共有チャートがすべて新しいキーを使用するように更新されていることを確認します。

9

認証が有効になっている共有チャートからのデータリクエストに合わせて検証済み署名を生成するには、サーバー側コードが必要です。 検証済み署名は、埋め込みキー、タイムスタンプ、チャートのデータを識別するから HMAC を生成し、ペイロードを作成します。検証された署名は、サーバー側のコードで指定された限られた期間有効です。

検証済み署名の生成方法を示すコード例は、次の言語とプラットフォームで利用できます。

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

戻る

チャートの埋め込み

項目一覧