/ /

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 consulta maxDataAge es un entero que le permite:

Determinar el intervalo en el que se actualiza el gráfico 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 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 cacheo de datos.

Use 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 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 visualización

Utiliza el parámetro de query 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 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

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.
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.
Elimina la propiedad background para utilizar el color de fondo predeterminado del tema que elijas:
- #FFFFFF para el tema light (por defecto), o
- #21313C para el tema dark.

Borde del gráfico

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 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