El SDK de Embedding proporciona el Javascript createChart() 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 | ¿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. Utilice 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 predeterminado será el
| no |
| string | URL base del gráfico. | 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 la MongoDB Logotipo debajo del gráfico. El valor predeterminado es | 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, 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 de gráficas
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 la gráfica se actualiza automáticamente. Si se omite, las gráficas 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 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 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 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 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 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 | 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, 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, 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. | |||||||||
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 | Cadena que se antepondrá a cada valor de datos numéricos o etiqueta. Para obtener más información, consulta los formatos numéricos. | |||||||||
channels .numberSuffix | string | Cadena que se agregará al final de cada valor de datos numéricos 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 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 | 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 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 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 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 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 del gráfico. | |||||||||
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 | 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 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áficos que pueden tener múltiples 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 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 de gráficas de series individuales o el | |||||||||
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, 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 | Bandera que indica si se debe mostrar la suma 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 todos los gráficos de barras excepto los gráficos de barras apiladas al 100 %, todos los gráficos de columnas excepto los gráficos de columnas apiladas al 100 %, de área continua, de área discreta, de área apilada al 100 %, de línea continua, de línea discreta, combinados agrupados y combinados apilados. 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: | ||||||||||||
Operador de fecha | Objeto |
El objeto debe tener las siguientes claves: | ||||||||||||
NumericBinnedOperator | 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 para
|
Ejemplo de Canales
El siguiente ejemplo configura una instancia de gráfica llamada chart con estas opciones:
Utilice la versión
1de la especificación de representació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:
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 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'.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' }], }], });