Lo complicado.DownloadImage Función
En este tutorial, nos centraremos en usar la función DownloadImage () de Plotly.JS, que nos permite descargar una imagen de una trama complentada.
Instalación de trama
El primer paso es asegurarse de tener Plotly.JS instalado y ejecutado en su sistema. Puede incluir el archivo como un CDN o instalarlo a través de NPM.
Para simplificar, incluiremos el paquete Plotly-JS como un CDN. Esto nos permite evitar instalar y descargar nodo.JS y NPM.
Sin embargo, si tiene el nodo instalado, puede ejecutar el siguiente comando para instalar trazado.JS en tu proyecto.
Una vez instalado, podemos seguir adelante y usarlo en nuestros proyectos.
Gráfico de barras básicas
El siguiente paso es preparar la trama que deseamos crear. Para nuestro ejemplo, usaremos un gráfico de barras.
Comience por crear un índice.archivo html. Esto incluirá todo el código para los datos y el tipo de gráficos que deseamos ejecutar.
En el índice.archivo html, agregue el código como se muestra a continuación:
Trama de bar de la trama
Barra
Comenzamos incluyendo el código de boilerplate HTML predeterminado en el ejemplo anterior. Entonces, tenemos el JS de trama como CDN usando la etiqueta de script.
Finalmente, creamos tres elementos HTML para decorar la página. Primero, asegúrese de incluir el DIV con su identificación específica. Plotly usará este elemento div para mostrar la gráfica como se muestra en la trama.función newPlot ().
Entonces podemos abrir el índice.Archivo HTML en nuestro navegador y vea el gráfico como se muestra a continuación:
Tramly downloadImage ()
La función DownloadImage () le permite activar una descarga de imagen de una trama específica.
La función acepta el nombre de la trama que desea descargar, el formato, el ancho, la altura y el nombre de archivo como parámetros.
La sintaxis se puede expresar como se muestra a continuación:
Tramamente.downloadImage (plot_name, formato: 'png', ancho: 800, altura: 600, nombre de archivo: 'newPlot');Siéntase libre de reemplazar los nombres con sus valores objetivo.
En nuestro gráfico de barra de ejemplo proporcionado, podemos usar la función entonces en JavaScript para cargar la función de imagen DownloadImage ().
Tramamente.NewPlot ("Plotly_Div", datos, diseño).luego (función (descargar)Tramamente.downloadImage (descargar,
Formato: 'jpeg',
Altura: 800,
Ancho: 1200,
nombre de archivo: 'trama'
)
);
Una vez que ejecutamos el índice.Archivo HTML, el navegador debe mostrar la imagen y descargar la imagen con los parámetros especificados.
El archivo resultante se muestra a continuación:
La función acepta los siguientes formatos de imagen al exportar una imagen:
- Png
- Jpeg
- Webp
- SVG
- completo
Ejemplo 2
Para descargar una imagen en formato JSON, establezca el formato como "Full-Json" como se muestra:
Tramamente.NewPlot ("Plotly_Div", datos, diseño).luego (función (descargar)Tramamente.downloadImage (descargar,
Formato: 'Full-Json',
Altura: 800,
Ancho: 1200,
nombre de archivo: 'trama'
)
);
El código anterior debe devolver un archivo JSON con todas las propiedades del gráfico especificado.
Conclusión
En este tutorial, cubrimos cómo usar la función downloadImage () en Plotly.JS descargar la imagen de una trama. Se proporcionaron varios ejemplos que mostraron el uso de la tabla de barras básicas antes de usar la función de DownloadImage ().