Angular - komponent wykresu słupkowego

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

Listing 1
  1. <app-diagram [diagramData]="diagramRandomData" [diagramTitle]="'Random data diagram'"
  2. [xLabel]="'Second diagram xLabel'" [yLabel]="'Second diagram yLabel'" [colorFunction]="colorFunction">
  3. </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:

Listing 2
  1. colorFunction = (index: number, dataLength: number, value: number, max: number): ColorRGB => {
  2. return ColorHSV.createColorHSV(
  3. 180 - 180 * value / max,
  4. 0.5,
  5. 255).convertToRGB();
  6. }

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

Komentarze