En este artículo, exploraremos cómo podemos exportar las figuras de la trama en imágenes estáticas utilizando la trama.función js toImage ().
Sin mucho más preámbulo, buceemos.
Tramamente.a la imagen()
Para exportar una trama.js figura en una imagen estática, usamos la función ToImage (). La sintaxis de la función es como se muestra en lo siguiente:
ToImage (Format: Target_image_format, Width: Desired_image_Size_in_Pixels, altura: Deseire_image_size_in_pixels).Como podemos ver, la función tiene una sintaxis relativamente simple y directa.
Ejemplo 1: Plotly.figura de exportación js al archivo PNG estático
Ilustramos cómo podemos exportar una trama.figura js usando la función toiMage (). Para este tutorial, creamos una trama de barra simple como se muestra en el siguiente código:
En el código dado, usamos la trama.JS para crear una trama de bar del uso del navegador. Podemos ejecutar el código y ver la gráfica como se muestra en el siguiente:
Ahora podemos guardar la gráfica de la barra en una imagen estática como se muestra en el siguiente código:
En este ejemplo, usamos la biblioteca D3 para trazar. Comenzamos llamando a la trama.función toImage () y pasar los datos, incluida la función para exportar la imagen. También pasamos el formato en el que deseamos exportar la imagen, en este caso, como archivo PNG.
Finalmente, trazamos la imagen en la etiqueta IMG con la ID de PNG-Export como se especifica en la variable.
Podemos ejecutar el código en el navegador.
Ahora puede usar las herramientas del navegador para exportar la imagen en un archivo en su disco.
Ejemplo 2: Plotly.JS Guardar imagen como JPEG/JPG
También puede exportar una figura como formato JPG/JPEG especificando el parámetro de formato. Un código de ejemplo es como se muestra en el siguiente:
img_jpg.attr ("src", url);El mismo caso se aplica al exportar una imagen como SVG.
img_svg.attr ("src", url);Conclusión
En este tutorial, aprendió cómo puede exportar una figura tramalmente en un formato PNG, JPG o SVG estático utilizando la función ToImage () de Plotly.js. Codificación feliz!!