Plotly è un eccellente strumento di trama che supporta in modo completo i vari grafici e utilizza i casi. Inoltre, supporta lingue significative, come Python, R, JavaScript e altro ancora.

In questo tutorial, ci concentreremo sull'uso della funzione DownloadImage () da Plotly.JS, che ci consente di scaricare un'immagine di una trama tramata.

Installazione della trama

Il primo passo è assicurarti di avere una trama.JS installato e in esecuzione sul tuo sistema. È possibile includere il file come CDN o installarlo tramite NPM.

Per semplicità, includeremo il pacchetto Plotly-JS come CDN. Questo ci consente di evitare l'installazione e il download del nodo.JS e NPM.

Tuttavia, se hai installato nodo, è possibile eseguire il comando seguente per installare trattini.JS nel tuo progetto.

Una volta installato, possiamo andare avanti e usarlo nei nostri progetti.

Grafico a barre di base

Il prossimo passo è preparare la trama che desideriamo creare. Per il nostro esempio, useremo un grafico a barre.

Inizia creando un indice.file html. Ciò includerà tutto il codice per i dati e il tipo di grafici che desideriamo eseguire.

Nell'indice.file html, aggiungi il codice come mostrato di seguito:

Trama della barra

Plotly Bar

Iniziamo includendo il codice di caldaia HTML predefinito nell'esempio precedente. Quindi, abbiamo Plotly JS come CDN che utilizza il tag script.

Infine, abbiamo creato tre elementi HTML per decorare la pagina. Innanzitutto, assicurati di includere il div con il tuo ID specifico. Plollaly utilizzerà questo elemento Div per visualizzare la trama come mostrato nella trama.funzione newplot ().

Possiamo quindi aprire l'indice.File HTML nel nostro browser e vedere la trama come mostrato di seguito:

Plollaly downloadImage ()

La funzione downloadimage () consente di attivare un download di immagini di una trama specifica.

La funzione accetta il nome della trama che si desidera scaricare, il formato, la larghezza, l'altezza e il nome file come parametri.

La sintassi può essere espressa come mostrato di seguito:

Plotly.DownloadImage (Plot_name, Formato: 'png', larghezza: 800, altezza: 600, nome file: 'newplot');

Sentiti libero di sostituire i nomi con i valori target.

Nel nostro esempio del diagramma a barre fornito, possiamo utilizzare la funzione allora in javascript per caricare la funzione immagine downloadimage ().

Plotly.newplot ("plotly_div", dati, layout).Quindi (function (download)
Plotly.DownloadImage (download,
Formato: "jpeg",
Altezza: 800,
Larghezza: 1200,
nome file: "trama"
)
);

Una volta eseguito l'indice.File HTML, il browser deve visualizzare l'immagine e scaricare l'immagine con i parametri specificati.

Il file risultante è mostrato di seguito:

La funzione accetta i seguenti formati di immagine durante l'esportazione di un'immagine:

1. Png
2. Jpeg
3. WebP
4. Svg
5. full-json

Esempio 2

Per scaricare un'immagine in formato JSON, imposta il formato come "full-json" come mostrato:

Plotly.newplot ("plotly_div", dati, layout).Quindi (function (download)
Plotly.DownloadImage (download,
Formato: "full-json",
Altezza: 800,
Larghezza: 1200,
nome file: "trama"
)
);

Il codice precedente dovrebbe restituire un file JSON con tutte le proprietà della trama specificata.

Conclusione

In questo tutorial, abbiamo trattato come utilizzare la funzione downloadimage () in trama.JS per scaricare l'immagine di una trama. Sono stati forniti diversi esempi che hanno mostrato l'uso del grafico a barre di base prima di utilizzare la funzione di downloadimage ().