Docs Menu
Docs Home
/
Atlas Charts
/
埋め込み
/
埋め込み SDK
/
Tutorials

認証されていないチャートの埋め込み

項目一覧

  • 前提条件
  • 手順
  • チャートの非認証埋め込みの有効化
  • チャートを表示するためのウェブアプリの作成
  • Node.js アプリのカスタマイズ

ウェブ アプリケーションにチャートを埋め込むことができ、チャート データを表示するために認証は必要ありません。 埋め込みチャートへのアクセスを制限するには、 認証済み埋め込みチャートのチュートリアル を参照してください。

前提条件

手順

チャートの非認証埋め込みの有効化

非認証埋め込みを有効にして 、チャート ID と Charts ベース URL を生成します。 ウェブ ページにチャートを表示するには、チャート ID と Charts ベース URL が必要です。

1

ダッシュボードを選択します。

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

2

チャートを選択します。

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

注意

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

3

データソースで外部共有を有効にします。

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

4

Unauthenticatedダイアログウィンドウで [0} ] タブを選択します。

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

Enable unauthenticated accessをOn に切り替えます。

6

（ 任意 ）チャートのフィルタリング可能なフィールドを指定します。

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

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

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

7

Javascript SDKパネルを選択します。

8

Charts Base URLとChart ID をコピーします。

Web アプリケーション コードでは、Charts base URL と Charts ID の値が必要です。

チャートを表示するためのウェブアプリの作成

チャートを表示するアプリがすでに存在する場合は、認証されていない埋め込みチャートを追加する準備ができています。 そうでない場合は、残りの手順に進み、新しいアプリを作成します。

MongoDBは、埋め込み SDKMongoDB を使用して非認証の埋め込みチャートを表示する方法を示す事前構築済みの例アプリをGithub Githubリポジトリ に提供しています。

Githubリポジトリ のクローン （すべてのサンプル アプリを取得する場合）。認証されていない例を実行する手順は、 Readme に記載されていますunauthenticated ディレクトリ内のファイルをエクスポートします。アプリはそのままで実行することも、カスタマイズして独自のチャートを使用することもできます。

Node.js アプリのカスタマイズ

編集する必要があるすべての行は、 ~REPLACE~を含むコメントでマークされます。

1

テキスト エディターでファイルindex.js を開きます。

ファイルindex.jsはsrcディレクトリにあります。

2

Charts ベース URL を入力します

既存の Charts base URL を、表示するチャートのベース URL に置き換えます。 Charts ベース URL は埋め込みオプション モーダル ウィンドウに表示されます。 チャートの埋め込みを有効にする方法の詳細な手順については、「 SDK の埋め込み」を参照してください。

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp" // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
});

次のコード スニペットに示すように、埋め込み SDK とインラインJavaScriptを HTML ページに含めることもできます。

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>
3

チャート ID を入力します

既存のチャート ID を、表示するチャートの ID に置き換えます。 チャート ID は、埋め込みオプションのモーダル ウィンドウに表示されます。 チャートの埋め込みを有効にする方法の詳細な手順については、「 SDK の埋め込み」を参照してください。

const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
  height: "700px"
  // Additional options go here
});

アプリをカスタマイズしたら、実行可能です。

戻る

カスタムJSON web tokenプロバイダーを使用した認証済みチャートの埋め込み

次へ

管理