Angular - komponent wykresu słupkowego
Stronę tą wyświetlono już: 1933 razy
Wstęp
Już w dwóch co najmniej działach tworzyłem skrypty, które umożliwiały stworzenie wykresu słupkowego SVG to też i pokusiłem się o stworzenie takiego komponentu w Angula-rze. Oto jak wygląda i działa:
Osadzanie w kodzie
Przyciski osadzone wewnątrz umożliwiają zmianę sposobu kolorowania reprezentowanych w wykresie danych. Co ciekawe sam wykres umożliwia w łatwy sposób podpięcie własnego sposobu koloryzacji słupków wykresu. Do kolorowania wykorzystałem system kolorów HSV, który następnie konwertowany jest na kolor RGB a to dlatego, że w skali kolorów RGB trudno jest automatycznie utworzyć kolory, które będą z sobą kontrastowały.
Osadzenie wykresu w kodzie HTML wygląda następująco:
Gdzie najciekawszy jest atrybut colorFunction przyjmujący funkcję, której celem jest zwrócenie obiektu koloru. Oto przykład takiej funkcji osadzonej w kodzie komponentu:
W powyższym przypadku kolor danego słupka wykresu jest ustalany na podstawie jego wartości z wykorzystaniem klasy ColorHSV opisującej kolor w systemie HSV. Możliwe jest oczywiście ustawienie koloru na podstawie indeksu wartości.
Instalacja biblioteki komponentu
Ostatnimi czasy stworzyłem bibliotekę dostępną publicznie z poziomu npm wystarczy wywołać polecenie:
npm i @obliczeniowo/elementary
aby po chwili lub co najwyżej dwóch móc cieszyć się nową funkcjonalnością.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz