Jak dynamicznie zmieniać styl linii na wykresie liniowym JavaFX 2.0?

Question

W naszym projekcie JavaFX potrzebujemy wykresu liniowego. Mogę łatwo stylizować całego wykresu i serię za pomocą CSS, ale zawartość naszego wykresu można zmieniać dynamicznie:

1. numer serii i ich kolejność wyświetlania zależy od działań użytkownika i jego danych. Każda seria reprezentuje konkretną kategorię danych, a każda kategoria ma swój własny styl, np. kategoria A jest pokazana jako linia przerywana, a kategoria B jest przedstawiona linią przerywaną. Wykres może zawierać 0 lub więcej serii dla każdej kategorii, styl serii zależy również od wartości danych, np. linia serii powyżej średniej jest czerwona, a poniżej niebieska.

Jak to zrobić w JavaFX?

Answer 1

1. numer serii i wyświetlanie ich kolejność zależy od działań użytkownika i jego danych.

Liczbę serii wyświetlane i kolejność wyświetlania mogą być modyfikowane poprzez zmianę ObservableList serii, która została przekazana do wykresu setData() rozmowy. Gdy wykres nasłuchuje zmian na liście, gdy zmienia się lista kopii, wykres jest automatycznie aktualizowany, aby odzwierciedlić zmiany.

każda kategoria ma własny styl, np. kategoria A jest pokazana jako linia przerywana, a kategoria B jest przedstawiona linią przerywaną.

Może to zrobić poprzez określenie, które z serii na wykresie w jakiej kategorii, patrząc na wszystkie węzły związane z serii pośrednictwem węzła lookupAll(cssStyleSelector) funkcji i zastosowanie nowego niestandardowego stylu dla serii, który pasuje do stylu dla kategorii . Linie przerywane i przerywane można stylizować za pomocą css, ustawiając właściwość css -fx-stroke-dash-array. Alternatywnie, zamiast wyszukiwania, można dynamicznie zmieniać styl css przypisany do węzłów poprzez modyfikację obiektu ObservableList zwróconego z getStyleClass().

styl serii zależy również od wartości danych, np. linia serii powyżej średniej jest czerwona, a poniżej niebieska.

Jest to podobne do tego, jak są wyświetlane i przerywane linie przerywane, ale zamiast koloru linii zmodyfikowaliśmy są przez właściwość css -fx-stroke i modyfikacja zależy od średniej wartości obliczonej dla tej serii.

Aby wykazać powyższe punkty, stworzyłem roztworu próbki na to pytanie tutaj: https://gist.github.com/2129306

Answer 2

zrobiłem to w ten sposób, że to było bardzo wygodne. Uwaga: to najwyraźniej działa w LineCharts, ale nie w ScatterCharts.

Series<Number, Number> series = new Series<>(); 
... 
series.nodeProperty().get().setStyle("-fx-stroke-width: 1px;");