如何将散点图与折线图组合以显示回归线？ JavaFX的

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

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

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

final ScatterChart sc = new ScatterChart(xAxis,yAxis); final LineChart 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(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 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 sc = new ScatterChart(xAxis,yAxis); final LineChart 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, 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 sc = new ScatterChart<>(xAxis, yAxis); final LineChart 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文件容易一些。