Angular - komponent wykresu słupkowego

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

<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:

Listing 2

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.