如何在JavaFX 2.0折线图中动态更改线条样式？

Question

在我们的JavaFX项目中，我们需要一个折线图。我可以使用CSS轻松地对整个图表和系列进行样式化，但我们图表的内容可以动态变化：

1. 系列数及其显示顺序取决于用户操作及其数据。每个系列代表一个具体的数据类别，每个类别都有自己的风格，例如。类别A显示为虚线，类别B显示为虚线。该图表可以包含每个类别的0个或更多系列，

2. 系列风格也取决于数据值，例如。平均线上的系列线是红色，下面是蓝色。

如何在JavaFX中执行此操作？

Answer 1

  

  
1. 系列数及其显示顺序取决于用户操作及其数据。
  

通过更改传递给图表ObservableList来电的系列setData()，可以修改显示的系列数和显示顺序。当图表监听列表的更改时，随着支持列表的更改，图表会自动更新以反映更改。

  

每个类别都有自己的风格，例如。类别A显示为虚线，类别B显示为虚线。

这可以通过确定图表中哪个系列属于哪个类别，通过节点lookupAll(cssStyleSelector)函数查找与该系列相关的所有节点并将新的自定义样式应用于与该样式匹配的系列来完成。类别。通过设置-fx-stroke-dash-array css属性，可以通过css设置虚线和虚线的样式。或者，您可以通过修改从getStyleClass()返回的ObservableList来动态更改分配给节点的css样式，而不是查找。

  

系列的风格也取决于数据值，例如。平均线上的系列线是红色，下面是蓝色。

这类似于虚线和虚线的显示方式，而是线条的颜色由-fx-stroke css属性修改，修改取决于为系列计算的平均值。

为了证明以上几点，我在这里为这个问题创建了一个示例解决方案：https://gist.github.com/2129306

Answer 2

我是这样做的，认为它非常方便。注意：这显然适用于LineCharts但不适用于ScatterCharts。

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