如何使图表内容区域占用可用的最大区域？ [英] How to make the chart content area take up the maximum area available to it?

问题描述

非常直截了当的问题：如何让图表内容区域占用最大可用面积？

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

我正在使用JavaFX的。在我的情况下，我希望有许多基于真/假 yAxis （0/1）的AreaCharts。遗憾的是，我无法找到如何使用yAxis上的 setMaxHeight 或 setPrefHeight 等方法更改这些图表的内容高度的解决方案或者是AreaChart对象。

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.

我已经尝试了几个来自SO的答案，但没有一个有效。

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

这是我到目前为止的截图：

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

任何提示或提示？

推荐答案

重申问题

您的问题有点不清楚，但我认为您要问的是：

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

如何使图表内容区域占用可用的最大面积？

也许不是这样，但无论如何这是我在这里回答的问题。

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

样本输出

这是一个sc reen shot of a small chart：

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.

示例代码

在下面的代码中，很多东西的可见性设置为false，并且轴的首选大小设置为0：

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

此外，有些CSS会删除填充。将CSS文件放在与 AreaChartSample.java 相同的位置，让您的构建系统将其复制到构建目标目录。

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

布局调试建议

• 要调试布局问题，请使用 ScenicView 。


• 要确定要覆盖的默认CSS样式，请查看 modena.css ：
  
  
  $ b $ 8
  • for Java 8， modena.css 位于JRE附带的 jfxrt.jar 文件中。
  
  
  • 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.

    这篇关于如何使图表内容区域占用可用的最大区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！