如何將散點圖與折線圖組合以顯示回歸線？ 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，而不能同時設置為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

我向Pane添加了兩個ScatterChart，我將Opacity設置為（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沒有行，但對於其他系列，您只需更改數字（默認顏色XX ）以定義哪個系列。

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

與@JoséPereda非常相似，但也許比搞亂CSS文件容易一些。