嵌入式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()方法采用以下选项：
选项 | 类型 | 说明 | 必需？ |
|---|---|---|---|
| 布尔 | 指示图表是否自动刷新的标志。 如果省略，Atlas Charts不会自动刷新。 将此选项与 | no |
| 字符串 | 应用于图表的背景颜色，而不是
如果省略，背景颜色默认为当前的
| no |
| 字符串 | 图表的基本 URL。 | 是 |
| 字符串 | 图表的唯一标识符。 | 是 |
| 对象 | 要应用图表的预过滤器。 预筛选器在图表查询执行开始之前运行。 | no |
| 对象 | 要应用于图表的筛选器。 | no |
| 对象 | 返回 如果启用了身份验证访问，则仅当 Charts 可以使用配置的身份验证提供者验证令牌时，Charts 才会呈现经过身份验证的图表视图。 如果令牌无效，并且您启用了未经身份验证的访问权限， Atlas Charts会呈现未经身份验证的图表。 否则， Charts不会呈现图表。 要学习；了解更多信息，请参阅使用自定义JSON web token提供程序嵌入经过身份验证的图表。 | no |
| 数字 | 图表的高度。 如果省略，则图表默认为其容器的高度。 如果提供的值没有单位，则单位默认为像素 (px)。 | no |
| 数字 | 指定加载或刷新图表时从缓存加载的数据的最长期限。 如果省略，Atlas Charts 将使用缓存中的数据呈现图表，前提是该数据的历史时间少于一小时。 如果缓存中的数据超过一小时，则 Charts 会向数据源查询最新数据，刷新缓存，并使用此数据呈现图表。 要了解 Atlas Charts 在根据 | no |
| 对象 | 指定如何自定义嵌入式图表的呈现规范。 | no |
| 布尔 | 指示是否在图表下方显示 MongoDB徽标的标志。 默认为 | no |
| 字符串 | no | |
| 数字 | 图表的宽度。 如果省略，则图表默认为其container的宽度。如果提供的值没有单位，则默认为像素 (px)。 | no |
图表配置
创建图表后，您可以通过调用ChartsEmbedSDK.createChart({ ... })返回的Chart实例上的方法来控制图表的配置。
getCustomizableAxes()
返回嵌入式图表的图表轴。
setAutoRefresh(boolean)
指定图表是否自动刷新。 如果省略，Atlas Charts不会自动刷新。
将此方法与setMaxDataAge方法结合使用可配置图表的刷新频率。
setPreFilter(object)
将查询预筛选器应用于嵌入式图表或嵌入式仪表盘盘中的图表。 此方法接受一个带有有效查询运算符的对象。 将此预筛选器引用的字段添加到Embed Chart模式窗口的Allowed filter fields列表中。 空文档{}表示省略预过滤器。
要学习；了解有关启用图表嵌入和应用预筛选器的更多信息，请参阅嵌入教程。
setFilter(object)
将查询筛选器应用于嵌入式图表或嵌入式仪表盘中的图表。 此方法接受一个带有有效查询操作符的对象。此筛选器引用的任何字段都必须添加到Embed Chart模式窗口的Allowed filter fields列表中。 空文档{}相当于没有筛选器。
要学习；了解有关启用图表嵌入和应用筛选器的更多信息，请参阅嵌入教程。
setMaxDataAge(number)
指定加载或刷新图表时从缓存加载的数据的最长期限。 如果省略，Atlas Charts 将使用缓存中的数据呈现图表，前提是该数据的历史时间少于一小时。
如果缓存中的数据超过一小时，则 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之外的所有选项都是可选的。
选项 | 类型 | 说明 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
轴 | 对象 | 描述如何自定义Atlas Charts坐标轴的对象。 | |||||||||
axes .labelOverride | 字符串 | 用于替换当前坐标区标签的值。 要了解更多信息，请参阅标签覆盖。 | |||||||||
axes .labelAngle | 枚举 | 显示标签的角度。 值可以是以下之一： 这适用于所有柱状图、100% 堆叠面积图、面积离散图、线离散图、分组组合图、堆叠组合图和热图。 要了解更多信息，请参阅调整 X 轴标签角度。 | |||||||||
axes .logScale | 布尔 | ||||||||||
axes .scaleMax | 编号 | false | 要在图表上显示的最大值。 这只适用于分组柱形图、彩色柱形图、堆叠柱形图、分组条形图、彩色条形图、堆叠条形图、面积连续图、面积离散图、线连续图、线离散图、散点图、分组组合图、堆叠组合图和仪表盘图。 要了解更多信息，请参阅最大值和最小值。 | |||||||||
axes .scaleMin | 编号 | false | 要在图表上显示的最小值。 这只适用于分组柱形图、彩色柱形图、堆叠柱形图、分组条形图、彩色条形图、堆叠条形图、面积连续图、面积离散图、线连续图、线离散图、散点图、分组组合图、堆叠组合图和仪表盘图。 要了解更多信息，请参阅最大值和最小值。 | |||||||||
渠道 | 对象 | 描述如何自定义Atlas Charts渠道的对象。 | |||||||||
channels .labelOverride | 字符串 | 用于替换当前渠道标签的值。 要了解更多信息，请参阅字段标签覆盖。 | |||||||||
channels .numberDecimals | 数字 | 对每个数值数据值或标签进行四舍五入的小数位数。 要了解更多信息，请参阅数字格式。 | |||||||||
channels .numberMultiplier | 数字 | 要与每个数值数据值或标签相乘的数字。 要了解更多信息，请参阅数字格式。 | |||||||||
channels .numberPrefix | 字符串 | 要添加到每个数值数据值或标签的字符串。 要了解更多信息，请参阅数字格式。 | |||||||||
channels .numberSuffix | 字符串 | 要附加到每个数值数据值或标签末尾的字符串。 要了解更多信息，请参阅数字格式。 | |||||||||
channels .numberThousandsSeparators | 布尔 | 指示是否将逗号显示为数值数据值的千位分隔符的标志。 要了解更多信息，请参阅数字格式。 | |||||||||
channels .plotOnSecondaryAxis | 布尔 | ||||||||||
channels .wrapText | 布尔 | 指示是否为表格Charts文本换行的标志。 要了解更多信息，请参阅自动换行。 | |||||||||
条件格式 | 对象 | 描述如何设置图表某一部分格式的对象。 要了解更多信息，请参阅条件格式。 | |||||||||
conditionalFormatting .applyToEntireRow | 布尔 | 指示是否将指定格式应用于整行的标志。 | |||||||||
conditionalFormatting .backgroundColor | 枚举 |字符串 | 指示如何自定义背景颜色的对象。 值可以是以下值之一：
| |||||||||
conditionalFormatting .conditions | 阵列 | 这适用于
| |||||||||
conditionalFormatting .conditions .operator | NumericOperator NumericBinnedOperator StringOperator StringRegexOperator DateOperator DateBinnedOperator | ||||||||||
conditionalFormatting .conditions .targetChannel | 字符串 | 为 这适用于 | |||||||||
conditionalFormatting .conditions .targetType | 枚举 | 为 值可以是以下之一： | |||||||||
conditionalFormatting .conditions .value | number string array of strings object | 要应用于 这适用于表格图表和数字图表。 | |||||||||
conditionalFormatting .fontStyle | 枚举 | 用于 值可以是以下之一： 这适用于表格图表和数字图表。 | |||||||||
conditionalFormatting .fontWeight | 枚举 |
值可以是以下之一： 这适用于表格图表和数字图表。 | |||||||||
conditionalFormatting .reverseColor | 布尔 | 指示是否为 这仅适用于表格Atlas Charts。 | |||||||||
conditionalFormatting .textColor | 字符串 |
值必须是类似于 RGB 颜色模型、十六进制颜色或颜色名称的字符串。 如果指定 | |||||||||
conditionalFormatting .textDecoration | 枚举 |
值可以是以下之一： 这适用于表格图表和数字图表。 | |||||||||
conditionalFormatting .type | 枚举 | 图表使用的条件规则的类型。 值可以是以下之一：
| |||||||||
描述 | 字符串 | 图表说明。 | |||||||||
选项 | 对象 | 描述如何自定义图表选项的对象。 | |||||||||
options .categoryLabels | 布尔 | 指示是否在环形图中显示类别标签的标志。 要了解更多信息，请参阅显示或隐藏类别标签。 | |||||||||
options .colorPalette | 对象 | false | 描述如何自定义调色板的对象。 要了解更多信息，请参阅调色板自定义。 | |||||||||
options .colorPalette .channels | 阵列 | 接收自定义颜色的渠道名称。 | |||||||||
options .colorPalette .color | 对象 | 描述如何自定义调色板的对象。 这适用于在系列渠道中可以具有多个字段的所有Atlas Charts类型：除彩色条形图之外的所有条形图、除彩色柱状图和 K 线图之外的所有柱形图、分组组合、堆叠组合、所有折线图、所有面积图和环形图。 | |||||||||
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% 堆叠面积图、线连续图、线离散图、分组组合图和堆叠组合图。 要了解更多信息，请参阅标签覆盖。 | |||||||||
标题 | 字符串 | 图表标题。 | |||||||||
版本 | 数字 | 呈现规范的版本。 第一个也是当前版本是 这是必填字段。 |
条件格式化操作符
下表显示了可用于条件格式的操作符、它们适用的数据类型以及可能的值。
Operator | 类型 | Values | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
DateBinnedOperator | 对象 |
该对象必须具有以下键： | ||||||||||||
DateOperator | 对象 |
该对象必须具有以下键： | ||||||||||||
NumericBinnedOperator | 数字 |
| ||||||||||||
NumericOperator | 数字 |
| ||||||||||||
StringOperator | 字符串 |字符串数组 |
| ||||||||||||
StringRegexOperator | 对象 |
该对象必须具有以下键：
|
渠道示例
以下示例使用以下选项配置名为chart的 Chart 实例：
使用
1版本的呈现规范。将
x编码渠道更新为：请勿使用逗号作为千位分隔符。
所有数值均以
$开头。
更新
y渠道，以%结尾所有数值。将
color编码渠道更新为：所有小数值四舍五入到小数点后两位。
将所有数值乘以 2。
使用具有
rainbow颜色的continuous调色板类型，反转所选的连续颜色。
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'条件格式规则。将背景颜色设置为 RGB 颜色模型，其中红色为 240，绿色为 209，蓝色为 117。
将文本颜色设置为
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' }], }], });