El SDK de Embedding proporciona el Javascript createChart() método para renderizar una gráfica dentro de una página web. Puede usar opciones para controlar la altura y el ancho de la gráfica, así como el intervalo de actualización y otros aspectos.
Ejemplo
El siguiente ejemplo utiliza el createChart() método con opciones.
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);
Opciones de gráficas incrustadas
El método createChart() toma las siguientes opciones:
Opción | Tipo | Descripción | ¿Requerido? |
|---|---|---|---|
| booleano | Indicador que señala si la gráfica se actualiza automáticamente. Si se omite, las gráficas no se actualizan automáticamente. Usa esta opción con la opción | no |
| string | Color de segundo plano que se aplicará a una gráfica en lugar del segundo plano
Si se omite, el color de fondo será el
| no |
| string | URL base de la gráfica. | Sí |
| string | Identificador único de la gráfica. | Sí |
| Objeto | Pre-filtro para aplicar a la gráfica. Los pre-filtros se ejecutan antes de que comience la ejecución de la query de la gráfica. | no |
| Objeto | filtro para aplicar al gráfico. | no |
| Objeto | Función que devuelve un token JWT codificado por Si se habilita el acceso autenticado, Charts renderiza la vista autenticada de la gráfica solo si Charts puede validar el token utilizando los proveedores de autenticación configurados. Si el token no es válido, Atlas Charts renderizará la gráfica no autenticada si habilitó el acceso no autenticado. De lo contrario, Charts no renderiza la gráfica. Para obtener más información, consulta Incrustar una gráfica autenticada usando un proveedor JWT personalizado. | no |
| Número | Altura de la gráfica. Si se omite, la gráfica adopta por defecto la altura de su contenedor. Si se proporciona un valor sin unidades, la unidad por defecto será píxeles (px). | no |
| Número | Especifica la antigüedad máxima de los datos que se cargarán desde la caché al cargar o actualizar la gráfica. Si se omite, Atlas Charts renderiza la gráfica con datos de la caché si los datos tienen menos de una hora de antigüedad. Si los datos de la caché tienen más de una hora de antigüedad, Charts consulta la fuente de datos para obtener los datos más recientes, actualiza la caché y muestra la gráfica utilizando estos datos. Para aprender cómo Atlas Charts carga datos desde la caché al cargar o actualizar la gráfica según los valores | no |
| Objeto | Especificación de renderizado que indica cómo personalizar una gráfica incrustada. Para obtener una lista de las personalizaciones disponibles, consulte las Opciones de especificación de renderizado. | no |
| booleano | Bandera que indica si se debe mostrar el MongoDB logotipo debajo de la gráfica. Se establece como por defecto en | no |
| string | Tema que se debe usar para la gráfica. Las opciones válidas son:
Se establece por defecto en | no |
| Número | Ancho de la gráfica. Si se omite, la gráfica tomará por defecto el ancho de su contenedor. Si proporciona un valor sin unidades, por defecto será en píxeles (px). | no |
Configuración de gráficas
Después de crear una gráfica, puedes controlar la configuración llamando a los métodos en la instancia de Chart que devuelve ChartsEmbedSDK.createChart({ ... }).
getCustomizableAxes()
Devuelve los ejes de la gráfica para la gráfica incrustada.
setAutoRefresh(boolean)
Especifica si la gráfica se actualiza automáticamente. Si se omite, las gráficas no se actualizan automáticamente.
Utiliza este método junto con el método setMaxDataAge para configurar la frecuencia de actualización de la gráfica.
setPreFilter(object)
Aplica un prefiltro de consulta a la gráfica integrada o gráfica dentro de un tablero integrado. Este método toma un objeto con operadores del query válidos. Añade los campos referenciados en este prefiltro a la lista Allowed filter fields en la ventana modal Embed Chart. Un documento vacío {} significa que omites el prefiltro.
Para obtener más información sobre cómo habilitar la inserción de una gráfica y aplicar prefiltros, consulte los tutoriales sobre inserción.
setFilter(object)
Aplica un filtro de query a la gráfica embebida o a la gráfica dentro de un tablero embebido. Este método toma un objeto con operadores del query válidos. Todos los campos referenciados en este filtro deben agregarse a la lista Allowed filter fields en la ventana modal Embed Chart. Un documento vacío {} es equivalente a no tener filtro.
Para obtener más información sobre cómo habilitar la inserción de una gráfica y aplicar filtros, consulte los Tutoriales de inserción.
setMaxDataAge(number)
Especifica la antigüedad máxima de los datos que se cargarán desde la caché al cargar o actualizar la gráfica. Si se omite, Atlas Charts renderiza la gráfica con datos de la caché si los datos tienen menos de una hora de antigüedad.
Si los datos de la caché tienen más de una hora de antigüedad, Charts consulta la fuente de datos para obtener los datos más recientes, actualiza la caché y muestra la gráfica utilizando estos datos.
Para aprender cómo Atlas Charts carga datos desde la caché al cargar o actualizar la gráfica según los valores setAutoRefresh y setMaxDataAge, consulta Comportamiento de actualización y almacenamiento en caché de datos.
setRenderingSpecOverride(object)
Especifica cómo personalizar una gráfica.
Para obtener una lista de las personalizaciones disponibles, consulte Opciones de Especificación de Renderizado.
setTheme("dark" | "light")
Establece el tema actual de la gráfica integrada. Al configurar el tema en dark, debes asegurarte de que el color de fondo de una gráfica tenga el contraste apropiado para que la información siga siendo visible.
Ejemplo
El siguiente ejemplo configura una instancia de gráfica llamada chart para usar el tema dark y actualizarse cada 60 segundos.
chart.setTheme("dark"); chart.setAutoRefresh(true); chart.setMaxDataAge(60);
Opciones de especificación de renderizado
Puede especificar las siguientes opciones para el objeto renderingSpec:
Nota
Todas las opciones, excepto version, son opcionales.
Opción | Tipo | Descripción | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
ejes | Objeto | Objeto que describe cómo personalizar los ejes de los gráficos. | |||||||||
axes .labelOverride | string | Valor para reemplazar la etiqueta actual de los ejes. Para obtener más información, consulta Anulación de etiquetas. | |||||||||
axes .labelAngle | enum | Ángulo en el que se muestra una etiqueta. El valor puede ser uno de los siguientes: Esto se aplica a todas las gráficas de columnas, área apilada al 100 %, área discreta, línea discreta, combinación agrupada, combinación apilada y mapas de calor. Para obtener más información, consulta Ajustar ángulo de etiqueta del eje X. | |||||||||
axes .logScale | booleano | Indicador que señala si se debe utilizar la escala logarítmica para los valores de datos en una gráfica. Esto solo se aplica a Columnas Agrupadas, Columnas Coloreadas, Barras Agrupadas, Barras Coloreadas, Línea Continua, Línea Discreta, Combinadas Agrupadas y gráficas de Dispersión. Para obtener más información, consulta Escala Logarítmica. | |||||||||
axes .scaleMax | número | falso | Valor máximo para mostrar en la gráfica. Esto solo se aplica a las columnas agrupadas, columnas coloreadas, columnas apiladas, barra agrupada, barra de color, barra apilada, área continua, área discreta, línea continua, línea discreta, dispersión, combo agrupado, combo apilado y gráficas de indicadores. Para obtener más información, consulta Máximos y mínimos. | |||||||||
axes .scaleMin | número | falso | Valor mínimo para mostrar en la gráfica. Esto solo se aplica a las columnas agrupadas, columnas coloreadas, columnas apiladas, barra agrupada, barra de color, barra apilada, área continua, área discreta, línea continua, línea discreta, dispersión, combo agrupado, combo apilado y gráficas de indicadores. Para obtener más información, consulta Máximos y mínimos. | |||||||||
canal | Objeto | Objeto que describe cómo personalizar los canales de los gráficos. | |||||||||
channels .labelOverride | string | Valor para reemplazar la etiqueta del canal actual. Para obtener más información, consulta Anulación de etiqueta de campo. | |||||||||
channels .numberDecimals | Número | Cantidad de decimales a redondear para cada valor o etiqueta de dato numérico. Para obtener más información, consulta los formatos numéricos. | |||||||||
channels .numberMultiplier | Número | Número por el que multiplicar cada dato numérico o etiqueta. Para obtener más información, consulta los formatos numéricos. | |||||||||
channels .numberPrefix | string | string para anteponer a cada valor de datos o etiqueta numérica. Para obtener más información, consulta los formatos numéricos. | |||||||||
channels .numberSuffix | string | string que se añadirá al final de cada valor de dato numérico o etiqueta. Para obtener más información, consulta los formatos numéricos. | |||||||||
channels .numberThousandsSeparators | booleano | Indicador que señala si se deben mostrar comas como separadores de miles para los valores de datos numéricos. Para obtener más información, consulta los formatos numéricos. | |||||||||
channels .plotOnSecondaryAxis | booleano | Indicador que señala si se debe graficar un conjunto de un campo que corresponde a un canal en un eje Y secundario. Esto solo se aplica a las gráficas de área continua, columna agrupada, combinación agrupada, combinación apilada, línea continua y línea discreta. Para obtener más información, consulte Eje y secundario. | |||||||||
channels .wrapText | booleano | Indicador que indica si se debe envolver el texto para Gráficos de Tablas. Para obtener más información, consulte Ajustar texto. | |||||||||
formatoCondicional | Objeto | Un objeto que describe cómo formatear una sección de una gráfica. Para obtener más información, consulta Formato Condicional. | |||||||||
conditionalFormatting .applyToEntireRow | booleano | Indicador que indica si se debe aplicar el formato especificado a toda la fila. | |||||||||
conditionalFormatting .backgroundColor | enum | string | Objeto que indica cómo personalizar el color de segundo plano. El valor puede ser uno de los siguientes:
| |||||||||
conditionalFormatting .conditions | arreglo | Esto se aplica tanto a las reglas condicionales de
| |||||||||
conditionalFormatting .conditions .operator | NumericOperator NumericBinnedOperator StringOperator StringRegexOperator DateOperator DateBinnedOperator | Operador para aplicar a tus Esto aplica para las tablas y las gráficas de números. Para obtener más información sobre los operadores válidos, consulta Operadores de formato condicional. | |||||||||
conditionalFormatting .conditions .targetChannel | string | Columna de la tabla que recibe el color continuo para Esto se aplica a las gráficas de tablas | |||||||||
conditionalFormatting .conditions .targetType | enum | Parte de la gráfica de tabla para aplicar las reglas condicionales El valor puede ser uno de los siguientes: | |||||||||
conditionalFormatting .conditions .value | number string array of strings object | Valor que se aplicará al Esto aplica para las tablas y las gráficas de números. | |||||||||
conditionalFormatting .fontStyle | enum | Fuente a usar para El valor puede ser uno de los siguientes: Esto aplica para las tablas y las gráficas de números. | |||||||||
conditionalFormatting .fontWeight | enum | Peso de fuente para El valor puede ser uno de los siguientes: Esto aplica para las tablas y las gráficas de números. | |||||||||
conditionalFormatting .reverseColor | booleano | Indicador que indica si se debe invertir el color continuo elegido para las reglas condicionales Esto solo se aplica a las gráficas de tabla. | |||||||||
conditionalFormatting .textColor | string | Color de texto para reglas condicionales El valor debe ser una string que se asemeje al modelo de color RGB, al color hexadecimal o al nombre de un color. Si especifica | |||||||||
conditionalFormatting .textDecoration | enum | Decoración de texto para El valor puede ser uno de los siguientes: Esto aplica para las tablas y las gráficas de números. | |||||||||
conditionalFormatting .type | enum | Tipo de reglas condicionales que utiliza tu gráfica. El valor puede ser uno de los siguientes: Las reglas condicionales Las reglas condicionales | |||||||||
Descripción | string | Descripción de la gráfica. | |||||||||
opciones | Objeto | Objeto que describe cómo personalizar las opciones de la gráfica. | |||||||||
options .categoryLabels | booleano | Indicador que señala si se deben mostrar las etiquetas de categoría en una gráfica de dona. Para obtener más información, consulta Mostrar u ocultar etiquetas de categoría. | |||||||||
options .colorPalette | objeto | false | Objeto que describe cómo personalizar la paleta de colores. Para obtener más información, consulte Personalización de la paleta de colores. | |||||||||
options .colorPalette .channels | arreglo | Nombres de los canales para recibir un color personalizado. | |||||||||
options .colorPalette .color | Objeto | Objeto que describe cómo personalizar la paleta de colores. Esto se aplica a todos los tipos de gráficos que pueden tener múltiples campos en el canal de series: todos los gráficos de barras excepto Barras coloreadas, todos los gráficos de columnas excepto Columna coloreada y Candlestick, Combinadas agrupadas, Combinadas apiladas, todos los gráficos de líneas, todos los gráficos de áreas y Donut. | |||||||||
options .colorPalette .marks | arreglo | Valores de campo codificados en el canal de series para recibir un color personalizado. Esto se aplica a todos los tipos de gráficas que pueden tener varias series en un canal. Para los arreglos que contienen los valores | |||||||||
options .colorPalette .reverseColor | booleano | Indicador que señala si se debe invertir el color continuo y constante. | |||||||||
options .colorPalette .type | enum | Tipo de paleta de colores que utiliza tu gráfica. El valor puede ser uno de los siguientes: La paleta de colores La paleta de colores | |||||||||
options .colorPalette .values | arreglo | Valores de color para personalizar los colores de gráficas de series individuales o el | |||||||||
options .labelSize | número | falso | Tamaño para cambiar una etiqueta. El tamaño debe estar entre Para más información, consulta Redimensionar etiquetas. | |||||||||
options .legendPosition | enum | Ubicación para colocar una leyenda en relación con la gráfica. Esto solo se aplica a las gráficas que soportan leyendas. El valor puede ser uno de los siguientes: Para obtener más información, consultá Personalizar leyenda. | |||||||||
options .lineSmoothing | enum | Método que Charts usa para dibujar una línea en una gráfica. El valor puede ser uno de los siguientes: Esto solo se aplica a los gráficos de Área Continua, Área Discreta, Área 100% Apilada, Línea Continua, Línea Discreta, Combo Agrupado y Combo Apilado. Para obtener más información, consulta Líneas suaves. | |||||||||
options .markers | booleano | Indicador que indica si se van a mostrar marcadores de datos visibles que representan puntos de datos individuales. Para obtener más información, consulte Mostrar u ocultar marcadores de datos. | |||||||||
options .textSize | número | falso | Tamaño del texto en una gráfica. Para obtener más información, consulta Redimensionar texto de tabla. | |||||||||
options .totalsColumn | booleano | Bandera que indica si se debe mostrar el total de cada columna. Para aprender más información, consulte Activar totales de fila y columna de la tabla. | |||||||||
options .totalsRow | booleano | Indicador que señala si se debe mostrar el total de cada fila. Para aprender más información, consulte Activar totales de fila y columna de la tabla. | |||||||||
options .valueLabels | enum | Método que Charts utiliza para mostrar el valor exacto de un punto de datos. El valor puede ser uno de los siguientes: Esto se aplica a todas las gráficas de barras, excepto las gráficas de barras apiladas al 100%; todas las gráficas de columnas, excepto las gráficas de columnas apiladas al 100%; Área continua, Área discreta, Área 100% apilada, Línea continua, Línea discreta, Combinación agrupada y gráficas de Combinación apilada. Para obtener más información, consulta Anulación de etiquetas. | |||||||||
título | string | Título de la gráfica. | |||||||||
Versión | Número | Versión de la especificación de renderizado. La primera y actual versión es Este es un campo obligatorio. |
Operadores de formato condicional
La siguiente tabla muestra los operadores disponibles para usar con el formato condicional, el tipo de datos al que se aplican y sus valores posibles.
Operador | Tipo | Values | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
OperadorDateBinned (Operador por fecha agrupada) | Objeto |
El objeto debe tener las siguientes claves: | ||||||||||||
DateOperator | Objeto |
El objeto debe tener las siguientes claves: | ||||||||||||
NumericBinnedOperator | Número |
| ||||||||||||
Operador numérico | Número |
| ||||||||||||
StringOperator | string | arreglo de strings |
| ||||||||||||
StringRegexOperator | Objeto |
El objeto debe tener las siguientes claves: El valor para
|
Ejemplo de Canales
El siguiente ejemplo configura una instancia de gráfica llamada chart con estas opciones:
Utiliza la versión
1de la especificación de renderización.Actualiza el canal de codificación de
xa:No usar comas como separadores de miles.
Empieza todos los valores numéricos con un
$.
Actualiza el canal de codificación
ypara que todos los valores numéricos terminen con un%.Actualiza el canal de codificación de
colora:Redondea todos los valores decimales a dos decimales.
Multiplica todos los valores numéricos por dos.
Utiliza el tipo de paleta de colores
continuouscon el colorrainbowy para invertir el color continuo seleccionado.
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, }, }, });
Ejemplo de formato condicional
El siguiente ejemplo configura una instancia de gráfica llamada chart con estas opciones:
Utiliza la versión
1de la especificación de renderización.Realice el siguiente formato condicional a un
CHANNELdonde el valor sea mayor que200:Utiliza las reglas de formato condicional
'discrete'.Establezca el color de segundo plano en un modelo de color RGB donde el rojo sea 240, el verde 209 y el azul 117.
Establece el color del texto en
red.Establece el estilo de fuente en
'italic'.Decora el texto con
'underline'.
Para la columna
value_series_0:Utiliza la paleta de colores
'continuous'.Establece el color de segundo plano en
redyellowgreen.Invierte el color continuo elegido.
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' }], }], });