在本页面
您可以使用多种选项来自定义嵌入式图表的外观和行为。选项可用于嵌入Embedding SDK并嵌入iframe的海图图表 。
注意
要从仪表板嵌入图表,必须在数据源上配置嵌入选项。有关说明,请参见 在Web应用程序中嵌入图表。
您可以在iframe中设置图表选项,方法是添加内联样式标签,并将查询参数添加到图表URL。内联样式标签使您可以指定显示选项,例如高度,宽度,背景颜色和边框宽度。查询参数使您可以为图表指定刷新间隔以及明暗显示主题。
使用autorefresh
查询参数可将图表配置为自动刷新。
使用maxDataAge
查询参数可以:
如果autorefresh
为,则确定图表刷新的间隔
true
。
配置在加载或手动刷新图表(如果autorefresh
已false
忽略)时要从缓存加载的数据的最长期限。
要了解当基于autorefresh
和
maxDataAge
值加载或刷新图表时,MongoDB Charts如何从缓存中加载数据,请参阅自动刷新和数据缓存行为。
使用“ 嵌入图表”
对话框中“
未经身份验证”选项卡上的选项,以自定义iframe代码段中的值。autorefresh
以下iframe嵌入了一个图表,该图表根据autorefresh=true
和maxDataAge=30
参数所定义的每30秒自动刷新一次
:
最小缓存持续时间为10秒。如果autorefresh
是,true
并且您指定的maxDataAge
值小于10,则图表每10秒刷新一次。
如果指定的maxDataAge
值不是整数或小于-1
,则返回错误。
如果您的数据源需要“ 已验证签名”,则每次刷新时都会检查签名有效性(包括有效期)。如果签名的到期日期已过,则主机网页必须重新生成新的签名才能继续呈现图表。有关使用经过验证的签名的代码示例,请参阅 GitHub上的MongoDB图表嵌入示例。
例
如果autorefresh
为true
,则缓存持续时间为一分钟(maxDataAge=60
),并且签名的到期日期为一小时,图表将每分钟刷新一小时。一小时后,图表将不再显示,并且由于签名不再有效,将显示错误。宿主网页必须重新生成新的签名,才能继续呈现图表。
使用theme
查询参数选择显示主题:
light
:图表轴和文本已针对浅色或白色背景进行了优化显示。dark
:优化了图表轴和文本,可以在深色或黑色背景下进行显示。选择一个theme
值只会更新用于将图表嵌入到应用程序中的iframe代码段。图表未保存theme
值。默认情况下,图表以浅色主题呈现。不包含主题参数的嵌入式图表也将以浅色主题呈现。
注意
选择light
或 dark
主题不会更改图表数据元素使用的调色板。所有条形和标记都使用图表作者选择的默认调色板或自定义调色板显示。
例如,如果您选择一个图表条以黑色显示,则选择dark
主题不会更改该条的颜色,以使其在深色背景下更加可见。
MongoDB图表将内联样式属性添加到您从UI复制的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属性支持的任何值,以显示针对该属性的图表。有关
更多信息,请参见MDN Web文档中的背景。background
属性以transparent
显示具有透明背景的图表,从而允许您的应用程序背景通过图表显示。background
属性以使用所选主题的默认背景色:#FFFFFF
对于light
主题(默认),或#21313C
为dark
主题。border
border-radius
box-shadow
theme
将iframe代码段粘贴到应用程序中后,您可以更改查询参数的值。如果这样做,请确保调整iframe的内联样式属性以匹配您选择的主题。
例
如果您theme
从更改light
为dark
,请调整background
iframe代码段中的属性值,以在深色背景上显示图表。
使用light
默认light
主题background
为的主题
的图表#FFFFFF
:
使用dark
默认light
主题background
为的主题
的图表#FFFFFF
:
使用dark
默认dark
主题background
为的主题的图表#21313C
:
以下iframe将dark
带有默认dark
主题内联样式属性的主题的图表嵌入。代码经过格式化以提高可读性。
使用attribution
值为的查询参数false
显示不带MongoDB
徽标的嵌入式图表。
以下iframe代码段呈现了不显示MongoDB
徽标的图表:
下表描述了基于autorefresh
or或
autoRefresh
and maxDataAge
值加载或刷新图表时,MongoDB Charts如何从缓存中加载数据。
注意
autoRefresh
根据您是使用Embedding SDK还是iframe嵌入图表,选项的大小写会有所不同:
嵌入方法 | 自动刷新选项 |
---|---|
嵌入SDK | autoRefresh |
iframe | autorefresh |
autorefresh 或autoRefresh 价值 |
maxDataAge 值 |
MongoDB图表行为 |
---|---|---|
省略或 false |
省略 | 图表不会自动刷新。 最初加载或手动刷新图表时,如果数据不到一小时,则MongoDB图表会使用来自缓存的数据来呈现图表。如果来自缓存的数据已存在一个小时以上,则Charts会向数据源查询最新数据,刷新缓存,并使用此数据呈现图表。 |
省略或 false |
-1 |
图表不会自动刷新。 最初加载或手动刷新图表时,MongoDB图表会使用缓存中的数据来呈现图表。如果缓存中没有图表数据,则图表仅向数据源查询最新数据。 |
省略或 false |
0 |
图表不会自动刷新。 最初加载或手动刷新图表时,MongoDB图表会向数据源查询最新数据,并使用此数据呈现图表。图表不从缓存中读取数据。 |
省略或 false |
大于 0 |
图表不会自动刷新。 最初加载或手动刷新图表时,如果数据小于该 |
true |
省略 | 该图表每小时自动刷新。 最初加载,手动刷新或自动刷新图表时,如果数据不到一小时,则MongoDB图表会使用来自缓存的数据来呈现图表。如果来自缓存的数据已存在一个小时以上,则Charts会向数据源查询最新数据,刷新缓存,并使用此数据呈现图表。 |
true |
大于或等于数字 10 |
图表会以 最初加载,手动刷新或自动刷新图表时,如果数据小于该 |
true |
数量少于 10 |
图表会在最少10秒的时间自动刷新。 最初加载,手动刷新或自动刷新图表时,如果数据小于 |