Question

我有一些包含各种系列的StackedBarChart。

StackedBarChart.Series<String, Number> series1= new StackedBarChart.Series<String, Number>(
                FXCollections.observableArrayList(list1));
StackedBarChart.Series<String, Number> series2= new StackedBarChart.Series<String, Number>(
                FXCollections.observableArrayList(list2));
StackedBarChart.Series<String, Number> series3= new StackedBarChart.Series<String, Number>(
                FXCollections.observableArrayList(list3));
ObservableList<StackedBarChart.Series<String, Number>> barChartData = FXCollections
                .observableArrayList(series1, series2,
                        series3);
        final StackedBarChart<String, Number> chart = new StackedBarChart<String, Number>(
                xAxis, yAxis, barChartData);

我想更改系列的默认颜色。所以我添加了一个自定义CSS样式表

chart.getStylesheets().add("path to the CSS file");

在CSS文件中，我可以覆盖默认颜色，例如

.default-color0 {
    -fx-bar-fill: limegreen;
}
.default-color1 {
    -fx-bar-fill: orange;
}
.default-color2 {
    -fx-bar-fill: tomato;
}

这完美无缺，但它只用我的颜色替换默认颜色。如果我在将它们添加到图表时更改系列的顺序，它们将切换颜色。

我希望在我的CSS中更加精确，比如

.series1.color {
    -fx-bar-fill: limegreen;
}
.series2.color {
    -fx-bar-fill: orange;
}
.series2.color {
    -fx-bar-fill: tomato;
}

并将这些自定义选择器直接添加到系列中，而不是使用CSS样式表提供图表。我知道您可以使用setId(..)方法在节点上设置自定义选择器，但我无法管理它。

我也知道lookup方法，但我觉得它不优雅，因为你必须在渲染图表后调用它（因此你可以看到原始颜色之间的颜色很快闪烁和新的）

所以我的问题是：如何定义CSS选择器，如

.series1.color {
    -fx-bar-fill: limegreen;
}
.series2.color {
    -fx-bar-fill: orange;
}
.series2.color {
    -fx-bar-fill: tomato;
}

并以编程方式将它们应用于我想要的图表系列

series1.applySelector(".series1.color");

这样即使系列在图表中以不同的顺序插入，它们仍然会得到我想要的颜色

Answer 1

您可以直接将样式设置为组件，而无需编辑CSS：

series1.getNode().setStyle("-fx-bar-fill: limegreen;");
series2.getNode().setStyle("-fx-bar-fill: orange;");
series3.getNode().setStyle("-fx-bar-fill: tomato;");

或者你可以在CSS中定义一个id并设置java compoenten的CSS id：

<强> CSS

#clr1 {
    -fx-bar-fill: limegreen;    
}
#clr2 {
    -fx-bar-fill: orange;   
}
#clr3 {
    -fx-bar-fill: tomato;   
}

<强>爪哇

series1.getNode().setId("clr1");
series2.getNode().setId("clr2");
series3.getNode().setId("clr3");

图表上的java fx自定义选择器

1 个答案: