java 如何结合散点图和折线图来显示回归线？JavaFX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26803380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to combine scatter chart with line chart to show line of regression? JavaFX
提问by HassanTheGooner
I've created a scatter chart with two sets of data; the first set is the actual data (x = year and y = pence) and the second set produces the same points but for the line of regression. However the problem I'm having is that both sets of data are shown as scatter points. I want to show the first set as scatter points and have the second set on the same graph but showing as a line. I've been at it for a long time but I can't figure out a way to do this.
我用两组数据创建了一个散点图；第一组是实际数据（x = 年和 y = 便士），第二组产生相同的点，但用于回归线。但是，我遇到的问题是两组数据都显示为散点。我想将第一组显示为散点，并将第二组显示在同一图表上，但显示为一条线。我已经研究了很长时间，但我想不出一种方法来做到这一点。
the scatter chart code is shown on oracle; http://docs.oracle.com/javafx/2/charts/scatter-chart.htm?
散点图代码显示在oracle上；http://docs.oracle.com/javafx/2/charts/scatter-chart.htm？
For example, I've been trying to do this:
例如，我一直在尝试这样做：
final ScatterChart<Number,Number> sc = new
ScatterChart<Number,Number>(xAxis,yAxis);
final LineChart<Number,Number> lc = new
LineChart<Number,Number>(xAxis,yAxis);
XYChart.Series series1 = new XYChart.Series();
series1.setName("Equities");
series1.getData().add(new XYChart.Data(4.2, 193.2));
series1.getData().add(new XYChart.Data(2.8, 33.6));
XYChart.Series series2 = new XYChart.Series();
series2.setName("Mutual funds");
series2.getData().add(new XYChart.Data(5.2, 229.2));
series2.getData().add(new XYChart.Data(2.4, 37.6));
sc.getData().addAll(series1);
lc.getData(0.addAll(series2);
Scene scene = new Scene(sc, 500, 400);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
The problem is that the scene can only be set to either sc or lc, not both. Is there anything that I can do or is it just impossible?
问题是场景只能设置为 sc 或 lc，不能同时设置。有什么我可以做的还是不可能的？
Thanks
谢谢
回答by José Pereda
While @Mailkov solution is fine, it has some drawbacks (overlapping legends, tooltips...).
虽然@Mailkov 解决方案很好，但它有一些缺点（重叠的图例、工具提示......）。
Just for mixing an scattered chart with a line chart in the same chart there's a very simple way, with css.
只是为了在同一图表中混合散点图和折线图，有一种非常简单的方法，使用 css。
We create one LineChartwith two series. Let's say the first one is the scatter, and the second the line, and with css we get rid of the line for the first one, while (this is optional) we take out the symbols of the second one, and keep both legends.
我们创建一个LineChart有两个系列。假设第一个是散点图，第二个是线，使用 css 我们去掉第一个的线，同时（这是可选的）我们取出第二个的符号，并保留两个图例。
Using this css (chart.css):
使用这个 css (chart.css)：
.default-color0.chart-series-line { -fx-stroke: transparent; }
.default-color1.chart-series-line { -fx-stroke: red; }
.default-color0.chart-line-symbol {
-fx-background-color: white, green;
}
.default-color1.chart-line-symbol {
-fx-background-color: transparent, transparent;
}
.default-color0.chart-legend-item-symbol{
-fx-background-color: green;
}
.default-color1.chart-legend-item-symbol{
-fx-background-color: red;
}
and this code:
和这个代码：
@Override
public void start(Stage stage) {
final LineChart<Number,Number> sc = new LineChart<>(new NumberAxis(),new NumberAxis());
XYChart.Series series1 = new XYChart.Series();
series1.setName("Equities");
series1.getData().add(new XYChart.Data(4.2, 193.2));
series1.getData().add(new XYChart.Data(2.8, 33.6));
series1.getData().add(new XYChart.Data(6.8, 23.6));
XYChart.Series series2 = new XYChart.Series();
series2.setName("Mutual funds");
series2.getData().add(new XYChart.Data(5.2, 229.2));
series2.getData().add(new XYChart.Data(2.4, 37.6));
series2.getData().add(new XYChart.Data(6.4, 15.6));
sc.setAnimated(false);
sc.setCreateSymbols(true);
sc.getData().addAll(series1, series2);
Scene scene = new Scene(sc, 500, 400);
scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
we will have one simple chart with two different series:
我们将有一个包含两个不同系列的简单图表：
回答by Mailkov
I add to Pane the two ScatterChart and i have set Opacity at (0.5) try it.
我将两个 ScatterChart 添加到窗格中，并将不透明度设置为 (0.5) 试试看。
I hope I have helped.
我希望我有所帮助。
final ScatterChart<Number,Number> sc = new
ScatterChart<Number,Number>(xAxis,yAxis);
final LineChart<Number,Number> lc = new
LineChart<Number,Number>(xAxis,yAxis);
XYChart.Series series1 = new XYChart.Series();
series1.setName("Equities");
series1.getData().add(new XYChart.Data(4.2, 193.2));
series1.getData().add(new XYChart.Data(2.8, 33.6));
XYChart.Series series2 = new XYChart.Series();
series2.setName("Mutual funds");
series2.getData().add(new XYChart.Data(5.2, 229.2));
series2.getData().add(new XYChart.Data(2.4, 37.6));
sc.getData().addAll(series1);
lc.getData().addAll(series2);
Pane pane=new Pane();
pane.getChildren().add(sc);
pane.getChildren().add(lc);
lc.setOpacity(0.5);
Scene scene = new Scene(pane, 500, 400);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
回答by Nicolas56
I do not have enough "reputation" to add a comment below Mailkov's answer, but I think that there is an issue with the proposed answer.
我没有足够的“声誉”来在Mailkov的答案下方添加评论，但我认为建议的答案存在问题。
1)As a matter of fact, the full orange dots of the scattered chart are not where they are supposed to be (x = 2.8 and x = 4.2).
1)事实上，散点图中完整的橙色圆点不在它们应有的位置（x = 2.8 和 x = 4.2）。
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class Exemple158bis_JavaFX_Overlaid_Stacked_Charts extends Application {
@Override
public void start(Stage stage) throws Exception {
NumberAxis xAxis = new NumberAxis();
NumberAxis yAxis = new NumberAxis();
final ScatterChart<Number, Number> sc = new ScatterChart<>(xAxis, yAxis);
final LineChart<Number, Number> lc = new LineChart<>(xAxis, yAxis);
XYChart.Series series1 = new XYChart.Series();
series1.setName("Equities");
series1.getData().add(new XYChart.Data(4.2, 193.2));
series1.getData().add(new XYChart.Data(2.8, 33.6));
XYChart.Series series2 = new XYChart.Series();
series2.setName("Mutual funds");
series2.getData().add(new XYChart.Data(5.2, 229.2));
series2.getData().add(new XYChart.Data(2.4, 37.6));
sc.getData().addAll(series1);
lc.getData().addAll(series2);
Pane pane = new Pane();
pane.getChildren().add(sc);
pane.getChildren().add(lc);
lc.setOpacity(0.5);
Scene scene = new Scene(pane, 800, 600);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
2)A solution is to set the bounds of the axis from the beginning:
2）一个解决方案是从头开始设置轴的边界：
NumberAxis xAxis = new NumberAxis(0, 5.5, 0.5);
NumberAxis yAxis = new NumberAxis(0, 240, 10);
回答by macster110
An easier way might be just to use LineChart for all series and then add the below line for any series in which you don't wantlines to be plotted. Line below changes series 0 to have no line but for other series you can simply change number (default-colourXX) to define which series.
一种更简单的方法可能是对所有系列使用 LineChart，然后为您不想在其中绘制线条的任何系列添加以下行。下面的行将系列 0 更改为没有线，但对于其他系列，您可以简单地更改编号（默认颜色XX）来定义哪个系列。
sc.lookup(".default-color0.chart-series-line").setStyle("-fxstroke: transparent");
Very similar to @José Pereda but perhaps little easier than messing around with CSS files.
与@José Pereda 非常相似，但可能比处理 CSS 文件更容易。
