Udostępniono kolejną wersję biblioteki wykresów JS – billboard.js 3.0. Jedną z najważniejszych zmian jest wsparcie najnowszej wersji D3.js v.6. Ponadto wprowadzono nowy tryb świecznika oraz zmiany w interfejsie API.

D3.js v6 w nowym billboard.js 3.0

Główne zmiany w nowej wersji dotyczą obsługi D3.js. Jest to biblioteka JavaScript, która tworzy dynamiczne wizualizacje danych w przeglądarkach internetowych. To właśnie dlatego billboard potrzebował „dużej” zmiany. D3 korzysta z kolekcji natywnych oraz akceptuje elementy iteracyjne. Wprowadzone w nim zmiany wymagały dodania do biblioteki billboard.js dodatkowej obsługi dla starszych przeglądarek.

Nowy typ „świecy”

Nowe wydanie biblioteki otrzymało także nową obsługę wykresu świecowego OHLC (Open High Low Close). Z tego wykresu korzystają najczęściej analitycy rynku. Wykres świecowy przedstawia analizę rozwoju cen aktywów bardziej szczegółowo od funkcji liniowej.

Standardowo świeca składa się z czterech elementów:

• O – cena otwarcia – górna lub dolna część korpusu świecy. Jeśli cena rośnie, świecznik jest często zielony lub biały, a cena otwarcia jest na dole. Jeśli cena spadnie, świecznik jest często czerwony lub czarny, a cena otwarcia jest na górze.
• H – cena wysoka jest wskazywana w okresie świecznika przez górę cienia lub ogona nad ciałem. Jeśli cena otwarcia lub zamknięcia była najwyższą ceną, nie będzie górnego cienia.
• L – cena niska – przeciwnie do ceny wysokiej – niski poziom jest wskazywany przez spód cienia lub ogona poniżej ciała
• C- cena zamknięcia – zamknięcie jest ostatnią ceną notowania. Jest ona oznaczona albo na górze (w przypadku świecy zielonej lub białej), albo w dolnej części korpusu (w przypadku świecy czerwonej lub czarnej).

Wartość danych jest prezentowana jako bycza (najczęściej biała lub zielona) – jeśli cena zamknęła się w wyższej wartości niż w momencie otwarcia lub niedźwiedzia (czerwona lub czarna) – cena jest niższa od ceny otwarcia.

Właśnie z powodu różnych kolorów świec wprowadzono nowy typ tego wykresu. Kolory dla byczej i niedźwiedziej wartości można kontrolować za pomocą następujących opcji:

bb.generate ({
data: {
     type: "candlestick",
     colors: {
        data1: "green" // kolor wartości 'byczej'
     },
     ...
},
candlestick: {
    color: {
         down: "red" // kolor dla wartości 'niedźwiedziej'
    },
}
}

Ustawiono również nazwy klasy dla każdego typu wartości – dla byczej: bb-value-up i dla niedźwiedziej: bb-value-down. Z kolei etykiety danych będą się wyświetlać według typu wartości oraz przedstawiać cenę zamknięcia nad lub pod świecą, w zależności od wartości.

Pozostałe zmiany w billboard.js 3.0

Ostatnie zmiany dotyczą poprawek znalezionych błędów. Naprawiono axis.x.tick.tooltip na obróconej osi oraz błąd rzutu błędu axis.x.max. 

Ulepszono także opcję .export() do danego rozmiaru obrazu. Przykładowo, jeśli wygenerowany wykres ma rozmiar 250 x 150, chcąc wyeksportować go do formatu 800 x 600, programista może określić opcje wartości rozmiaru. Dzięki temu mniejszy wykres będzie wyeksportowany w większym formacie bez pogorszenia jakości.

Dodano także nowe interfejsy API podwykresów, które pozwalają na programowe kontrolowanie widoczności podschematu. Przede wszystkim dodano nowe metody sterowania:

• .subchart.show (): Pokaż podwykres
• .subchart.hide (): Ukryj podwykres
• .subchart.toggle (): Przełącz widoczność wykresu podrzędnego

Podsumowanie

Wszystkie zmiany opisane są w repozytorium biblioteki na GitHubie.

Źródło: Netil Medium