如何在JavaFX中填充两个AreaCharts? [英] How to fill between two AreaCharts in JavaFX?
问题描述
JavaFX中的Area Chart填充数据线和零y轴之间的区域。
The Area Chart in JavaFX fills the area between the data line and the zero y-axis.
我只想知道如何在两张区域图表之间填写。
I would only like to know how to fill between two Area Charts.
更多详情:
我正在产生一堆随机游走。然后,我为路径创建三个不同的XYCharts,平均值和平均值+/- std。偏差。最后,我使用StackPane将每个图表以透明背景放在彼此的顶部。
I am generating a bunch of random walks. Then, I create three different XYCharts for the Paths, the mean, and the mean +/- std. deviation. Finally, I use a StackPane to place each chart on top of each other with transparent background.
图表的顺序必须如下:
1.背面的模拟路径图表(LineChart)。
2.标准。偏差图(AreaChart)。
3.顶部的平均图表(LineChart)。
The order of the charts has to be the following: 1. Simulated paths chart on the very back (LineChart). 2. Std. Deviation chart (AreaChart). 3. The mean chart on top (LineChart).
图片 - 突出显示问题。
Pictures - highlighting the problem.
我该如何做到这一点? CSS是首选。
How can I accomplish this? CSS is preferred.
推荐答案
我设法使用 -fx-blend-mode
财产。以下是两个区域图表的示例:
I managed to achieve the result using -fx-blend-mode
property. Here is an example for two area charts:
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:
And the result:
Edit
CSS for screen/multiply:
.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;
}
结果:
这篇关于如何在JavaFX中填充两个AreaCharts?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!