Nie od dziś wiadomo, że wizualizacja danych w postaci grafik, wykresów, tabel itp. pozwala przyswoić większą ilość informacji w krótszym czasie. Tym samym tworząc aplikację internetową, możemy chcieć wykorzystać różnego rodzaju wykresy.
W aplikacjach Angular mamy do dyspozycji wiele paczek:
- angular-plotly
- ngx-charts
- ng2-charts
- PrimeNG Charts
- i wiele inny
ngx-charts
W tym artykule skupimy się na drugiej z nich czyli „ngx-charts”.
Instalacja ngx-charts
Instalację możemy wykonać poprzez NPM powyższym poleceniem.
Biblioteka zawiera obszerny opis, dokumentację i stronę demonstracyjną z możliwością przetestowania różnych typów wykresów. Jest ich tak wiele, że opiszemy jeden z nich, czyli wykres słupkowy – praca z pozostałymi przebiega analogicznie.
HTML
Po instalacji można przejść do dodania interesującego typu do naszego projektu po stronie HTML.
Poza samymi znacznikami można tutaj dodać szereg właściwości:
- view – tablica z dwiema wartościami określająca rozmiar wykresu
- scheme – schemat z tablicą kolorów wykorzystywaną do prezentacji słupków
- results – źródło danych
- gradient, xAxis, yAxis, legend, showXAxisLabel, showYAxisLabel – informacja logiczna czy poszczególne elementy mają być wyświetlane
- xAxisLabel, yAxisLabel – etykiety dla osi X i Y
- select – metoda wywoływana w momencie wyboru (kliknięcia) wartości.
Właściwości można pominąć, zdefiniować po stronie HTML, czy też opakować w zmienne, jak to zostało ukazane powyżej.
Źródło danych
Źródłem danych dla wykresu może być zarówno statyczna tablica jak i np. format json pobierany z API.
Powyżej przykład, który zawiera dane odnośnie liczby ludności w trzech państwach.
Podsumowanie
Jeśli wykonaliśmy wszystko poprawnie to naszym oczom ukaże się wykres widoczny powyżej.
Biblioteka jest niezwykle prosta w implementacji, co po części jest zasługą świetnej dokumentacji, a przy tym możliwości personalizacji dla większości użytkowników będą ponad ich oczekiwania.
