How to make the chart content area take up the max

2020-04-16 19:18发布

问题:

Pretty straight forward question: How to make the chart content area take up the maximum area available to it?

I'm using JavaFX. In my case I want to have many AreaCharts based on true/false yAxis (0/1). Unfortunatelly I can't find a solution how to change content height of these charts using method like setMaxHeight or setPrefHeight on yAxis or AreaChart objects.

I've already tried few answers from SO, but none of them works.

Here's a screenshot of what I have so far:

Any hints or tips?

回答1:

Restated Question

Your question is bit unclear but this is what I think you are asking is:

How to make the chart content area take up the maximum area available to it?

Perhaps it is not that, but anyway that is the question I am answering here.

Sample Output

Here is a screen shot of a small chart:

The chart has all axes, legends, titles and padding around the content removed. This allows the chart content to take up all of the available space, making display of very small charts possible. By default, the padding title and axis display would take up sufficient room that the chart content itself becomes illegible for very small charts.

Sample Code

In the code below, lots of things are have their visibility set to false and the preferred size of the axes is set to 0:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.*;
import javafx.stage.Stage;

import java.net.MalformedURLException;
import java.net.URISyntaxException;

public class AreaChartSample extends Application {

    @Override public void start(Stage stage) throws URISyntaxException, MalformedURLException {
        stage.setTitle("Area Chart Sample");
        final NumberAxis xAxis = new NumberAxis(1, 31, 1);
        final NumberAxis yAxis = new NumberAxis(0, 28, 1);

        xAxis.setAutoRanging(false);
        xAxis.setMinorTickVisible(false);
        xAxis.setTickMarkVisible(false);
        xAxis.setTickLabelsVisible(false);
        xAxis.setPrefSize(0, 0);
        yAxis.setAutoRanging(false);
        yAxis.setMinorTickVisible(false);
        yAxis.setTickMarkVisible(false);
        yAxis.setTickLabelsVisible(false);
        yAxis.setPrefSize(0, 0);

        final AreaChart<Number,Number> ac = 
            new AreaChart<>(xAxis,yAxis);

        ac.setHorizontalGridLinesVisible(false);
        ac.setVerticalGridLinesVisible(false);
        ac.setLegendVisible(false);
        ac.setVerticalZeroLineVisible(false);
        ac.setHorizontalZeroLineVisible(false);

        ac.getStylesheets().add(
                getClass().getResource("unpad-chart.css").toURI().toURL().toExternalForm()
        );

        XYChart.Series seriesApril= new XYChart.Series();
        seriesApril.setName("April");
        seriesApril.getData().add(new XYChart.Data(1, 4));
        seriesApril.getData().add(new XYChart.Data(3, 10));
        seriesApril.getData().add(new XYChart.Data(6, 15));
        seriesApril.getData().add(new XYChart.Data(9, 8));
        seriesApril.getData().add(new XYChart.Data(12, 5));
        seriesApril.getData().add(new XYChart.Data(15, 18));
        seriesApril.getData().add(new XYChart.Data(18, 15));
        seriesApril.getData().add(new XYChart.Data(21, 13));
        seriesApril.getData().add(new XYChart.Data(24, 19));
        seriesApril.getData().add(new XYChart.Data(27, 21));
        seriesApril.getData().add(new XYChart.Data(30, 21));
        seriesApril.getData().add(new XYChart.Data(31, 19));

        XYChart.Series seriesMay = new XYChart.Series();
        seriesMay.setName("May");
        seriesMay.getData().add(new XYChart.Data(1, 20));
        seriesMay.getData().add(new XYChart.Data(3, 15));
        seriesMay.getData().add(new XYChart.Data(6, 13));
        seriesMay.getData().add(new XYChart.Data(9, 12));
        seriesMay.getData().add(new XYChart.Data(12, 14));
        seriesMay.getData().add(new XYChart.Data(15, 18));
        seriesMay.getData().add(new XYChart.Data(18, 25));
        seriesMay.getData().add(new XYChart.Data(21, 25));
        seriesMay.getData().add(new XYChart.Data(24, 23));
        seriesMay.getData().add(new XYChart.Data(27, 26));
        seriesMay.getData().add(new XYChart.Data(31, 26));

        Scene scene  = new Scene(ac,80,60);
        ac.getData().addAll(seriesApril, seriesMay);

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

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

Also, some CSS removes padding. Place the CSS file in the same location as AreaChartSample.java and have your build system copy it to the build target directory.

unpad-chart.css

.chart {
    -fx-padding: 0px;
}
.chart-content {
    -fx-padding: 0px;
}
.axis {
    AXIS_COLOR: transparent;
}
.axis:top > .axis-label,
.axis:left > .axis-label {
    -fx-padding: 0;
}
.axis:bottom > .axis-label,
.axis:right > .axis-label {
    -fx-padding: 0;
}

Layout debugging advice

  • To debug layout issues, use ScenicView.
  • To determine default CSS styles to override, review modena.css:
    • for Java 8, modena.css is inside the jfxrt.jar file that ships with your JRE.