iframe 选项

在此页面上

配置刷新和数据缓存行为

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

您可以通过添加内联样式标签并将查询参数添加到仪表盘 URL 来在 iframe 中设置仪表盘选项。内联样式标签允许您指定高度、宽度、背景颜色和边框宽度等显示选项。查询参数允许您指定浅色或深色显示主题。

配置刷新和数据缓存行为

使用 autoRefresh查询参数将仪表盘配置为自动刷新。

使用maxDataAge查询参数：

确定当autoRefresh为true时仪表盘刷新的时间间隔。
配置如果autoRefresh为false或省略时，加载或手动刷新仪表盘时从缓存加载的数据的最长期限。

要学习；了解Atlas Charts在加载或刷新基于autoRefresh和maxDataAge值的仪表盘时如何从缓存加载数据，请参阅刷新和数据缓存行为。

使用Embed dashboard对话框的 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/dashboards?id=b3ca720f-4b4a-40b4-a726-e7dc0c49aa1c&
autoRefresh=true&maxDataAge=60"></iframe>

Considerations

最短缓存持续时间为 60 秒。如果autoRefresh为true ，并且您指定了小于60的maxDataAge值，则仪表盘每60秒刷新一次。
如果您指定的maxDataAge值不是整数或小于-1 ，Charts 将返回错误。

指定显示主题

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

light：优化仪表盘坐标轴和文本，以便在浅色或白色背景下呈现。
dark：优化仪表盘坐标轴和文本，以便在深色或黑色背景下呈现。

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

注意

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

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

自定义显示选项

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

light 主题background ： #F1F5F4
dark 主题background ： #12212C
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属性以使用所选主题的默认背景颜色：
#F1F5F4 针对light主题（默认），或
#12212C 为dark主题。

仪表盘边框

修改或删除以下属性，以自定义或删除仪表盘边框：

border
border-radius
box-shadow

显示主题

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

显示主题示例

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

使用light主题的仪表盘，默认light主题background为#F1F5F4 ：

点击放大

使用dark主题的仪表盘，默认dark主题background为#12212C ：

点击放大

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/dashboards?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/dashboards
?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=light&
attribution=false
"></iframe>

后退

仪表板

来年

Filter