チャート URL にインライン スタイルのタグとクエリ パラメーターを追加することで、i フレーム内でチャート オプションを設定できます。 インライン スタイル タグを使用すると、高さ、幅、背景色、境界線の幅などの表示オプションを指定できます。 クエリ パラメーターを使用すると、チャートの更新間隔や、照合またはダークの表示テーマを指定できます。
更新とデータ キャッシュの動作の構成
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 秒ごとに更新されます。整数ではない、または
-1未満のmaxDataAge値を指定すると、エラーが返されます。データソースに検証済み署名が必要な場合は、更新ごとに署名の有効性（有効期限を含む）がチェックされます。署名の有効期限が経過した場合、チャートのレンダリングを続行するには、ホスト ウェブ ページで新しい署名を再生成する必要があります。検証済み署名を使用するコード例については、Github で Atlas Charts 埋め込み例 を参照してください。
例
autoRefreshがtrueの場合、キャッシュ期間は 1 分（maxDataAge=60）、署名の有効期限は 1 時間単位で、グラフは 1 時間ごとに更新されます。 1 時間が経過すると、チャートは表示されなくなり、署名が有効ではないためエラーが表示されます。 チャートのレンダリングを再開するには、ホスト ウェブ ページで新しい署名を再生成する必要があります。
表示テーマの指定
表示テーマを選択するには、 themeクエリ パラメータを使用します。
light: チャート軸とテキストは、明るめのまたは空白の背景での表現に最適化されています。dark: チャート軸とテキストは、ダークまたはブラックのバックグラウンドでの表現に最適化されています。
theme値を選択すると、アプリケーションにチャートを埋め込むために使用する iFrame スニペットのみがアップデートされます。 グラフはtheme値では保存されません。 チャートはデフォルトでライト テーマでレンダリングされます。 テーマ パラメータを含まない埋め込みチャートも、軽量なテーマでレンダリングされます。
注意
lightまたはdarkテーマを選択しても、チャート データ要素が使用するカラー パレットは変更されません。 すべてのバーとマークは、デフォルト パレットまたはチャート作成者が選択したカスタム パレットを使用して表示されます。
たとえば、グラフ バーを赤色でレンダリングする場合、 darkテーマを選択しても、このバーの色は変更されず、ダーク バックグラウンドでより表示されやすくなります。
表示オプションをカスタマイズ
Atlas Charts は、選択したテーマに基づいて埋め込みチャートに背景色とボックス シャットダウンの境界を追加する iFrame スニペットにインライン スタイルのプロパティを追加します。
lightテーマbackground:#FFFFFFdarkテーマbackground:#21313Cborder:noneborder-radius:2pxbox-shadow:0 2px 10px 0 rgba(70, 76, 79, .2)width:640height:480
アプリケーション内での埋め込みチャートの表示方法を変更するには、 インライン スタイルのプロパティの値を変更します。
背景色
backgroundプロパティの値を、backgroundCSSプロパティでサポートされている値に変更して、それにチャートを表示します。詳細 については、MDN Web ドキュメントの「 バックグラウンド 」を参照してください。backgroundプロパティをtransparentに変更すると、透過的な背景を持つチャートが表示され、アプリケーションのバックグラウンドがチャートに表示されるようになります。選択したテーマのデフォルトの背景色を使用するには、
backgroundプロパティを削除します。#FFFFFFlightのテーマ（デフォルト）、または#21313Cdarkテーマの
チャートの境界
グラフの境界をカスタマイズまたは削除するには、次のプロパティを変更または削除します。
borderborder-radiusbox-shadow
表示テーマ
i フレーム スニペットは、アプリケーションに貼り付けた後、それ内の
themeクエリ パラメータの値を変更できます。 その場合は、選択したテーマに一致するように IFrame のインライン スタイルのプロパティを調整していることを確認してください。
例
themeをlightからdarkに変更する場合は、i フレーム スニペットのbackgroundプロパティの値を調整して、グラフをダーク バックグラウンドで表示します。
デフォルトのlightテーマbackgroundと#FFFFFF lightテーマを使用するグラフ:
デフォルトのlightテーマbackgroundと#FFFFFF darkテーマを使用するグラフ:
デフォルトのdarkテーマbackgroundと#21313C 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/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>