Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Wprowadzenie do Pygal: kreatora wykresów SVG w Pythonie

by
Difficulty:BeginnerLength:ShortLanguages:

Polish (Polski) translation by Katarzyna Kapusta (you can also view the original English article)

SVG (Scalable Vector Graphics) to format graficzny, który służy do opisu grafiki wektorowej w formacie XML. W tym tutorialu zobaczymy, jak przymierzyć się do pracy z Pygalem, biblioteką Pythona do tworzenia wykresów SVG.

Zaczynamy

Pygal nie wymaga instalacji żadnych dodatkowych bibliotek. Jest on dostępny dla Python 2.7+. Pewnie masz już w systemie zainstalowane Python i pip, zainstaluj więc Pygal korzystając z pip.

Jeśli chcesz korzystać z najnowszej wersji biblioteki, wejdź na repozytorium GitHub Pygala i sklonuj je.

Tworzenie wykresu słupkowego

Wizualizacja danych służy do objaśniania informacji za pomocą wykresów i grafów. W tym tutorialu zobaczymy, jak stworzyć wykres słupkowy korzystając z biblioteki Pygal wewnątrz aplikacji internetowej w Python Flask. Zacznijmy od stworzenia krótkiej aplikacji we flask. Najpierw zainstaluj flask, o ile jeszcze nie masz go w systemie:

Utwórz plik o nazwie app.py i wpisz następujący kod:

Przypuśćmy, że mamy pod ręką listę rocznych wyników za poszczególne lata. Dane są w formacie JSON. Oto próbka danych w JSON:

Lata umieścimy na osi X, a Oceny na osi Y. Na początek ustanowimy nowe przekierowanie w naszej aplikacji:

Dane załadujemy z pliku JSON, musimy zatem obok biblioteki pygal zaimportować również bibliotekę json.

Wczytaj dane JSON, otwierając plik w trybie odczytu, i załaduj dane.

Utwórz obiekt Bar jako obiekt wykresu z biblioteki pygal.

Skoro mamy już obiekt wykresu, musimy zdefiniować osie X i Y. Aby umieścić wyniki na osi Y, wczytamy je z obiektu JSON w formie listy.

Następnie w podobny sposób sczytamy lata z obiektu JSON jako listę.

Przyporządkuj dane osiom  X i Y w obiekcie wykresu.

Teraz musimy wyrenderować obrazek wykresu SVG do pliku. W Python Flask dla plików statycznych zarezerwowany jest folder static, utwórz zatem katalog o nazwie static wewnątrz katalogu projektu. W folderze static utwórz katalog images. Aby wyrenderować obrazek SVG, wstaw następującą linię kodu:

Utwórz folder template (szablon) w głównym katalogu. Wewnątrz katalogu template stwórz plik o nazwie app.html. Wpisz w nim następujący kod html:

Nasz wykres słupkowy zostanie wyrenderowany wewnątrz app.html. I na koniec musimy już tylko wyrenderować szablon wraz z parametrem image_url, który wstawimy jako data (dane) dla elementu. Tak wyglądają przekierowanie i metoda /bar w całej okazałości:

Dołożyłem ciąg kwerendy cache do img_url, aby zapobiec załadowaniu obrazka z pamięci podręcznej przeglądarki.

Zapisz zmiany i spróbuj uruchomić aplikację:

Skieruj swoją przeglądarkę na http://localhost:5000/bar - powinieneś zobaczyć nasz wykres słupkowy, oparty na  danych JSON.

PyGal Single Bar Chart

Wykresy słupkowe wielokrotne

Możemy również dorzucić do istniejącego wykresu słupki wielokrotne. Przypuśćmy, że mamy podobny obiekt JSON z kilkoma dodatkowymi parametrami, które również powinny zostać przedstawione. Na przykład coś takiego:

Aby wyświetlić słupek z danymi o turniejach, musimy stworzyć listę wyników turniejowych i dodać ją do obiektu wykresu.

Zapisz zmiany i uruchom ponownie serwer. Skieruj swoją przeglądarkę na http://localhost:5000/bar - powinien pokazać się wyrenderowany wykres słupkowy.

PyGal Mutiple Bar Chart

Nadawanie własnego stylu

Wykresom słupkowym można również nadać indywidualny styl. Aby np. zmienić kolory słupków, musimy zaimportować Pygal style.

Zdefiniuj własny styl jak poniżej, aby nadać słupkom właściwe kolory i dobrać kolor tła wykresu.

Zastosuj własny styl przy tworzeniu obiektu wykresu.

Zapisz zmiany i uruchom serwer ponownie. Skieruj swoją przeglądarkę na http://localhost:5000/bar - powinieneś zobaczyć wykres słupkowy z nadanym własnym stylem.

PyGal Mutiple Bar Chart with Custom Style

Podsumowując

W tym tutorialu dowiedzieliśmy się, jak zacząć przygodę z Pygalem, biblioteką do tworzenia wykresów SVG w języku Python. Nauczyliśmy się używać Pygala do tworzenia wykresów słupkowych wewnątrz aplikacji Flask. Zobaczyliśmy, jak dodać słupki wielokrotne do wykresu i jak zmieniać jego styl.

To, co zobaczyliśmy, to zaledwie czubek góry lodowej - Pygal pozwoli nam dokonać znacznie więcej. Zachęcam do odwiedzenia oficjalnej dokumentacji Pygala, w której znaleźć można szczegółowe informacje.

Oprócz tego możesz zajrzeć do materiałów do nauki o do kupienia na Envato Market. Jeśli tylko masz jakieś pytania czy uwagi, zapraszamy do sekcji komentarzy poniżej.

Kod źródłowy z tego samouczka znajdziesz na GitHub.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.