Rysowanie wykresów w aplikacji Angular

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

Implementacja wykresu słupkowego po stronie 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.

Przykładowe źródło danych dla wykresu

Powyżej przykład, który zawiera dane odnośnie liczby ludności w trzech państwach.

Podsumowanie

Efekt końcowy implementacji wykresu

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.