如何结合散点图和折线图来显示回归线?JavaFX [英] How to combine scatter chart with line chart to show line of regression? JavaFX

问题描述

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

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.

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

the scatter chart code is shown on 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);
}

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

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?

谢谢

推荐答案

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

While @Mailkov solution is fine, it has some drawbacks (overlapping legends, tooltips...).

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

Just for mixing an scattered chart with a line chart in the same chart there's a very simple way, with css.

我们创建了一个带有两个系列的 LineChart.假设第一个是散点图，第二个是线，使用 css 我们去掉第一个的线，同时(这是可选的)我们取出第二个的符号，并保留两个图例.

We create one LineChart with 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.

使用这个 css (chart.css):

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

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

we will have one simple chart with two different series:

这篇关于如何结合散点图和折线图来显示回归线?JavaFX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！