控制两个XYChart的大小 [英] Controlling the size of two XYCharts

问题描述

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

I have two XY charts and I want them to be placed one on the top and the other at the bottom of a JavaFX application.

两个图的宽度均应填充其容器"，底部的图应比顶部的图小x倍.

Both graph widths should fill their "container" and the bottom graph should be x times smaller than the top graph.

出于可重复性考虑，下面是从 Oracle的示例构建的示例.教程:

For the sake of reproducibility, here is an example built from 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);
    }

}

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

The graph on the bottom should be twice as big as the one on the top.

我尝试了两种方法:

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

• Method createVBoxLayout creates a VBox and uses the prefered/min/max sizes to modify the chart size.

这是结果:

很显然，底部图形的大小不是顶部图形的两倍.此外，在调整窗口大小时将无法保持大小比例.

Clearly, the bottom graph is not twice as big as the graph at the top. Moreover, the size ratio would not be kept when the window is resized.

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

• The method createGridLayout creates a GridPane, here is the result:

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

Now, it's the top graph that is twice as big as the bottom one, which is the opposite of what is coded in the method! Moreover, the graphs do not fill the width of the window. Finally, when resizing the window, the charts overlap and don't keep their relative sizes (should be 1/3 - 2/3).

推荐答案

方法prefHeight(...)，minHeight(...)等未设置首选高度，以此类推.它们返回这些值的计算值，参数为图表的宽度(即chart1.prefHeight(200)表示告诉我，如果宽度为200，则首选高度").请参见文档

The methods prefHeight(...), minHeight(...), etc do not set the preferred height, etc. They return the computed values for those, with the argument being the width for the chart (i.e. chart1.prefHeight(200) means "tell me the preferred height if the width is 200"). See the documentation.

您需要

chart1.setPrefHeight(200);
chart1.setMinHeight(200);
chart1.setMaxHeight(200);

等

对于网格窗格版本，使用RowConstraints和ColumnConstraints来控制网格的布局.只需调整行的大小即可包含它们所包含的节点，因此使图表跨两行可能会使行之一的高度为零. (再次，请参见文档 )

For the grid pane version, use RowConstraints and ColumnConstraints to control the layout of the grid. The rows are simply resized to contain the nodes they contain, so making a chart span two rows will probably just give one of the rows zero height. (Again, see the documentation.)

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

或

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

    RowConstraints top = new RowConstraints();
    top.setPercentHeight(100.0 / 3.0);
    RowConstraints bottom = new RowConstraints();
    bottom.setPercentHeight(200.0 / 3.0);
    gridPane.getRowConstraints().addAll(top, bottom);

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

    return gridPane;
}

这篇关于控制两个XYChart的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！