Docs 菜单
Docs 主页
/
Atlas 图表
/ /

使用 iframe 嵌入图表

在此页面上

  • 先决条件
  • 步骤

您可以使用 iframe 将图表嵌入到 Web 应用程序中,并指定高度、宽度、刷新间隔和显示主题等设置。

iframe 中嵌入的图表可以是:

  • 未经身份验证,在这种情况下,任何人都可以查看它们。

  • 使用已验证的签名进行身份验证。

    注意

    使用已验证签名的身份验证已弃用。 Embedding Charts SDK通过多个身份验证提供程序提供身份验证身份验证。

1

从仪表盘页面中,选择包含要设为可嵌入图表的仪表盘。

2

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

注意

如果图表位于已启用嵌入功能的仪表盘上,则会自动启用Embed Chart选项。因此无法在已启用嵌入功能的仪表盘中为图表选择Embed chart选项。

3

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

4
嵌入未经身份验证的图表
点击放大
5
6

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

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

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

7

选择Iframe面板会显示 iframe 嵌入代码,并允许您设置刷新和显示主题选项。

8
  1. 刷新间隔决定了图表使用数据源中的新数据(如果有)进行刷新的频率。

  2. 您可以为图表选择LightDark显示主题。

9

iframe 嵌入代码包含图表的基本 URL 和图表 ID,以及您设置的任何选项。

10

您可以手动编辑 iframe 代码以设置其他几个图表选项,包括高度、宽度和边框半径。 有关图表选项的更多信息,请参阅嵌入式图表选项。

重要

使用已验证签名进行身份验证的功能已弃用。 相反,请参阅Authenticated Embedding标签页以获取有关保护图表的说明。

1

如果尚未显示 Atlas Charts,请单击 Atlas 用户界面中的 Charts 选项卡。

Atlas 发布关联到项目的 Charts 实例。

2

在仪表盘页面中,选择包含要启用嵌入功能的图表的仪表盘。

3

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

4

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

5
  1. 选择对话框中的Verified Signature标签页。

  2. Enable signed authentication access 切换到 On

模式窗口中显示的 HTML代码显示了在启用身份验证的情况下共享图表所需的参数。 要使用此代码,您必须继续执行后续步骤以启用经过身份验证的访问权限。

6

单击侧边栏中Development标题下的Embedding

此时会显示“嵌入”页面。

7

注意

您必须是项目所有者才能访问权限Authentication Settings页面。 作为非管理员用户,您仍然可以使用嵌入式图表,但必须从项目所有者那里获取密钥。

单击 Authentication Settings 标签页。

显示“身份验证设置”标签页。

8

单击Generate New Key按钮以创建新的嵌入密钥。 将密钥存放在安全的地方。

警告

如果生成新密钥,则以前的任何密钥都将失效。 确保所有使用旧密钥的现有共享图表均已更新为使用新密钥。

9

在启用身份验证的情况下,为来自共享图表的数据请求生成经验证的签名需要使用服务器端代码。 经验证的签名通过从嵌入密钥、时间戳和图表中的标识数据生成 HMAC 来创建有效负载。经验证的签名在服务器端代码中指定的有限时间内有效。

演示如何生成已验证签名的代码示例适用于以下语言和平台:

在 iframe 代码准备就绪并附带您设置的任何选项后,您可以将其放在网页中以显示图表。

后退

嵌入一个图表

在此页面上