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

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

Dashboardsページから、埋め込み可能にするチャートを含むダッシュボードを選択します。ダッシュボードに移動する手順については、「ダッシュボード」を参照してください。

チャートを選択します。

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

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

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

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

クリックして拡大します

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

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

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

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

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

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

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

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

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

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

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://unpkg.com/@mongodb-js/charts-embed-dom"></script>

チャート 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
});