Question

我有两个XY图表，我希望它们一个放在顶部，另一个放在JavaFX应用程序的底部。

两个图形宽度都应填充其“容器”，底部图形应比顶部图形小x倍。

为了重现性，这里是一个由Oracle's tutorial构建的示例：

import javafx.application.Application;
import javafx.geometry.Side;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Test extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        final CategoryAxis xAxis1 = new CategoryAxis();
        final NumberAxis yAxis1 = new NumberAxis();
        xAxis1.setLabel("Month");
        final LineChart<String, Number> lineChart1 =
                new LineChart<>(xAxis1, yAxis1);

        final CategoryAxis xAxis2 = new CategoryAxis();
        xAxis2.setLabel("Month");
        final NumberAxis yAxis2 = new NumberAxis();
        final LineChart<String, Number> lineChart2 =
                new LineChart<>(xAxis2, yAxis2);

        lineChart1.setLegendVisible(false);
        lineChart2.setLegendVisible(false);

        XYChart.Series series1 = new XYChart.Series();
        series1.setName("Portfolio 1");

        series1.getData().add(new XYChart.Data("Jan", 23));
        series1.getData().add(new XYChart.Data("Feb", 14));
        series1.getData().add(new XYChart.Data("Mar", 15));
        series1.getData().add(new XYChart.Data("Apr", 24));
        series1.getData().add(new XYChart.Data("May", 34));
        series1.getData().add(new XYChart.Data("Jun", 36));
        series1.getData().add(new XYChart.Data("Jul", 22));
        series1.getData().add(new XYChart.Data("Aug", 45));
        series1.getData().add(new XYChart.Data("Sep", 43));
        series1.getData().add(new XYChart.Data("Oct", 17));
        series1.getData().add(new XYChart.Data("Nov", 29));
        series1.getData().add(new XYChart.Data("Dec", 25));

        XYChart.Series series2 = new XYChart.Series();
        series2.setName("Portfolio 2");
        series2.getData().add(new XYChart.Data("Jan", 33));
        series2.getData().add(new XYChart.Data("Feb", 34));
        series2.getData().add(new XYChart.Data("Mar", 25));
        series2.getData().add(new XYChart.Data("Apr", 44));
        series2.getData().add(new XYChart.Data("May", 39));
        series2.getData().add(new XYChart.Data("Jun", 16));
        series2.getData().add(new XYChart.Data("Jul", 55));
        series2.getData().add(new XYChart.Data("Aug", 54));
        series2.getData().add(new XYChart.Data("Sep", 48));
        series2.getData().add(new XYChart.Data("Oct", 27));
        series2.getData().add(new XYChart.Data("Nov", 37));
        series2.getData().add(new XYChart.Data("Dec", 29));

        lineChart1.getData().addAll(series1);
        lineChart2.getData().addAll(series2);

        Scene scene = new Scene(createVBoxLayout(lineChart1, lineChart2), 800, 600);

        stage.setScene(scene);
        stage.show();
    }

    private Parent createVBoxLayout(XYChart chart1, XYChart chart2) {
        VBox vBox = new VBox(chart1, chart2);
        chart1.prefHeight(200);
        chart1.minHeight(200);
        chart1.maxHeight(200);
        chart2.prefHeight(400);
        chart2.minHeight(400);
        chart2.maxHeight(400);
        return vBox;
    }

    private Parent createGridLayout(XYChart chart1, XYChart chart2) {
        GridPane gridPane = new GridPane();
        gridPane.add(chart1, 0, 0, 1, 1);
        gridPane.add(chart2, 0, 1, 1, 2);

        return gridPane;
    }

    public static void main(String[] args) {
        launch(args);
    }

}

底部的图形应该是顶部的图形的两倍。

我尝试了两种方法：

方法createVBoxLayout创建一个VBox并使用首选/最小/最大尺寸来修改图表大小。

结果如下：

显然，底部图形不是顶部图形的两倍。此外，调整窗口大小时不会保持大小比例。

方法createGridLayout创建一个GridPane，结果如下：

现在，顶部图形是底部图形的两倍，这与方法中编码的图形相反！而且，图形不会填充窗口的宽度。最后，在调整窗口大小时，图表重叠并且不保持其相对大小（应为1/3 - 2/3）。

Answer 1

方法prefHeight(...)，minHeight(...)等不设置首选高度等。它们返回那些的计算值，参数是图表的宽度（即{{1}如果宽度为200＆＃34;），请告诉我首选高度。请参阅documentation。

你需要

chart1.prefHeight(200)

等

对于网格窗格版本，请使用chart1.setPrefHeight(200); chart1.setMinHeight(200); chart1.setMaxHeight(200);和RowConstraints来控制网格的布局。简单地调整行的大小以包含它们包含的节点，因此使图表跨越两行可能只给出其中一行零高度。（再次，请参阅documentation。）

ColumnConstraints

或

private Parent createGridLayout(XYChart chart1, XYChart chart2) {
    GridPane gridPane = new GridPane();
    gridPane.add(chart1, 0, 0, 1, 1);
    gridPane.add(chart2, 0, 1, 1, 2);

    RowConstraints top = new RowConstraints(200);
    RowConstraints bottom = new RowConstraints(400);
    gridPane.getRowConstraints().addAll(top, bottom);

    ColumnConstraints cc = new ColumnConstraints();
    cc.setHgrow(Priority.ALWAYS);
    gridPane.getColumnConstraints().add(cc);

    return gridPane;
}

控制两个XYCharts的大小

1 个答案: