java - 如何在JavaFX中的两个AreaCharts之间填充？

Question

JavaFX 中的面积图填充数据线和零 y 轴之间的区域。

我只想知道如何在两个面积图之间填充。

更多详细信息:

我正在生成一堆随机游走。然后，我为路径、平均值和平均值 +/- std 创建三个不同的 XYChart。偏差。最后，我使用 StackPane 将每个图表放置在彼此之上并具有透明背景。

图表的顺序必须如下:1. 背面有模拟路径图(LineChart)。2. 标准。偏差图(面积图)。3. 顶部的均值图(LineChart)。

图片 - 突出问题。

我怎样才能做到这一点？ CSS 是首选。

Answer 1

我设法使用 -fx-blend-mode 属性获得结果。以下是两个面积图的示例:

public void start(Stage stage) throws Exception {

    stage.setTitle("Test");
    final NumberAxis xAxis = new NumberAxis();
    final NumberAxis yAxis = new NumberAxis();
    xAxis.setLabel("X");
    final AreaChart<Number,Number> lineChart =
            new AreaChart<>(xAxis,yAxis);

    lineChart.setTitle("Test");

    XYChart.Series series1 = new XYChart.Series();
    series1.setName("S1");
    series1.getData().add(new XYChart.Data(0, 0));
    series1.getData().add(new XYChart.Data(20, 20));

    XYChart.Series series2 = new XYChart.Series();
    series2.setName("S2");
    series2.getData().add(new XYChart.Data(0, 0));
    series2.getData().add(new XYChart.Data(20, 10));

    Scene scene  = new Scene(lineChart,800,600);
    lineChart.getData().addAll(series1,series2);

    stage.setScene(scene);
    scene.getStylesheets().add("/test.css");
    stage.show();
}

以及 test.css 中的 css:

.default-color0.chart-series-area-fill {
    -fx-fill: #FF0000;
    -fx-blend-mode: difference;
}
.default-color1.chart-series-area-fill {
    -fx-fill: #FF0000;
    -fx-blend-mode: difference;
}

结果:

编辑
用于屏幕/乘法的 CSS:

.default-color0.chart-series-area-fill {
    -fx-fill: rgb(0,178,0);
    -fx-blend-mode: screen;
}

.default-color1.chart-series-area-fill {
    -fx-fill: rgb(255,246,255);
    -fx-blend-mode: multiply;
}

结果: