埋め込み Charts SDK オプション
項目一覧
埋め込み SDK はJavaScript createChart() を提供します ウェブページ内でチャートをレンダリングするメソッド。オプションを使用して、チャートの高さや幅、更新間隔などを制御できます。
例
次の例では、 オプションを使用して createChart()メソッドを使用します。
const chart = new ChartsEmbedSDK({}).createChart({ baseUrl: 'https://charts.mongodb.com/charts-rendering-spec-project-aygif', chartId: '38de4b38-42ea-422a-b702-a0220c8885e8', height: 300, width: 400, renderingSpec: { version: 1, title: 'Customized chart title', description: 'Customized chart description', axes: { y: { logScale: true }, }, channels: { x: { labelOverride: "New field label" }, y: { numberSuffix: "%" } }, options: { labelSize: 150, lineSmoothing: 'monotone' } } }); await chart.render(embedContainer);
埋め込みチャート オプション
createChart()メソッドは次のオプションを取ります。
オプション | タイプ | 説明 | 必須 |
|---|---|---|---|
| ブール値 | チャートが自動的に更新されるかどうかを示すフラグ。 省略すると、チャートは自動的に更新されません。 ダッシュボードの自動更新頻度を設定するには、このオプションを | no |
| string |
省略した場合、背景色は現在の
| no |
| string | チャートのベース URL。 | はい |
| string | チャートの一意の識別子。 | はい |
| オブジェクト | チャートに適用する事前フィルター。 事前フィルターは、チャートのクエリ実行が開始される前に実行されます。 | no |
| オブジェクト | チャートに適用するフィルター。 | no |
| オブジェクト |
認証済みアクセス が有効になっている場合、Charts は、Charts 構成された認証プロバイダー を使用してトークンを検証できる場合にのみ、認証された ビューをレンダリングします。 トークンが無効な場合、非認証アクセスを有効にしている場合、Atlas Charts は認証されていないチャートをレンダリングします。 そうしないと、Charts ではグラフはレンダリングされません。 詳細については、「カスタムJSON web tokenプロバイダーを使用して認証されたチャートを埋め込む 」を参照してください。 | no |
| 数値 | チャートの高さ。 省略した場合、チャートはデフォルトでコンテナの高さになります。 単位なしで値を指定した場合、単位はデフォルトで ドット（pl） になります。 | no |
| 数値 | チャートをロードまたは更新するときに、キャッシュから読み込むデータの最大経過時間を指定します。 省略した場合、データの経過時間が 1 時間未満の場合、Atlas Charts はキャッシュのデータを使用してチャートをレンダリングします。 キャッシュのデータが 1 時間以上古い場合、Charts はデータソースで最新データをクエリし、キャッシュを更新し、このデータを使用してグラフをレンダリングします。 Atlas Charts が | no |
| オブジェクト | 埋め込みチャートをカスタマイズする方法を指定する レンダリング仕様 。 利用可能なカスタマイズのリストについては、「 レンダリング仕様オプション 」を参照してください。 | no |
| ブール値 | チャートの下に MongoDBロゴを表示するかどうかを示すフラグ。 デフォルトは | no |
| string | 使用するチャートのテーマ。 有効なオプションは次のとおりです。
デフォルトは | no |
| 数値 | チャートの幅。 省略した場合、チャートはデフォルトでコンテナの幅になります。 単位なしで値を指定した場合、デフォルトはドット（expire）になります。 | no |
チャート構成
グラフの作成後、 ChartsEmbedSDK.createChart({ ... })によって返されるChartインスタンスでメソッドを呼び出すことで、グラフの構成を制御できます。
getCustomizableAxes()
埋め込みチャートのチャート軸を返します。
setAutoRefresh(boolean)
チャートを自動的に更新するかどうかを指定します。 省略すると、チャートは自動的に更新されません。
このメソッドをsetMaxDataAgeメソッドとともに使用して、グラフの更新頻度を設定します。
setPreFilter(object)
埋め込みチャート、または 埋め込みダッシュボード 内のチャートに クエリの事前フィルター を適用します。このメソッドは、有効なクエリ演算子を持つオブジェクトを受け取ります。 このプレフィルターで参照されているフィールドをEmbed Chartモーダル ウィンドウのAllowed filter fieldsリストに追加します。 空のドキュメント{}は、事前フィルターを省略することを意味します。
チャートの埋め込みを有効にして事前フィルターを適用する方法の詳細については、埋め込みチュートリアル を参照してください。
setFilter(object)
埋め込みチャート、または 埋め込みダッシュボード 内のチャートに クエリフィルター を適用します。このメソッドは、有効なクエリ演算子を持つオブジェクトを受け取ります。 このフィルターで参照されるフィールドは、 Embed Chartモーダル ウィンドウのAllowed filter fieldsリストに追加する必要があります。 空のドキュメント{}はフィルターなしと同等です。
チャートの埋め込みを有効にしてフィルターを適用する方法の詳細については、埋め込みチュートリアル を参照してください。
setMaxDataAge(number)
チャートをロードまたは更新するときに、キャッシュから読み込むデータの最大経過時間を指定します。 省略した場合、データの経過時間が 1 時間未満の場合、Atlas Charts はキャッシュのデータを使用してチャートをレンダリングします。
キャッシュのデータが 1 時間以上古い場合、Charts はデータソースで最新データをクエリし、キャッシュを更新し、このデータを使用してグラフをレンダリングします。
Atlas Charts がsetAutoRefreshとsetMaxDataAgeの値に基づいてグラフをロードまたは更新するときに、キャッシュからデータをロードする方法については、「更新とデータ キャッシュの動作 」を参照してください。
setRenderingSpecOverride(object)
チャートをカスタマイズする方法を指定します。
利用可能なカスタマイズのリストについては、「レンダリング仕様オプション 」を参照してください。
setTheme("dark" | "light")
埋め込みチャートの現在のテーマを設定します。 テーマをdarkに設定する場合は、情報が引き続き表示されるように、グラフの背景色に適切なコントロールがあることを確認する必要があります。
例
次の例では、 chartという名前の Chart インスタンスをdarkテーマを使用し、60 秒ごとに更新するように構成します。
chart.setTheme("dark"); chart.setAutoRefresh(true); chart.setMaxDataAge(60);
レンダリング仕様オプション
renderingSpecオブジェクトには次のオプションを指定できます。
注意
versionを除くすべてのオプションは任意です。
オプション | タイプ | 説明 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
軸 | オブジェクト | チャートの軸をカスタマイズする方法を説明するオブジェクト。 | |||||||||
axes .labelOverride | string | 現在の軸ラベルを置き換える値。 詳細については、「ラベルの上書き 」を参照してください。 | |||||||||
axes .labelAngle | 列挙 | ラベルを表示する角度。 値は次のいずれかになります。 これは、すべての列、100% 層、層数、行数、グループ化されたコンボ、スタックされたコンボ、およびヒートマップ チャートに適用されます。 詳細については、「 X 軸ラベルの角度の調整 」を参照してください。 | |||||||||
axes .logScale | ブール値 | チャート上のデータ値に対数単位を使用するかどうかを示すフラグ。 これは、グループ化された縦棒グラフ、色付き列、グループ化された棒グラフ、色付きの棒グラフ、行連続、区切り文字、グループ化されたコンボチャート、散布チャートにのみ適用されます。 詳細については、「ログ スケール 」を参照してください。 | |||||||||
axes .scaleMax | 数値 | false | チャートに表示する最大値。 これは、グループ化棒グラフ、色付き列、積み上げ縦棒グラフ、グループ化バー、色付きバー、積み上げ棒グラフ、面積連続、面積離散、行継続、行分散、散布図、グループ化コンボ、積み上げコンボ、ゲージ チャートにのみ適用されます。 詳細については、 Max と Min を参照してください。 | |||||||||
axes .scaleMin | 数値 | false | チャートに表示する最小値。 これは、グループ化棒グラフ、色付き列、積み上げ縦棒グラフ、グループ化バー、色付きバー、積み上げ棒グラフ、面積連続、面積離散、行継続、行分散、散布図、グループ化コンボ、積み上げコンボ、ゲージ チャートにのみ適用されます。 詳細については、 Max と Min を参照してください。 | |||||||||
チャンネル | オブジェクト | Charts チャンネルをカスタマイズする方法を記述するオブジェクト。 | |||||||||
channels .labelOverride | string | 現在のチャンネル ラベルを置き換える値。 詳細については、「フィールド ラベルの上書き 」を参照してください。 | |||||||||
channels .numberDecimals | 数値 | 各数値データ値またはラベルを丸められる小数点の桁数。 詳細については、「数値の形式 」を参照してください。 | |||||||||
channels .numberMultiplier | 数値 | 各数値データ値またはラベルに乗じる数値。 詳細については、「数値の形式 」を参照してください。 | |||||||||
channels .numberPrefix | string | 各数値データ値またはラベルに先頭に追加する string。 詳細については、「数値の形式 」を参照してください。 | |||||||||
channels .numberSuffix | string | 各数値データ値またはラベルの末尾に追加する string。 詳細については、「数値の形式 」を参照してください。 | |||||||||
channels .numberThousandsSeparators | ブール値 | 数値データ値の 300 区切りとしてカンマを表示するかどうかを示すフラグ。 詳細については、「数値の形式 」を参照してください。 | |||||||||
channels .plotOnSecondaryAxis | ブール値 | セカンダリ Y 軸のチャンネルに対応するフィールドをセットでプロットするかどうかを示すフラグ。 これは、連続使用される場合、グループ化された列、グループ化されたコンボ、スタックされたコンボ、行について、連続したチャート、場合にのみ適用されます。 詳細については、「セカンダリ Y 軸 」を参照してください。 | |||||||||
channels .wrapText | ブール値 | ||||||||||
条件付きフォーマット | オブジェクト | チャートのセクションの形式方法を説明するオブジェクト。 詳細については、「条件付き形式 」を参照してください。 | |||||||||
conditionalFormatting .applyToEntireRow | ブール値 | 指定した形式を行全体に適用するかどうかを示すフラグ。 | |||||||||
conditionalFormatting .backgroundColor | 列挙 | string | バックグラウンドの色をカスタマイズする方法を示すオブジェクト。 値は次のいずれかになります。
| |||||||||
conditionalFormatting .conditions | 配列 | これは、
| |||||||||
conditionalFormatting .conditions .operator | NumericOperator NumericBinnedOperator StringOperator StringRegexOperator DateOperator DateBinnedOperator | ||||||||||
conditionalFormatting .conditions .targetChannel | string |
これは、 | |||||||||
conditionalFormatting .conditions .targetType | 列挙 | テーブル チャートの一部を使用して、 値は次のいずれかになります。 | |||||||||
conditionalFormatting .conditions .value | number string array of strings object |
これは、表チャートと数値チャートに適用されます。 | |||||||||
conditionalFormatting .fontStyle | 列挙 |
値は次のいずれかになります。 これは、表チャートと数値チャートに適用されます。 | |||||||||
conditionalFormatting .fontWeight | 列挙 |
値は次のいずれかになります。 これは、表チャートと数値チャートに適用されます。 | |||||||||
conditionalFormatting .reverseColor | ブール値 |
これは表チャートにのみ適用されます。 | |||||||||
conditionalFormatting .textColor | string |
値は、返しstring 。 | |||||||||
conditionalFormatting .textDecoration | 列挙 |
値は次のいずれかになります。 これは、表チャートと数値チャートに適用されます。 | |||||||||
conditionalFormatting .type | 列挙 | チャートが使用する条件ルールのタイプ。 値は次のいずれかになります。
| |||||||||
説明 | string | チャートの説明。 | |||||||||
options | オブジェクト | チャートのオプションをカスタマイズする方法を記述するオブジェクト。 | |||||||||
options .categoryLabels | ブール値 | ドーナツチャートにカテゴリ ラベルを表示するかどうかを示すフラグ。 | |||||||||
options .colorPalette | オブジェクト | false | コード パレットをカスタマイズする方法を説明するオブジェクト。 | |||||||||
options .colorPalette .channels | 配列 | カスタムカラーを受信するチャンネルの名前。 | |||||||||
options .colorPalette .color | オブジェクト | コード パレットをカスタマイズする方法を説明するオブジェクト。 これは、シリーズ チャンネルに複数のフィールドを持つことができるすべてのチャート タイプに適用されます。つまり、すべての棒グラフ（色付きバーを除く）、すべての列チャート（色付き列とコールド グループ、スタック コンボ、スタック コンボを除く）、すべての改行チャート、すべての面チャート、ドーナツが含まれます。 | |||||||||
options .colorPalette .marks | 配列 | カスタム タイプを受信するには、シリーズ チャンネル内のエンコードされたフィールド値を使用します。 これは、チャンネル内に複数のシリーズを持つことができるすべてのチャートタイプに適用されます。 値 | |||||||||
options .colorPalette .reverseColor | ブール値 | 連続連続色を元に戻すかどうかを示すフラグ。 | |||||||||
options .colorPalette .type | 列挙 | チャートが使用するカラー パレットのタイプ。 値は次のいずれかになります。
| |||||||||
options .colorPalette .values | 配列 | 単一系列チャートの色、または複数系列チャートの | |||||||||
options .labelSize | 数値 | false | ラベルを変更するサイズ。 サイズは 詳しくは、「ラベルのサイズ変更 」を参照してください。 | |||||||||
options .legendPosition | 列挙 | チャートに関連して凡例を配置するロケーション。 これは、凡例をサポートするチャートにのみ適用されます。 値は次のいずれかになります。 詳しくは、「凡例のカスタマイズ 」を参照してください。 | |||||||||
options .lineSmoothing | 列挙 | Charts がグラフに線を書くのに使用する方法。 値は次のいずれかになります。 これは、連続した面積、面の分散、100% 層数、行連続、行別個、グループ化されたコンボ、層ごとのコンボチャートにのみ適用されます。 詳しくは、「スムーズな行 」を参照してください。 | |||||||||
options .markers | ブール値 | 個々のデータ ポイントを表す可視データ マークを表示するかどうかを示すフラグ。 | |||||||||
options .textSize | 数値 | false | チャート上のテキストのサイズ。 詳細については、「テーブル テキストのサイズ変更 」を参照してください。 | |||||||||
options .totalsColumn | ブール値 | 各列の合計合計を表示するかどうかを示すフラグ。 | |||||||||
options .totalsRow | ブール値 | 各行の合計合計を表示するかどうかを示すフラグ。 | |||||||||
options .valueLabels | 列挙 | Charts が使用する方法で、データ ポイントの正確な値を表示します。 値は次のいずれかになります。 これは、100% 積み上げ棒グラフを除くすべての棒グラフ、すべての縦棒チャート、100% の積み上げ縦棒グラフ、フィールド連続、フィールドディスク、100% スタック領域、行連続、行分散、グループ化コンボ、スタックコンボチャートに適用されます。 詳細については、「ラベルの上書き 」を参照してください。 | |||||||||
title | string | チャートのタイトル。 | |||||||||
バージョン | 数値 | レンダリング仕様のバージョン。 最初の現在のバージョンは これは必須 フィールドです。 |
条件付きフォーマット演算子
次の表は、条件付き形式で使用できる演算子、それらが適用されるデータ型、およびそれらに指定できる値を示しています。
演算子 | タイプ | Values | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
DateBinnedOperator | オブジェクト |
オブジェクトには次のキーが必要です。 | ||||||||||||
DateOperator | オブジェクト |
オブジェクトには次のキーが必要です。 | ||||||||||||
NumericBinnedOperator | 数値 |
| ||||||||||||
数値演算子 | 数値 |
| ||||||||||||
StringOperator | string |文字列の配列 |
| ||||||||||||
StringRegexOperator | オブジェクト |
オブジェクトには次のキーが必要です。
|
チャンネルの例
次の例では、これらのオプションを使用してchartという名前の Chart インスタンスを構成します。
レンダリング仕様のバージョン
1を使用します。xエンコーディング チャンネルを次のように更新します。3 桁の区切り文字にはカンマは使用 しない でください。
すべての数値を
$で開始します。
yエンコーディング チャンネルを更新して、すべての数値を%で終了します。colorエンコーディング チャンネルを次のように更新します。すべての 10 進数値を小数点 2 桁に丸めます。
すべての数値に 2 を掛けます。
選択した継続的な色を元に戻すには、
continuousのパレット タイプをrainbowの色と使用します。
await chart.setRenderingSpecOverride({ version: 1, channels: { x: { numberThousandsSeparators: false, numberPrefix: '$', }, y: { numberSuffix: '%', }, color: { numberDecimals: 2, numberMultiplier: 2, }, }, options: { colorPalette: { type: 'continuous', color: 'rainbow', reverseColor: true, }, }, });
条件付き形式の例
次の例では、これらのオプションを使用してchartという名前の Chart インスタンスを構成します。
レンダリング仕様のバージョン
1を使用します。値が
200より大きいCHANNELに対して、次の条件付き書込みを実行します。'discrete'条件付き書込みルールを使用します。背景色を 返し、 を 返します。
テキストの色を
redに設定します。フォント スタイルを
'italic'に設定します。テキストを
'underline'で修飾します。
value_series_0列の場合:'continuous'カラー パレットを使用します。背景色を
redyellowgreenに設定します。選択した継続的な色を元に戻します。
await chart.setRenderingSpecOverride({ version: 1, conditionalFormatting: [{ type: 'discrete', backgroundColor: 'rgb(240, 209, 117)', textColor: 'red', fontStyle: 'italic', fontWeight: 'bold', textDecoration: 'underline', applyToEntireRow: false, conditions: [{ operator: 'NUMBER_GREATER_THAN', targetType: 'CHANNEL', targetChannel: 'value', value: 200, }], },{ type: 'continuous', backgroundColor: 'redyellowgreen', reverseColor: true, conditions: [{ targetChannel: 'value_series_0' }], }], });