O plotly é uma excelente ferramenta de plotagem que suporta de forma abrangente as várias parcelas e usa casos. Além disso, suporta idiomas significativos, como python, r, javascript e mais.

Neste tutorial, vamos nos concentrar em usar a função DownloadImage ().JS, que nos permite baixar uma imagem de uma trama de plotagem.

Instalando plotagem

O primeiro passo é garantir que você tenha plotagem.JS instalou e executando em seu sistema. Você pode incluir o arquivo como um CDN ou instalá -lo via NPM.

Para simplificar, incluiremos o pacote plotly-js como um CDN. Isso nos permite evitar instalar e baixar o nó.JS e NPM.

No entanto, se você tiver um nó instalado, poderá executar o seguinte comando para instalar plotly.JS em seu projeto.

Uma vez instalado, podemos seguir em frente e usá -lo em nossos projetos.

Gráfico básico de barras

O próximo passo é preparar o enredo que desejamos criar. Para o nosso exemplo, usaremos um gráfico de barras.

Comece criando um índice.arquivo html. Isso incluirá todo o código para os dados e o tipo de parcelas que desejamos executar.

No índice.Arquivo HTML, adicione o código como mostrado abaixo:

Lote de barras da plotagem

Plotly bar

Começamos incluindo o código de caldeira HTML padrão no exemplo anterior. Em seguida, temos a plotagem JS como um CDN usando a tag de script.

Finalmente, criamos três elementos HTML para decorar a página. Primeiro, certifique -se de incluir a div com seu ID específico. Plotly usará este elemento div para exibir o enredo, como mostrado na plotagem.função newPlot ().

Podemos então abrir o índice.Arquivo HTML em nosso navegador e veja o gráfico como mostrado abaixo:

Plotly DownloadImage ()

A função DownloadImage () permite acionar um download de uma imagem de um enredo específico.

A função aceita o nome do enredo que você deseja baixar, o formato, a largura, a altura e o nome do arquivo como os parâmetros.

A sintaxe pode ser expressa como mostrado abaixo:

Plotly.DownloadImage (plot_name, formato: 'png', largura: 800, altura: 600, nome do arquivo: 'newPlot');

Sinta -se à vontade para substituir os nomes pelos seus valores de destino.

Em nosso exemplo de gráfico de barras fornecido, podemos usar a função então em JavaScript para carregar a função de imagem DownloadImage ().

Plotly.newPlot ("plotly_div", dados, layout).então (function (download)
Plotly.DownloadImage (download,
formato: 'jpeg',
Altura: 800,
Largura: 1200,
nome do arquivo: 'plot'
)
);

Uma vez que executamos o índice.arquivo html, o navegador deve exibir a imagem e baixar a imagem com os parâmetros especificados.

O arquivo resultante é mostrado abaixo:

A função aceita os seguintes formatos de imagem ao exportar uma imagem:

1. Png
2. JPEG
3. Webp
4. Svg
5. Full-JSON

Exemplo 2

Para baixar uma imagem no formato JSON, defina o formato como "full-json", como mostrado:

Plotly.newPlot ("plotly_div", dados, layout).então (function (download)
Plotly.DownloadImage (download,
Formato: 'Full-json',
Altura: 800,
Largura: 1200,
nome do arquivo: 'plot'
)
);

O código anterior deve retornar um arquivo JSON com todas as propriedades do gráfico especificado.

Conclusão

Neste tutorial, abordamos como usar a função DownloadImage ().JS para baixar a imagem de um enredo. Foram fornecidos vários exemplos que mostraram o uso do gráfico básico de barras antes de usar a função plotly downloadImage ().