移动刻度标签 JavaFx 2

Question

是否可以将刻度标签移动/移动到图表中。目前我看到了隐藏/显示刻度标签的 api 是否有一个 API 可以在图表内移动刻度标签？如果没有 API，那么是否有我可以使用/应用的技术来完成这项工作？

当前代码

public class Graph extends Application{
private NumberAxis xAxis;
private NumberAxis yAxis;

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

@Override
public void start(final Stage primaryStage) throws Exception
{
    xAxis = new NumberAxis(0, 300, 20);
    xAxis.setAutoRanging(false);
    xAxis.setAnimated(false);
    xAxis.setMinorTickVisible(false);
    xAxis.setTickLabelsVisible(false);
    xAxis.setTickMarkVisible(false);

    yAxis = new NumberAxis(30, 240, 30);
    yAxis.setAutoRanging(false);
    yAxis.setAnimated(false);
    yAxis.setTickMarkVisible(false);
    yAxis.setMinorTickVisible(false);
    yAxis.setMinorTickCount(3);

    final LineChart<Number, Number> ctg = new LineChart<>(xAxis, yAxis);

    ctg.setAnimated(false);
    ctg.setCreateSymbols(false);
    ctg.setAlternativeRowFillVisible(false);
    ctg.setLegendVisible(false);
    ctg.setHorizontalGridLinesVisible(true);
    ctg.setVerticalGridLinesVisible(true);

    Series<Number, Number> series = new LineChart.Series<>();
    ctg.getData().add(series);

    for (int i = 0; i < 300; i += 5) {

        XYChart.Series minorYGrid = new XYChart.Series();
        minorYGrid.getData().add(new XYChart.Data(i, 30));
        minorYGrid.getData().add(new XYChart.Data(i, 240));
        ctg.getData().add(minorYGrid);
    }

    for (int i = 40; i <= 240; i += 10) {

        XYChart.Series minorXGrid = new XYChart.Series();
        minorXGrid.getData().add(new XYChart.Data(0, i));
        minorXGrid.getData().add(new XYChart.Data(500, i));
        ctg.getData().add(minorXGrid);
    }

    final Scene scene = new Scene(ctg, 1600, 400);
    scene.getStylesheets().add("resources/application.css");
    primaryStage.setScene(scene);
    primaryStage.show();
}
}

当前结果

预期结果

Answer 1

平移单轴

您可以平移图表上的 y 轴。

例如：

yAxis.translateXProperty().bind(
    xAxis.widthProperty().divide(2)
);

为确保坐标轴显示在图表顶部，您可以在场景中将深度缓冲区设置为 true，并将 yAxis 的 z 坐标设置为 -1。

yAxis.setTranslateZ(-1);

平移多个轴

您的“预期结果”实际上有多个垂直轴。不幸的是，在 JavaFX 中没有克隆方法来克隆节点。因此，您必须创建一个新轴并将其分层放在图表顶部。实现这一点的一种方法（有点矫枉过正且效率低下）是创建一个全新的图表并将其叠加在旧图表之上，类似于draw layers of XYCharts 的解决方案中所做的。另一种可能更可取但有点棘手的方法是创建另一个轴并将其堆叠在原始图表上。

示例代码

MultiAxisChart.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class MultiAxisChart extends Application {

    @Override
    public void start(final Stage primaryStage) throws Exception {
        final StackPane chartStack = createChartStack();

        final Scene scene = new Scene(chartStack, 1600, 400, true);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private StackPane createChartStack() {
        LineChart<Number, Number> bottomChart = createChart();
        LineChart<Number, Number> topChart    = createChart();

        bottomChart.getYAxis().translateXProperty().bind(
                bottomChart.getXAxis().widthProperty().multiply(1.0/3)
        );
        topChart.getYAxis().translateXProperty().bind(
                topChart.getXAxis().widthProperty().multiply(2.0/3)
        );

        bottomChart.getYAxis().setTranslateZ(-1);
        topChart.getYAxis().setTranslateZ(-1);

        topChart.getStylesheets().addAll(getClass().getResource(
                "overlay-chart.css"
        ).toExternalForm());

        return new StackPane(bottomChart, topChart);
    }

    private LineChart<Number, Number> createChart() {
        NumberAxis xAxis = new NumberAxis(0, 300, 20);
        xAxis.setAutoRanging(false);
        xAxis.setAnimated(false);
        xAxis.setMinorTickVisible(false);
        xAxis.setTickLabelsVisible(false);
        xAxis.setTickMarkVisible(false);

        NumberAxis yAxis = new NumberAxis(30, 240, 30);
        yAxis.setAutoRanging(false);
        yAxis.setAnimated(false);
        yAxis.setTickMarkVisible(false);
        yAxis.setMinorTickVisible(false);
        yAxis.setMinorTickCount(3);

        final LineChart<Number, Number> ctg = new LineChart<>(xAxis, yAxis);

        ctg.setAnimated(false);
        ctg.setCreateSymbols(false);
        ctg.setAlternativeRowFillVisible(false);
        ctg.setLegendVisible(false);
        ctg.setHorizontalGridLinesVisible(true);
        ctg.setVerticalGridLinesVisible(true);

        return ctg;
    }

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

overlay-chart.css

/** file: overlay-chart.css (place in same directory as MultiAxisChart) */
.chart-plot-background {
    -fx-background-color: transparent;
}