Python jest szeroko stosowany do analizy danych, uczenia maszynowego, skrobania stron internetowych i wielu innych. Ale czy wiesz, że możesz również uruchomić kod Pythona w HTML do tworzenia aplikacji internetowych?

Umożliwia to PyScript, umożliwiając uruchamianie kodu Pythona w przeglądarce. Dowiedz się, jak dodać wizualizacje matplotlib do strony internetowej za pomocą kilku przykładów PyScript-HTML.

Co to jest PyScript?

PyScript to platforma internetowa o otwartym kodzie źródłowym, która pozwala uruchomić Pythona w przeglądarce internetowej. Integruje interfejs HTML oraz moc Pyodide, WASM i nowoczesnych technologii internetowych. PyScript jest obecnie w fazie rozwoju, ale ma już kilka ekscytujących funkcji. Potencjalnie może stać się narzędziem do tworzenia potężnych aplikacji internetowych.

Kod użyty w tym projekcie jest dostępny w Repozytorium GitHub i jest darmowy do użytku na licencji MIT. Jeśli chcesz zobaczyć na żywo wersję tego projektu, możesz sprawdzić wykres liniowy oraz barplot dema.

instagram viewer

Skonfiguruj płytę kotłową HTML

Przed użyciem PyScript musisz wszystko skonfigurować. Utwórz nowy plik HTML i skonfiguruj szablon HTML. Bardzo nowoczesne IDE zapewniają funkcjonalność automatycznego tworzenia szablonów. Musisz tylko wpisać doktor lub html i naciśnij Enter. Na początek możesz również użyć następującego szablonu:

<!DOCTYPE html>
<html>
<głowa>
<zestaw znaków meta="utf-8">
<meta http-equiv="Kompatybilny z X-UA" zawartość="IE=krawędź">
<tytuł></title>
<nazwa meta="opis" zawartość="">
<nazwa meta="rzutnia" zawartość="szerokość=szerokość urządzenia, początkowa skala=1">
</head>
<ciało>
</body>
</html>

Dodaj PyScript do HTML: "Witaj świecie!" Korzystanie z PyScript

Możesz użyć PyScript w swoim pliku HTML, pobierając go lub łącząc jego CDN w nagłówku HTML. Dodaj następujące w sekcja pliku HTML:

<link rel="arkusz stylów" href="https://pyscript.net/alpha/pyscript.css" />
<odroczenie skryptu src="https://pyscript.net/alpha/pyscript.js"></script>

To wszystko, co musisz zrobić, aby skonfigurować PyScript.

Aby sprawdzić, czy PyScript został pomyślnie zintegrowany, dodaj następujący wiersz kodu w Sekcja:

<ciało>
<py-skrypt>wydrukować("Witaj świecie!")</py-script>
</body>

Otwórz plik HTML w dowolnej przeglądarce internetowej, a zobaczysz Witaj świecie! wydrukowane tam.

Załaduj bibliotekę Matplotlib

Musisz użyć znaczniki do importowania modułów Pythona. Załaduj matplotlib moduł w sekcji pliku HTML przy użyciu następującego fragmentu kodu:

<py-env>
 - matplotlib
</py-env>

Wyświetl wykres liniowy w przeglądarce za pomocą PyScript

Stwórz z ID. Będziesz potrzebować ID używać go z wyjście atrybut etykietka.

<dziel id="matplotlib-lineplot"></div>

Musisz napisać kod Pythona w etykietka. Przypisz powyższe ID do wyjście atrybut etykietka.

<wyjście skryptu py="matplotlib-lineplot">
# Kod Pythona
</py-script>

Jesteś teraz gotowy do napisania kodu Pythona, aby utworzyć wykres liniowy:

<ciało>
<dziel id="matplotlib-lineplot"></div>
<wyjście skryptu py="matplotlib-lineplot">
# Kod Pythona
# importowanie biblioteki matplotlib
import matplotlib.pyplot jak plt
 fig, topór = plt.podwykres()
# x oś
 x = ["Pyton", "C++", "JavaScript", "Golang"]
# oś y
 y = [10, 5, 9, 7]
 plt.plot (x, y, znacznik='o', styl linii='-', kolor='b')
# Nazywanie etykiety x
 plt.xetykieta('Język')
# Nazywanie etykiety Y
 pl.ylabel('Wynik')
# Nazywanie tytułu fabuły
 tytuł.pl('Język a wynik')
 Figa
</py-script>
</body>

Po otwarciu pliku HTML w przeglądarce internetowej zostanie wyświetlony następujący rysunek:

Wyświetl wykres słupkowy w przeglądarce za pomocą PyScript

Wykres słupkowy można utworzyć w przeglądarce za pomocą następującego fragmentu kodu Python:

<ciało>
<dziel id="matplotlib-bar"></div>
<wyjście skryptu py="matplotlib-bar">
# Kod Pythona
# importowanie biblioteki matplotlib
import matplotlib.pyplot jak plt
 fig, topór = plt.podwykres()
# x oś
 x = ["Pyton", "C++", "JavaScript", "Golang"]
# oś y
 y = [10, 5, 9, 7]
plt.bar(x, tak)
# Nazywanie etykiety x
 plt.xetykieta('Język')
# Nazywanie etykiety Y
 pl.ylabel('Wynik')
# Nazywanie tytułu fabuły
 tytuł.pl('Język a wynik')
 Figa
</py-script>
</body>

Ten kod generuje następujące dane wyjściowe:

Jaką przyszłość ma PyScript?

Możesz tworzyć zaawansowane pulpity nawigacyjne i wykresy w języku HTML, korzystając z bibliotek PyScript i Python, takich jak Matplotlib, Bokeh, Seaborn i tak dalej. Jednak prawdopodobnie powinieneś powstrzymać się od używania go w produkcji, ponieważ jest w fazie intensywnego rozwoju. Oprogramowanie ma obecnie wiele problemów, w tym czas ładowania i użyteczność. W przyszłości PyScript może otworzyć bramy, aby płynniej uruchamiać i wykonywać operacje Pythona w sieci.

Jednym z głównych powodów opracowania PyScript była pomoc naukowcom w wizualizacji danych w sieci. Jeśli jesteś naukowcem zajmującym się danymi, możesz wykorzystać możliwości języka PyScript, łącząc go z bibliotekami naukowymi, takimi jak Pandas i NumPy.