JavaFX Coloring XYChart.Series

Question

我正在尝试设置JavaFX面积图的样式，但找不到任何方法将颜色设置为特定系列。我知道，我可以通过 CSS 进行样式设置，但我也想在代码中执行此操作。

我该怎么做？1.）如何将颜色设置为具有内联样式的面积图？

谢谢你的帮助。

@Jose：

我

以前这样做过，但它对我不起作用！

@Override
    public void start(Stage primaryStage)
    {
        final AreaChart<String, Number> areaChart = new AreaChart<>(new CategoryAxis(), new NumberAxis());
        ObservableList<XYChart.Data<String, Integer>> xyList = FXCollections.observableArrayList(
            new XYChart.Data<>("P1", 30),
            new XYChart.Data<>("P2", 40),
            new XYChart.Data<>("P3", 30));
        XYChart.Series series = new XYChart.Series(xyList);
        areaChart.getData().addAll(series);
        Button button = new Button("Change style");
        button.setOnAction(new EventHandler<ActionEvent>()
        {
            @Override
            public void handle(ActionEvent arg0)
            {
                int redColor = 0, greenColor = 127, blueColor = 195;
                double opacity = 0.3;
                areaChart.setStyle("CHART_COLOR_1: rgb(" + redColor + "," + greenColor + "," + blueColor + "); "
                    + "CHART_COLOR_1_TRANS_20: rgba(" + redColor + "," + greenColor + "," + blueColor + "," + opacity + ");");
            }
        });
        VBox root = new VBox();
        root.getChildren().addAll(button, areaChart);
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

Answer 1

这个答案在Java 7中不起作用，因为默认的CSS样式表是Caspian，而不是Modena。

在里海中，主要调色板的这些常量没有定义：CHART_COLOR_1，CHART_COLOR_1_TRANS_20 ,...

因此，如果您想应用内联样式，一种方法是通过查找查找系列并根据其 CSS 选择器将您的样式应用于符号、线条和/或区域。例如：

@Override
public void start(Stage primaryStage) {
    final AreaChart<String, Number> areaChart = new AreaChart<>(new CategoryAxis(), new NumberAxis());
    ObservableList<XYChart.Data<String, Integer>> xyList = FXCollections.observableArrayList(
        new XYChart.Data<>("P1", 30),
        new XYChart.Data<>("P2", 40),
        new XYChart.Data<>("P3", 30));
    XYChart.Series series = new XYChart.Series(xyList);
    areaChart.getData().addAll(series);
    Scene scene = new Scene(areaChart, 400, 300);
    primaryStage.setScene(scene);
    primaryStage.show();
    int redColor = 0, greenColor = 127, blueColor = 195;
    double opacity = 0.3;
    for(Node symbol : areaChart.lookupAll(".default-color0.chart-area-symbol")){
        symbol.setStyle("-fx-background-color: rgb(" + redColor + "," + greenColor + "," + blueColor + "), white; ");
    }
    Node line = areaChart.lookup(".default-color0.chart-series-area-line");
    line.setStyle("-fx-stroke: rgb(" + redColor + "," + greenColor + "," + blueColor + "); ");
    Node area = areaChart.lookup(".default-color0.chart-series-area-fill");
    area.setStyle("-fx-fill: rgba(" + redColor + "," + greenColor + "," + blueColor + "," + opacity + "); ");
}

编辑

上述解决方案最多可使用 8 个系列。

对于任意数量的系列，这种其他方法也将有效：

    int numSeries=10;
    final int[] redColor = new int[numSeries];
    Arrays.fill(redColor, 0);
    final int[] greenColor =new int[numSeries]; 
    Arrays.fill(greenColor, 127);
    final int[] blueColor = new int[numSeries];
    Arrays.fill(blueColor, 195);
    double opacity = 0.3;

    for(int i=0; i<numSeries; i++){
        for(Node n : areaChart.lookupAll(".series"+i)){
            n.setStyle("-fx-background-color: rgb(" + redColor[i] + "," + greenColor[i] + "," + blueColor[i] + "), white; "
                    + "-fx-stroke: rgb(" + redColor[i] + "," + greenColor[i] + "," + blueColor[i] + "); "
                    + "-fx-fill: rgba(" + redColor[i] + "," + greenColor[i] + "," + blueColor[i] + "," + opacity + "); ");
        }
    }

Answer 2

你可以使用这个：

chart-series-area-line series<i> default-color<j>

其中 是系列

的索引，是系列的颜色索引

正如 CSS 引用中指定的，您可以与区域图表的 setStyle 函数一起使用

您可以使用此：

Node line = areaChart.lookup(".default-color0.chart-series-area-line");
line.setStyle("-fx-stroke: rgb(" + redColor + "," + greenColor + "," + blueColor + "); ");