Как динамически изменить стиль линии в линейной диаграмме JavaFX 2.0?

В нашем проекте JavaFX нам нужна линейная диаграмма. Я могу легко стилизовать весь график и серию с помощью CSS, но содержимое нашей диаграммы может динамически меняться:

  • количество серий и порядок их отображения зависят от действий пользователя и его данных. Каждая серия представляет собой конкретную категорию данных, и каждая категория имеет свой собственный стиль, например. категория A показана пунктирной линией, а категория B - пунктирной линией. Диаграмма может содержать 0 или более серий для каждой категории,

  • стиль серии также зависит от значений данных, например. строка линии над средним красным цветом, а ниже - синим.

Как это сделать в JavaFX?

2 ответа

  • количество серий и порядок их отображения зависят от действий пользователя и его данных.

Количество отображаемых серий и порядок отображения могут быть изменены путем изменения ObservableList серии, которую вы передали в диаграмму setData(). Поскольку диаграмма прислушивается к изменениям в списке, по мере изменения списка поддержки диаграмма автоматически обновляется, чтобы отражать изменения.

каждая категория имеет свой собственный стиль, например. категория A показана пунктирной линией, а категория B - пунктирной линией.

Это можно сделать, определив, какие ряды на диаграмме находятся в какой категории, просматривая все узлы, связанные с серией, через node lookupAll (cssStyleSelector) и применение нового стиля для серии, которая соответствует стилю для категории. Пунктирные и пунктирные линии могут быть введены через css, установив свойство -fx-stroke-dash-array css. Альтернативно, вместо поиска вы можете динамически изменять класс стиля CSS, назначенный узлам, путем изменения ObservableList, возвращенного из getStyleClass().

стиль серии также зависит от значений данных, например. строка линии над средним красным цветом, а ниже - синим.

Это похоже на то, как отображаются пунктирные и пунктирные линии, но цвет линий модифицируется свойством -fx-stroke css, а модификация зависит от средних значений, вычисленных для серии.

Чтобы продемонстрировать вышеуказанные моменты, я создал пример решения для этого вопроса здесь: https://gist.github.com/2129306


Я сделал это так, подумал, что это очень удобно. Примечание. Это, по-видимому, работает на LineCharts, но не на ScatterCharts.

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

licensed under cc by-sa 3.0 with attribution.