El SDK de incrustación proporciona Javascript crearGráfico() Método para representar un gráfico en una página web. Puede usar opciones para controlar la altura y el ancho del gráfico, 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áficos incrustados
El método createChart() toma las siguientes opciones:
Opción | Tipo | Descripción | ¿Obligatorio? |
|---|---|---|---|
| booleano | Marca que indica si el gráfico se actualiza automáticamente. Si se omite, los gráficos no se actualizan automáticamente. Utilice esta opción con la opción | no |
| string | Color de fondo que se aplicará al gráfico en lugar del fondo
Si se omite, el color de fondo predeterminado será el
| no |
| string | URL base del gráfico. | sí |
| string | Identificador único del gráfico. | sí |
| Objeto | Prefiltro para aplicar al gráfico. Los prefiltros se ejecutan antes de que comience la consulta del gráfico. | no |
| Objeto | Filtro para aplicar al gráfico. | no |
| Objeto | Función que devuelve un Si el acceso autenticado está habilitado, Charts muestra la vista del gráfico autenticado solo si Charts puede validar el token utilizando los proveedores de autenticación configurados. Si el token no es válido, Atlas Charts mostrará el gráfico no autenticado si habilitó el acceso no autenticado. De lo contrario, Charts no lo mostrará. Para obtener más información, consulte Incrustar un gráfico autenticado con un proveedor JWT personalizado. | no |
| Número | Altura del gráfico. Si se omite, el gráfico toma la altura de su contenedor por defecto. Si se proporciona un valor sin unidades, la unidad predeterminada es 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 el gráfico. Si se omite, Atlas Charts representa el gráfico con los datos de la caché si estos 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 saber cómo Atlas Charts carga datos desde la memoria caché al cargar o actualizar el gráfico en función de los | no |
| Objeto | Especificación de representación que especifica cómo personalizar un gráfico incrustado. Para obtener una lista de las personalizaciones disponibles,consulte Opciones de especificación de renderizado. | no |
| booleano | Bandera que indica si se debe mostrar la MongoDB Logotipo debajo del gráfico. El valor predeterminado es | no |
| string | Tema para el gráfico. Las opciones válidas son:
Se establece por defecto en | no |
| Número | Ancho de la gráfica. Si se omite, el gráfico toma el ancho predeterminado de su contenedor. Si se proporciona un valor sin unidades, se toma el valor predeterminado en píxeles (px). | no |
Configuración del gráfico
Después de crear un gráfico, puede controlar la configuración del gráfico llamando a los métodos en la instancia Chart devuelta por ChartsEmbedSDK.createChart({ ... }).
getCustomizableAxes()
Devuelve los ejes del gráfico para el gráfico incrustado.
setAutoRefresh(boolean)
Especifica si el gráfico se actualiza automáticamente. Si se omite, los gráficos no se actualizan automáticamente.
Utilice este método con el método setMaxDataAge para configurar la frecuencia con la que se actualiza el gráfico.
setPreFilter(object)
Aplica un prefiltro de consulta al gráfico incrustado o al gráfico dentro de un panel incrustado. Este método toma un objeto con operadores de consulta válidos. Agrega los campos referenciados en este prefiltro a la Allowed filter fields lista en la Embed Chart ventana modal. Un documento vacío {} significa que se omite el prefiltro.
Para obtener más información sobre cómo habilitar la incrustación de un gráfico y aplicar filtros previos, consulte los Tutoriales de incrustació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 incrustación de un gráfico y aplicar filtros, consulte los Tutoriales de incrustación.
setMaxDataAge(number)
Especifica la antigüedad máxima de los datos que se cargarán desde la caché al cargar o actualizar el gráfico. Si se omite, Atlas Charts representa el gráfico con los datos de la caché si estos 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 saber cómo Atlas Charts carga datos desde la memoria caché al cargar o actualizar el gráfico en función de los setAutoRefresh setMaxDataAge valores y, consulte Comportamiento de actualización y almacenamiento en caché de datos.
setRenderingSpecOverride(object)
Especifica cómo personalizar un gráfico.
Para obtener una lista de las personalizaciones disponibles,consulte Opciones de especificación de renderizado.
setTheme("dark" | "light")
Establece el tema actual del gráfico incrustado. Al establecer el tema en dark, debe asegurarse de que el color de fondo del gráfico tenga el contraste adecuado para que la información permanezca visible.
Ejemplo
El siguiente ejemplo configura una instancia de Chart denominada 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 de los ejes actuales. Para obtener más información, consulta Anulación de etiquetas. | |||||||||
axes .labelAngle | enum | Ángulo en el que se mostrará una etiqueta. El valor puede ser uno de los siguientes: Esto se aplica a gráficos de todas las columnas, área apilada al 100%, área discreta, línea discreta, combinado agrupado, combinado apilado y mapa de calor. Para obtener más información, consulte Ajustar el ángulo de la etiqueta del eje X. | |||||||||
axes .logScale | booleano | Bandera que indica si se debe utilizar la escala logorítmica para los valores de datos en un gráfico. Esto solo se aplica a gráficos de columnas agrupadas, columnas de colores, barras agrupadas, barras de colores, líneas continuas, líneas discretas, combinados agrupados y gráficos de dispersión. Para obtener más información, consulte Escala logarítmica. | |||||||||
axes .scaleMax | número | falso | Valor máximo para mostrar en el gráfico. 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, consulte Máx. y Mín. | |||||||||
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, consulte Máx. y Mín. | |||||||||
canales | 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, consulte Anulación de etiqueta de campo. | |||||||||
channels .numberDecimals | Número | Cantidad de decimales para redondear cada valor de datos numéricos o etiqueta. Para obtener más información, consulte Formatos de números. | |||||||||
channels .numberMultiplier | Número | Número por el que multiplicar cada valor de datos numéricos o etiqueta. Para obtener más información, consulte Formatos de números. | |||||||||
channels .numberPrefix | string | Cadena que se antepondrá a cada valor de datos numéricos o etiqueta. Para obtener más información, consulte Formatos de números. | |||||||||
channels .numberSuffix | string | Cadena que se agregará al final de cada valor de datos numéricos o etiqueta. Para obtener más información, consulte Formatos de números. | |||||||||
channels .numberThousandsSeparators | booleano | Bandera que indica si se deben mostrar comas como separadores de miles para valores de datos numéricos. Para obtener más información, consulte Formatos de números. | |||||||||
channels .plotOnSecondaryAxis | booleano | Bandera que indica si se debe trazar un conjunto de campos que corresponden a un canal en un eje Y secundario. Esto solo se aplica a gráficos de área continua, columnas agrupadas, combinados agrupados, combinados apilados, líneas continuas y líneas discretas. Para obtener más información, consulte Eje Y secundario. | |||||||||
channels .wrapText | booleano | Bandera que indica si se debe ajustar el texto para los gráficos de tabla. Para obtener más información, consulte Ajustar texto. | |||||||||
formato condicional | Objeto | Objeto que describe cómo formatear una sección de un gráfico. Para obtener más información, consulte Formato condicional. | |||||||||
conditionalFormatting .applyToEntireRow | booleano | Bandera que indica si se debe aplicar el formato especificado a una fila completa. | |||||||||
conditionalFormatting .backgroundColor | enumeración | cadena | Objeto que indica cómo personalizar el color de fondo. El valor puede ser uno de los siguientes:
| |||||||||
conditionalFormatting .conditions | arreglo | Esto se aplica a las reglas condicionales
| |||||||||
conditionalFormatting .conditions .operator | NumericOperator NumericBinnedOperator StringOperator StringRegexOperator DateOperator DateBinnedOperator | Operador que se aplicará a sus reglas condicionales Esto se aplica a los gráficos de tablas y números. Para obtener más información sobre los operadores válidos, consulta Operadores de formato condicional. | |||||||||
conditionalFormatting .conditions .targetChannel | string | Columna de tabla que recibe el color continuo para las reglas condicionales Esto se aplica a los gráficos de tabla | |||||||||
conditionalFormatting .conditions .targetType | enum | Parte del gráfico 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á a las reglas condicionales Esto se aplica a los gráficos de tablas y números. | |||||||||
conditionalFormatting .fontStyle | enum | Fuente a utilizar para las reglas condicionales El valor puede ser uno de los siguientes: Esto se aplica a los gráficos de tablas y números. | |||||||||
conditionalFormatting .fontWeight | enum | Peso de fuente para reglas condicionales El valor puede ser uno de los siguientes: Esto se aplica a los gráficos de tablas y números. | |||||||||
conditionalFormatting .reverseColor | booleano | Bandera que indica si se debe invertir el color continuo elegido para las reglas condicionales Esto sólo se aplica a los gráficos de tabla. | |||||||||
conditionalFormatting .textColor | string | Color del texto para las reglas condicionales El valor debe ser una cadena similar al modelo de color RGB, un color hexadecimal o el nombre de un color. Si se especifica | |||||||||
conditionalFormatting .textDecoration | enum | Decoración de texto para reglas condicionales El valor puede ser uno de los siguientes: Esto se aplica a los gráficos de tablas y números. | |||||||||
conditionalFormatting .type | enum | Tipo de reglas condicionales que utiliza su gráfico. El valor puede ser uno de los siguientes: Las reglas condicionales Las reglas condicionales | |||||||||
Descripción | string | Descripción del gráfico. | |||||||||
opciones | Objeto | Objeto que describe cómo personalizar las opciones del gráfico. | |||||||||
options .categoryLabels | booleano | Bandera que indica si se deben mostrar las etiquetas de categoría en un gráfico de anillos. Para obtener más información, consulte Mostrar u ocultar etiquetas de categoría. | |||||||||
options .colorPalette | objeto | falso | 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 que recibirán 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 varios campos en el canal de la serie: todos los gráficos de barras excepto los de barras de colores, todos los gráficos de columnas excepto los de columnas de colores y velas, gráficos combinados agrupados, gráficos combinados apilados, todos los gráficos de líneas, todos los gráficos de áreas y de anillos. | |||||||||
options .colorPalette .marks | arreglo | Valores de campo codificados en el canal de la serie para recibir un color personalizado. Esto se aplica a todos los tipos de gráficos que pueden tener múltiples series en un canal. Para las matrices que contienen los valores | |||||||||
options .colorPalette .reverseColor | booleano | Bandera que indica si se debe invertir el color continuo. | |||||||||
options .colorPalette .type | enum | Tipo de paleta de colores que utiliza su gráfico. 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 para gráficos de series individuales o | |||||||||
options .labelSize | número | falso | Tamaño al que se cambia una etiqueta. El tamaño debe estar entre Para obtener más información, consulte Cambiar el tamaño de las 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, consulte Personalizar leyenda. | |||||||||
options .lineSmoothing | enum | Método que utiliza Charts para dibujar una línea en un gráfico. El valor puede ser uno de los siguientes: Esto solo se aplica a gráficos de área continua, área discreta, área apilada al 100%, línea continua, línea discreta, combinado agrupado y combinado apilado. Para obtener más información, consulte 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, consulte Cambiar el tamaño del texto de la tabla. | |||||||||
options .totalsColumn | booleano | Bandera que indica si se debe mostrar la suma total de cada columna. Para obtener más información, consulte Alternar totales de filas y columnas de tabla. | |||||||||
options .totalsRow | booleano | Bandera que indica si se debe mostrar la suma total de cada fila. Para obtener más información, consulte Alternar totales de filas y columnas de tabla. | |||||||||
options .valueLabels | enum | Método que utiliza Charts para mostrar el valor exacto de un punto de datos. El valor puede ser uno de los siguientes: Esto se aplica a todos los gráficos de barras excepto 100% de barras apiladas, todos los gráficos de columnas excepto 100% de columnas apiladas, área continua, área discreta, 100% de área apilada, línea continua, línea discreta, combinado agrupado y combinado apilado. 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 formato condicional, el tipo de datos a los que se aplican y sus posibles valores.
Operador | Tipo | Values | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Operador de agrupación por fechas | Objeto |
El objeto debe tener las siguientes claves: | ||||||||||||
Operador de fecha | Objeto |
El objeto debe tener las siguientes claves: | ||||||||||||
Operador numérico agrupado | Número |
| ||||||||||||
Operador numérico | Número |
| ||||||||||||
StringOperator | cadena | matriz de cadenas |
| ||||||||||||
Operador de expresión regular de cadena | Objeto |
El objeto debe tener las siguientes claves: El valor de
|
Ejemplo de canales
El siguiente ejemplo configura una instancia de Chart denominada chart con estas opciones:
Utilice la versión
1de la especificación de representación.Actualice el canal de codificación
xa:No utilice comas como separador de miles.
Comience todos los valores numéricos con
$.
Actualice el canal de codificación
ypara finalizar todos los valores numéricos con un%.Actualice el canal de codificación
colora:Redondea todos los valores decimales a dos decimales.
Multiplica todos los valores numéricos por dos.
Utilice el tipo de paleta de colores
continuouscon el colorrainbowy para invertir el color continuo elegido.
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 Chart denominada chart con estas opciones:
Utilice la versión
1de la especificación de representación.Realice el siguiente formato condicional a un
CHANNELdonde el valor sea mayor que200:Utilice las reglas de formato condicional
'discrete'.Establezca el color de fondo en un modelo de color RGB donde el rojo es 240, el verde es 209 y el azul es 117.
Establece el color del texto en
red.Establezca el estilo de fuente en
'italic'.Decora el texto con
'underline'.
Para la columna
value_series_0:Utilice la paleta de colores
'continuous'.Establezca el color de fondo 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' }], }], });