iframe 选项

在此页面上

配置刷新和数据缓存行为

例子
Considerations
指定显示主题
自定义显示选项
背景颜色
图表边框
显示主题
iframe 示例
删除 MongoDB 徽标

您可以通过向图表 URL 添加内联样式标记和查询参数，在 iframe 中设置图表选项。内联样式标签允许您指定高度、宽度、背景颜色和边框宽度等显示选项。查询参数允许您指定图表的刷新间隔以及浅色或深色显示主题。

配置刷新和数据缓存行为

autoRefresh查询参数是一个布尔值，允许您将图表配置为自动刷新。

maxDataAge查询参数是一个整数，允许您：

确定autoRefresh为true时图表刷新的时间间隔。
配置在autoRefresh为false或省略的情况下，加载或手动刷新图表时从缓存加载的数据的最长期限。
要学习；了解Atlas Charts在根据autoRefresh和maxDataAge值加载或刷新图表时如何从缓存加载数据，请参阅刷新和数据缓存行为。

使用Embed Chart对话框的 Unauthenticated标签页上的选项自定义 iframe 代码段中的autoRefresh值。

例子

以下 iframe 嵌入了一个图表，该图表根据autoRefresh=true和maxDataAge=60查询参数的定义每 60 秒自动刷新一次：

<iframe style="border: none;border-radius: 2px;box-shadow: 0 2px
10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="
{charts-host}/embed/charts?id=b3ca720f-4b4a-40b4-a726-e7dc0c49aa1c&
autoRefresh=true&maxDataAge=60"></iframe>

Considerations

最短缓存持续时间为 60 秒。如果autoRefresh为true且指定的maxDataAge值小于 60，则图表每 60 秒刷新一次。
如果指定的maxDataAge值不是整数或小于-1 ，则返回错误。
如果您的数据源需要已验证签名，则在每次刷新时都会检查签名有效性（包括到期日期）。如果签名已过到期日期，则托管网页必须重新生成新签名才能继续呈现图表。有关使用经验证签名的代码示例，请参阅Atlas Charts 嵌入示例在Github 上。
例子
如果autoRefresh为true ，缓存持续时间为一分钟 ( maxDataAge=60 )，签名的到期日为一小时后，图表在一小时内每分钟刷新一次。一小时后，由于签名不再有效，图表将停止运行，并显示错误。主机网页必须重新生成新签名才能恢复呈现图表。

指定显示主题

使用theme查询参数选择显示主题：

light：图表轴和文本针对浅色或白色背景进行了优化。
dark：图表轴和文本针对在深色或黑色背景下的呈现进行了优化。

选择theme值仅更新用于在应用程序中嵌入图表的 iframe 代码段。图表不使用theme值保存。默认情况下，图表使用浅色主题呈现。不包含主题参数的嵌入式Atlas Charts也会使用浅色主题进行呈现。

注意

选择light或dark主题不会更改图表数据元素使用的调色板。所有条形图和标记均使用默认调色板或图表作者选择的自定义调色板显示。

例如，如果您选择将一个图表栏呈现为黑色，则选择dark主题不会更改该栏的颜色以使其在深色背景下更加明显。

自定义显示选项

Atlas Charts 会将内联样式属性添加到您从用户界面复制的 iframe 片段中，从而根据您选择的主题向嵌入式图表添加背景颜色和带有盒阴影的边框：

light 主题background ： #FFFFFF
dark 主题background ： #21313C
border: none
border-radius: 2px
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2)
width: 640
height: 480

更改内联样式属性的值，以更改嵌入式图表在应用程序中的显示方式。

背景颜色

将background属性的值更改为background CSS属性支持的任何值，以根据该属性显示图表。查看背景 Docs有关更多信息，请访问 MDN Web 。
将background属性更改为transparent ，以显示具有透明背景的图表，从而允许应用程序的背景透过图表显示。
删除background属性以使用所选主题的默认背景颜色：
- #FFFFFF 针对light主题（默认），或
- #21313C 为dark主题。

图表边框

修改或删除以下属性以自定义或删除图表边框：
- border
- border-radius
- box-shadow

显示主题

将 iframe 代码段粘贴到应用程序后，您可以更改其中theme查询参数的值。如果这样做，请确保调整 iframe 的内联样式属性以匹配您选择的主题。

例子

如果将theme从light更改为dark ，请调整 iframe 代码段中background属性的值，以在深色背景下显示图表。

使用light主题的图表，默认light主题background为#FFFFFF ：

点击放大

使用dark主题的图表，默认light主题background为#FFFFFF ：

点击放大

使用dark主题的图表，默认dark主题background为#21313C ：

点击放大

iframe 示例

以下 iframe 嵌入了一个具有dark主题的图表，该主题具有默认的dark主题内联样式属性。代码经过格式化以提高可读性。

<iframe style="
background: #21313C;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/charts-crllr/embed/charts?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=dark
"></iframe>

删除 MongoDB 徽标

使用值为false的attribution查询参数可显示不带MongoDB徽标的嵌入式图表。

以下 iframe 片段呈现不显示MongoDB徽标的图表：

<iframe
style="background: #FFFFFF;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/mongodb-charts-twsqq/embed/charts
?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=light&
attribution=false
"></iframe>

后退

SDK

来年

Filter