嵌入未经身份验证的图表

选择一个仪表盘。

在Dashboards 页面中，选择包含要设为可嵌入图表的仪表盘。有关导航到仪表盘的说明，请参阅仪表盘。

选择一个图表。

在仪表盘中，单击以访问其嵌入信息。 从下拉菜单中选择Embed chart 。

在数据源上启用外部共享。

如果您已对此图表使用的数据源启用外部共享，请跳过此步骤。 如果您尚未在数据源上启用嵌入，现在可以执行此操作。 单击Configure external sharing链接。

Unauthenticated在对话框窗口中选择 标签页。

点击放大

将 切换为Enable unauthenticated access On。

（可选）指定图表的可筛选字段。

指定图表查看器可以筛选数据的字段。默认情况下，不指定任何字段，这意味着在您明确允许至少一个字段之前，无法筛选图表。

或者，您可以通过选择Allow all fields in the data source used in this chart来指定图表中的所有字段。

要了解有关可筛选字段的更多信息，请参阅指定可筛选字段。

选择Javascript SDK 面板。

复制 Charts Base URL和 Chart ID。

您的 Web 应用程序代码中需要 Charts Base URl 和 Chart ID 值。

在文本编辑器中打开文件index.js 。

文件index.js位于src目录中。

输入您的 Charts 基本 URL

将现有 Charts 基本 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
});

您还可以在 HTML 页面中包含带有内联 Javascript 的嵌入式 SDK，如以下代码片段所示：

<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
});