3 Modi per Inserire un Grafico Matplotlib in una Pagina HTML
3 ways to insert a Matplotlib chart in an HTML page.
Visualizzazione dei dati, Applicazione Web
Un tutorial su come importare un grafico Matplotlib in un file HTML
Python fornisce molte librerie per eseguire diverse operazioni, inclusa la visualizzazione dei dati. Tuttavia, può risultare complesso integrare un grafico costruito con Matplotlib in una pagina HTML. La soluzione più semplice è esportare il grafico come immagine statica, come PNG o JPEG, e quindi integrarlo nella pagina HTML. Tuttavia, se si utilizza un’immagine statica, si perde qualsiasi possibile interattività del grafico originale.
Un’altra soluzione potrebbe essere l’utilizzo di framework esterni come Streamlit o Flask, ma in entrambi i casi, è necessario configurare un server web autonomo per servire l’immagine. Questa soluzione potrebbe essere troppo costosa. Nella mia città, diciamo che sparare con un cannone ad una mosca!
Questo post del blog mostra tre strategie per incorporare un grafico Matplotlib in una pagina HTML. Le tre soluzioni sono:
- Utilizzo della libreria mpld3
- Codifica dell’immagine come base64
- Utilizzo di
py-script.
Prima di descrivere ogni soluzione, descriviamo lo scenario che utilizzeremo per dimostrare i tre casi.
- Come accedere alle future versioni di Python come la 3.12 prima che esse siano disponibili per tutti.
- Sono ancora necessari i Data Scientist nell’era dell’AI generativa?
- Per imparare davvero un nuovo argomento, prenditi il tuo tempo.
Lo scenario
Supponiamo di voler disegnare un sinusoidale utilizzando Matplotlib. Ecco il codice per generare il grafico:
import numpy as npimport matplotlib.pyplot as plt# Genera x da 0 a 2*pi con un passo di 0,1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoide')plt.show()La figura seguente mostra il grafico risultante:
Utilizzo della libreria mpld3
La libreria mpld3 combina Matplotlib e D3.js, una popolare libreria Javascript per la visualizzazione dei dati. Mpld3 fornisce un’API per esportare i grafici Matplotlib in D3.js.
Per prima cosa, installare la libreria mpld3:
pip install mpld3Per salvare il grafico Matplotlib come pagina HTML, utilizzare la funzione save_html() fornita da mtpld3, come segue:
import mpld3import numpy as npimport matplotlib.pyplot as plt# Genera x da 0 a 2*pi con un passo di 0,1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)# Crea una figura e un assefig, ax = plt.subplots()# Disegna la sinusoideax.plot(x, y)# Imposta le etichette e il titoloax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoide')# Mostra il graficompld3.save_html(fig,'fig.html')La funzione save_html() riceve in input una figura Matplotlib e il nome della figura. Lo script genera il file fig.html. Se lo apri nel tuo browser, vedrai il seguente grafico:
Il grafico è leggermente diverso da quello originale perché è la versione D3.js del grafico originale. Ciò significa che la libreria mpld3 trasforma il grafico originale in D3.js. Se ispezioni il file HTML dal tuo browser, vedrai che il grafico è un’immagine SVG, come mostrato nella figura seguente:
Per incorporare il grafico generato in un’altra pagina HTML, copiare esattamente il contenuto del file generato nella posizione in cui si desidera includere l’immagine. Per ulteriori dettagli su come procedere, seguire il mio tutorial precedente.
Codifica dell’immagine come base64
Un’altra soluzione consiste nel codificare la figura di Matplotlib come immagine base64, come descritto in questa discussione di Stack Overflow. Ecco il codice per generare la pagina HTML contenente l’immagine di Matplotlib:
import base64from io import BytesIOimport numpy as npimport matplotlib.pyplot as pltx = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoide')tmpfile = BytesIO()fig.savefig(tmpfile, format='png')encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')html = '<html>' + '<img src=\'data:image/png;base64,{}\'>'.format(encoded) + '</html>'with open('fig2.html','w') as f: f.write(html)In pratica, si genera un oggetto BytesIO() e si salva la figura utilizzando il formato PNG. Quindi, si utilizza la funzione b64encode() per codificare l’immagine e la funzione decode() per decodificarla. Infine, si aggiunge l’immagine decodificata a una stringa HTML e si salva. Come risultato, si ha esattamente la figura originale di Matplotlib.
Utilizzo di py-script
Py-script è una libreria Javascript che consente di includere direttamente il codice Python in una pagina HTML. Per utilizzare Py-script, è necessario includere la seguente libreria py-script nell’intestazione HTML:
<head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script></head>Quindi, utilizzare il tag py-config per installare le librerie Python richieste:
<py-config> packages = ["matplotlib", "numpy"]</py-config>Infine, utilizzare il tag py-script per includere il codice Python:
<py-script> import numpy as np import matplotlib.pyplot as plt x = np.arange(0, 2*np.pi, 0.1) y = np.sin(x) fig, ax = plt.subplots() ax.plot(x, y) ax.set_xlabel('x') ax.set_ylabel('y') ax.set_title('Sinusoide') display(fig, target="graph-area", append=False) </py-script> <div id="graph-area"></div>Per mostrare la figura, utilizzare la funzione display(), che riceve la figura di Matplotlib, l’HTML div in cui includere il grafico e se utilizzare la modalità di append.
Come risultato finale, si ha esattamente la stessa figura della figura originale.
Sommario
Congratulazioni! Hai appena imparato tre modi per includere un grafico di Matplotlib in una pagina HTML! Le tre strategie sono:
- Utilizzando la libreria mpld3 si converte il grafico di Matplotlib in un grafico D3.js
- Codificando l’immagine come base64 si genera un’immagine PNG del grafico di Matplotlib come immagine codificata in base64 e quindi la si include in una pagina HTML
- Utilizzando
py-scriptsi può includere il proprio codice Python direttamente in HTML.
Articoli correlati
Come inserire un grafico Python in un sito Web HTML
towardsdatascience.com
3 modi per costruire una mappa geografica in Python Altair
Un tutorial di visualizzazione dei dati su come costruire tre diverse mappe in Python Altair: mappa cloropetica, mappa a densità di punti…
towardsdatascience.com
3 Modi per Visualizzare le Serie Temporali che Potresti non Conoscere
Un tutorial pronto all’uso su come visualizzare una serie temporale in Python e Altair
towardsdatascience.com
Resta Connesso!
- Seguimi su Nisoo
- Iscriviti alla mia newsletter
- Connettiti su LinkedIn
- Seguimi su Twitter
- Seguimi su Facebook
- Seguimi su Github
