/ /

opciones

Docs Home

/ /

Incrustar una gráfica

Incrustar una gráfica

opciones

Opciones de iframe

Puedes programar las opciones del gráfico dentro de un iframe añadiendo etiquetas de estilo en línea y parámetros de query a la URL del gráfico. Las etiquetas de estilo en línea te permiten especificar opciones de visualización como altura, anchura, color de segundo plano y anchura del borde. Los parámetros de query le permiten especificar un intervalo de actualización para su gráfica, así como un tema de visualización claro u oscuro.

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

La autoRefresh query parameter es un booleano que permite configurar la gráfica para que se actualice automáticamente.

El parámetro de query maxDataAge es un número entero que le permite:

Determine el intervalo en el que la gráfica se actualiza si autoRefresh es true.
Configura la edad máxima de los datos para cargar desde la caché al cargar o actualizar manualmente la gráfica si autoRefresh es false o se omite.
Para aprender cómo Atlas Charts carga datos de la caché al cargar o actualizar la gráfica según los valores de autoRefresh y maxDataAge, consulta Comportamiento de actualización y cacheo de datos.

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

Ejemplo

El siguiente iframe incorpora una gráfica que se actualiza automáticamente cada 60 segundos según lo establecido por los parámetros de query 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 está true y especifica un valor de maxDataAge menor a 60, la gráfica 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 tu fuente de datos requiere una firma verificada, la validez de la firma (incluida la fecha de caducidad) se comprueba 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 representando las gráficas. Para ejemplos de código que utilizan firmas verificadas, consulta Ejemplos de inserción de Atlas Charts 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 dentro de una hora, la gráfica se actualiza cada minuto durante una hora. Una vez transcurrida una hora, la gráfica no se mostrará y se mostrará un error ya que la firma ya no es válida. La página web host debe regenerar una nueva firma para reanudar la renderización de la gráfica.

Especificar un tema de pantalla

Utiliza el parámetro de query theme para seleccionar un tema de visualización:

lightLos ejes y el texto de la gráfica están optimizados para su presentación sobre un segundo plano claro o blanco.
darklos ejes y el texto de la gráfica están optimizados para presentarse en un segundo plano oscuro o negro.

Elegir un valor theme solo actualiza el iframe snippet que se usa para embeber la gráfica en su aplicación. La gráfica no se guarda con una valor theme. La gráfica se renderiza con el tema claro por defecto. Los gráficos incorporados que no incluyen el parámetro de tema también se renderizan con el tema claro.

Nota

Elegir el tema light o dark no cambia la paleta de colores que utilizan los elementos de los datos de la gráfica. Todas las gráficas y marcas se muestran usando la paleta por defecto o la paleta personalizada que el autor del gráfico seleccionó.

Por ejemplo, si se elige una barra de gráfica para renderizar en negro, elegir el tema dark no cambiará el color de esta barra para hacerla más visible en un segundo plano oscuro.

Personalizar las opciones de visualización

Atlas Charts añade propiedades de estilo en línea al snippet de iframe que copies de la Interfaz de Usuario, añadiendo un color de fondo y un borde con sombra de caja a la gráfica incrustada según el tema que hayas seleccionado:

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

Cambia los valores de las propiedades de estilo en línea para modificar la visualización de la gráfica incrustada en tu aplicación.

Color de segundo plano

Cambia el valor de la propiedad background a cualquier valor admitido por la propiedad CSS background para mostrar la gráfica en ella. Consulte segundo plano en los MDN Web Docs para obtener más información.
Cambia la propiedad background a transparent para mostrar la gráfica con un fondo transparente, permitiendo que el fondo de la aplicación se muestre a través de la gráfica.
Remueve la propiedad background para utilizar el color de fondo por defecto del tema que elijas:
- #FFFFFF para el tema light (por defecto), o
- #21313C para el tema dark.

Borde de la gráfica

Modifica o remueve las siguientes propiedades para personalizar o remover el borde de la gráfica:
- border
- border-radius
- box-shadow

Tema de Visualización

Puedes cambiar el valor del parámetro de query theme en el snippet del 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 cambias el theme de light a dark, ajusta el valor de la propiedad background en el **snippet** del iframe para mostrar el gráfico sobre un fondo oscuro.

gráfica con tema light con tema por defecto light background de #FFFFFF:

La gráfica se muestra utilizando el tema claro con estilo de tema claro.

haga clic para ampliar

gráfica con tema dark con tema por defecto light background de #FFFFFF:

Gráfica mostrado con el tema oscuro, pero con el estilo del tema claro.

haga clic para ampliar

gráfica con tema dark con tema por defecto dark background de #21313C:

Gráfica mostrada usando el tema oscuro con estilo de tema oscuro.

haga clic para ampliar

Ejemplo de Iframe

El siguiente iframe inserta una gráfica con el tema dark con las propiedades de estilo en línea del tema por defecto dark. El código está formateado para facilitar la 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

Utiliza el parámetro de consulta attribution con un valor de false para mostrar tu gráfica integrada sin el logotipo de MongoDB.

El siguiente iframe snippet renderiza una gráfica que no muestra el logo de 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