Làm thế nào để kết hợp biểu đồ phân tán với biểu đồ dạng đường để hiển thị đường hồi qui? JavaFX

Question

Tôi đã tạo một biểu đồ phân tán với hai bộ dữ liệu; tập đầu tiên là dữ liệu thực tế (x = năm và y = pence) và tập thứ hai tạo ra cùng một điểm nhưng cho dòng hồi quy. Tuy nhiên vấn đề tôi gặp phải là cả hai bộ dữ liệu được hiển thị dưới dạng các điểm phân tán. Tôi muốn hiển thị tập đầu tiên là điểm phân tán và có tập thứ hai trên cùng một biểu đồ nhưng hiển thị dưới dạng một dòng. Tôi đã ở đó một thời gian dài nhưng tôi không thể tìm ra cách để làm điều này.

mã biểu đồ phân tán được hiển thị trên oracle; http://docs.oracle.com/javafx/2/charts/scatter-chart.htm

Ví dụ, tôi đã cố gắng để làm điều này:

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

Vấn đề là cảnh chỉ có thể được thiết lập để một trong hai sc hoặc lc, không phải cả hai. Có bất cứ điều gì tôi có thể làm hoặc là nó chỉ là không thể?

Cảm ơn

Answer 1

Trong khi @Mailkov giải pháp là tốt, nó có một số nhược điểm (chồng chéo huyền thoại, tooltips ...).

Chỉ cần trộn biểu đồ phân tán với biểu đồ dạng đường trong cùng biểu đồ có cách rất đơn giản, với css.

Chúng tôi tạo một LineChart với hai chuỗi. Giả sử cái đầu tiên là phân tán, và dòng thứ hai, và với css chúng ta loại bỏ dòng đầu tiên, trong khi (tùy chọn) chúng ta lấy ra các ký hiệu thứ hai và giữ cả hai truyền thuyết.

Sử dụng css này (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; 
} 

và mã này:

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

chúng ta sẽ có một biểu đồ đơn giản với hai loạt khác nhau:

Answer 2

Tôi thêm vào Pane hai ScatterChart và tôi đã đặt Opacity tại (0.5) thử.

Tôi hy vọng tôi đã giúp.

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

Tôi không có đủ "danh tiếng" để thêm nhận xét bên dưới Mailkov 's câu trả lời, nhưng tôi nghĩ rằng có một vấn đề với câu trả lời được đề xuất.

1) Như một vấn đề của thực tế, các dấu chấm màu cam đầy đủ các biểu đồ phân tán không phải là nơi họ có nghĩa vụ phải được (x = 2,8 và 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) Một giải pháp là để thiết lập các giới hạn của trục từ đầu:

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

Answer 4

Một cách dễ dàng hơn có thể là chỉ để sử dụng LineChart cho tất cả các chuỗi và sau đó thêm dòng dưới đây cho bất kỳ chuỗi nào trong đó bạn không muốn dòng được vẽ. Dòng bên dưới thay đổi chuỗi 0 để không có dòng nhưng đối với chuỗi khác bạn chỉ có thể thay đổi số (màu mặc định XX) để xác định chuỗi nào.

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

Rất giống với @ José Pereda nhưng có lẽ ít dễ dàng hơn là rối tung với các tệp CSS.