Angular - komponent wykresu słupkowego

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1926 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ą.

Strony powiązane
strony powiązane
  1. npmjs.com/package/@obliczeniowo/elementary - biblioteka npm z komponentem wykresu słupkowego
Propozycje książek