如何结合散点图和折线图显示回归线？ JavaFX

Question

我创建了一个包含两组数据的散点图；第一组是实际数据（x = 年份和 y = 便士），第二组产生相同的点，但用于回归线。但是我遇到的问题是两组数据都显示为散点。我想将第一组显示为散点，并将第二组显示在同一图表上，但显示为一条线。我已经做了很长时间了，但我想不出办法来做到这一点。

散点图代码在oracle上显示； http://docs.oracle.com/javafx/2/charts/scatter-chart.htm�

例如，我一直在尝试这样做：

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);
}

问题是场景只能设置为sc或lc，不能同时设置。有什么我能做的还是不可能的？

谢谢

Answer 1

虽然@Mailkov 解决方案很好，但它有一些缺点（重叠的图例、工具提示...）。

只是为了在同一个图表中混合散点图和折线图，有一个非常简单的方法，使用 css。

我们用两个系列创建一个LineChart。假设第一个是散点图，第二个是线，使用 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;
 }

还有这段代码：

@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();
}

我们将有一个包含两个不同系列的简单图表：

Answer 2

我将两个 ScatterChart 添加到窗格中，并将不透明度设置为 (0.5) 试试看。

我希望我有所帮助。

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);
}

Answer 3

我没有足够的“声誉”在 Mailkov 的答案下方添加评论，但我认为建议的答案存在问题。

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) 一种解决方法是从头开始设置轴的边界：

NumberAxis xAxis = new NumberAxis(0, 5.5, 0.5); 
NumberAxis yAxis = new NumberAxis(0, 240, 10); 

Answer 4

一种更简单的方法可能是对所有系列使用 LineChart，然后为您不希望 绘制线条的任何系列添加以下行。下面的行将系列 0 更改为没有线，但对于其他系列，您可以简单地更改数字 (default-colorXX) 来定义哪个系列。

sc.lookup(".default-color0.chart-series-line").setStyle("-fxstroke: transparent");

与@José Pereda 非常相似，但可能比处理 CSS 文件容易一些。