/ /

/ /

Opciones de iframe

Puede configurar las opciones del gráfico dentro de un iframe añadiendo etiquetas de estilo en línea y parámetros de consulta a la URL del gráfico. Las etiquetas de estilo en línea permiten especificar opciones de visualización como la altura, el ancho, el color de fondo y el ancho del borde. Los parámetros de consulta permiten especificar el intervalo de actualización del gráfico, así como un tema de visualización claro u oscuro.

Configurar el comportamiento de actualización y almacenamiento en caché de datos

El autoRefresh El parámetro de consulta es un valor booleano que le permite configurar el gráfico para que se actualice automáticamente.

El parámetro de consulta maxDataAge es un entero que le permite:

Determinar el intervalo en el que se actualiza el gráfico si autoRefresh es true.
Configure la edad máxima de los datos a cargar desde la memoria caché al cargar o actualizar manualmente el gráfico si autoRefresh es false o se omite.
Para saber cómo Atlas Charts carga datos desde la memoria caché al cargar o actualizar el gráfico según los valores autoRefresh y maxDataAge, consulte Comportamiento de actualización y almacenamiento en caché de datos.

Utilice las opciones en el Unauthenticated pestaña en el cuadro de diálogo Embed Chart para personalizar el valor autoRefresh en el fragmento de iframe.

Ejemplo

El siguiente iframe incorpora un gráfico que se actualiza automáticamente cada 60 segundos según lo definido por los parámetros de consulta autoRefresh=true y maxDataAge=60:

<iframe style="border: none;border-radius: 2px;box-shadow: 0 2px
10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="
{charts-host}/embed/charts?id=b3ca720f-4b4a-40b4-a726-e7dc0c49aa1c&
autoRefresh=true&maxDataAge=60"></iframe>

Considerations

La duración mínima de la caché es de 60 segundos. Si autoRefresh es true y se especifica un valor de maxDataAge menor que 60, el gráfico se actualiza cada 60 segundos.
Si especificas un valor maxDataAge que no sea un número entero o menor que -1, se devuelve un error.
Si su fuente de datos requiere una Firma Verificada, su validez (incluida la fecha de caducidad) se verifica en cada actualización. Si la fecha de caducidad de la firma ha pasado, la página web host debe regenerar una nueva firma para continuar renderizando gráficos. Para ver ejemplos de código que utilizan firmas verificadas, consulte Ejemplos de incrustación de gráficos Atlas en GitHub.
Ejemplo
Si autoRefresh es true, la duración de la caché es de un minuto (maxDataAge=60) y la fecha de caducidad de la firma es de una hora, el gráfico se actualiza cada minuto durante una hora. Transcurrida una hora, el gráfico deja de actualizarse y se muestra un error, ya que la firma ya no es válida. La página web del host debe regenerar una nueva firma para reanudar la representación del gráfico.

Especificar un tema de visualización

Utilice el parámetro de consulta theme para seleccionar un tema de visualización:

light:Los ejes y el texto del gráfico están optimizados para su presentación sobre un fondo claro o blanco.
dark:Los ejes y el texto del gráfico están optimizados para su presentación sobre un fondo oscuro o negro.

Elegir un valor theme solo actualiza el fragmento de iframe que se usa para incrustar el gráfico en la aplicación. El gráfico no se guarda con un valor theme. El gráfico se muestra con el tema claro de forma predeterminada. Los gráficos incrustados que no incluyen el parámetro de tema también se muestran con el tema claro.

Nota

Elegir el tema light o dark no cambia la paleta de colores que usan los elementos de datos del gráfico. Todas las barras y marcas se muestran con la paleta predeterminada o la paleta personalizada que eligió el autor del gráfico.

Por ejemplo, si elige que una barra de gráfico se represente en negro, elegir el tema dark no cambia el color de esta barra para hacerla más visible contra un fondo oscuro.

Personalizar las opciones de visualización

Atlas Charts agrega propiedades de estilo en línea al fragmento de iframe que copia desde la interfaz de usuario que agrega un color de fondo y un borde con una sombra de cuadro al gráfico incrustado según el tema que seleccionó:

light tema background: #FFFFFF
dark tema background: #21313C
border: none
border-radius: 2px
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2)
width: 640
height: 480

Cambie los valores de las propiedades de estilo en línea para cambiar cómo se muestra el gráfico incrustado en su aplicación.

Color de fondo

Cambie el valor de la background propiedad a cualquier valor compatible con la background propiedad CSS para mostrar el gráfico. Consulte la documentación web de MDN para obtener más información.
Cambie la propiedad background a transparent para mostrar el gráfico con un fondo transparente, permitiendo que el fondo de su aplicación se muestre a través del gráfico.
Elimina la propiedad background para utilizar el color de fondo predeterminado del tema que elijas:
- #FFFFFF para el tema light (predeterminado), o
- #21313C para el tema dark.

Borde del gráfico

Modifique o elimine las siguientes propiedades para personalizar o eliminar el borde del gráfico:
- border
- border-radius
- box-shadow

Tema de visualización

Puedes cambiar el valor del parámetro de consulta theme en el fragmento de iframe después de pegarlo en tu aplicación. Si lo haces, asegúrate de ajustar las propiedades de estilo en línea del iframe para que coincidan con el tema que elijas.

Ejemplo

Si cambia theme de light a dark, ajuste el valor de la propiedad background en el fragmento de iframe para mostrar el gráfico sobre un fondo oscuro.

Gráfico que utiliza el tema light con el tema predeterminado light background de #FFFFFF:

Gráfico mostrado usando el tema claro con estilo de tema claro.

haga clic para ampliar

Gráfico que utiliza el tema dark con el tema predeterminado light background de #FFFFFF:

Gráfico mostrado usando el tema oscuro con estilo de tema claro.

haga clic para ampliar

Gráfico que utiliza el tema dark con el tema predeterminado dark background de #21313C:

Gráfico mostrado usando el tema oscuro con estilo de tema oscuro.

haga clic para ampliar

Ejemplo de iframe

El siguiente iframe integra un gráfico con el tema dark y las propiedades de estilo en línea predeterminadas del tema dark. El código está formateado para facilitar su lectura.

<iframe style="
background: #21313C;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/charts-crllr/embed/charts?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=dark
"></iframe>

remover el logotipo de MongoDB

Utilice el parámetro de consulta attribution con un valor de false para mostrar su gráfico incrustado sin el logotipo MongoDB.

El siguiente fragmento de iframe representa un gráfico que no muestra el logotipo MongoDB:

<iframe
style="background: #FFFFFF;border: none;border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);"
width="640" height="480" src="
https://charts.mongodb.com/mongodb-charts-twsqq/embed/charts
?id=a1b2c3d4-a1b2-c3d4-9766-47b0b2daaff3&
theme=light&
attribution=false
"></iframe>

Volver

SDK

filtro