Angular - komponent wykresu słupkowego
Stronę tą wyświetlono już: 1359 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:
- <app-diagram [diagramData]="diagramRandomData" [diagramTitle]="'Random data diagram'"
- [xLabel]="'Second diagram xLabel'" [yLabel]="'Second diagram yLabel'" [colorFunction]="colorFunction">
- </app-diagram>
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:
- colorFunction = (index: number, dataLength: number, value: number, max: number): ColorRGB => {
- return ColorHSV.createColorHSV(
- 180 - 180 * value / max,
- 0.5,
- 255).convertToRGB();
- }
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