I フレームオプション

項目一覧

更新とデータキャッシュの動作の構成

更新の例
Considerations
表示テーマの指定
表示オプションをカスタマイズ
背景色
ダッシュボードの境界
表示テーマ
I フレームの例
MongoDB ロゴの削除

インラインスタイルのタグを追加し、ダッシュボード URL にクエリパラメーターを追加することで、i フレーム内でダッシュボードオプションを設定できます。インラインスタイルタグを使用すると、高さ、幅、背景色、境界線の幅などの表示オプションを指定できます。クエリパラメーターを使用すると、照合またはダークの表示テーマを指定できます。

更新とデータキャッシュの動作の構成

ダッシュボードを自動的に更新するように設定するには、 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秒ごとに更新されます。
整数ではない、または-1より小さいmaxDataAge値を指定すると、Charts はエラーを返します。

表示テーマの指定

表示テーマを選択するには、 themeクエリパラメータを使用します。

light: ダッシュボードの軸とテキストを最適化して、明るめまたは空白で表示します。
dark: は、ダークまたはブラックのバックグラウンドでの提示用にダッシュボードの軸とテキストを最適化します。

theme値を選択すると、アプリケーションにダッシュボードを埋め込むために使用する iFrame スニペットのみがアップデートされます。 theme値ではダッシュボードは保存されません。ダッシュボードはデフォルトでライトテーマでレンダリングされます。テーマパラメーターを含まない埋め込みダッシュボードも、ライトテーマでレンダリングされます。

注意

lightまたはdarkテーマを選択しても、ダッシュボードデータ要素が使用するカラーパレットは変更されません。すべてのバーとマークは、デフォルトパレットまたはダッシュボード作成者が選択したカスタムパレットを使用して表示されます。

たとえば、ダッシュボードバーを赤色でレンダリングする場合、 darkテーマを選択しても、このバーの色は変更されず、ダークバックグラウンドでより表示されやすくなります。

表示オプションをカスタマイズ

Atlas Charts は、UI からコピーした 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

表示テーマ

i フレームスニペットは、アプリケーションに貼り付けた後、それ内のthemeクエリパラメータの値を変更できます。その場合は、選択したテーマに一致するように IFrame のインラインスタイルのプロパティを調整する必要があります。

表示テーマの例

themeをlightからdarkに変更する場合は、i フレームスニペットのbackgroundプロパティの値を調整して、ダッシュボードをダークバックグラウンドで表示します。

#F1F5F4のデフォルトのlightテーマbackgroundでlightテーマを使用するダッシュボード:

クリックして拡大します

#12212Cのデフォルトのdarkテーマbackgroundでdarkテーマを使用するダッシュボード:

クリックして拡大します

I フレームの例

次の 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>

戻る

ダッシュボード

フィルター

更新とデータ キャッシュの動作の構成