移动刻度标签JavaFx 2 [英] Move tick label JavaFx 2

问题描述

是否可以将刻度标签移动/移动到图表中。目前我看到api's隐藏/显示刻度标签是否有一个API移动图表内的刻度标签？如果没有API，那么我可以使用/申请这项技术吗？

Is it possible to move/shift the tick labels into the chart. Currently I see api's to hide/show tick labels is there an API that moves the tick labels inside the chart? If there isn't an API then is there a technique that I can use/apply to get this done?

当前代码

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

当前结果

预期结果

Expected result

推荐答案

翻译单轴

您可以在图表上翻译y轴。

You can translate the y axis on the chart.

例如：

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

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

To ensure the axis is displayed on top of the chart, you could set the depth buffer to true on the scene and set the z co-ordinate of the yAxis to -1.

yAxis.setTranslateZ(-1);

翻译多个轴

您的预期结果实际上有多个垂直轴。遗憾的是，没有克隆方法来克隆JavaFX中的节点。因此，您必须创建一个新轴并将其分层放在图表顶部。实现这一目标的一种方法（有点矫枉过正和低效率）是创建一个全新的图表并将其叠加在旧图表之上，类似于绘制XYCharts图层。另一种方法，可能更好，但有点棘手，只是创建另一个轴并将其堆叠在原始图表上。

Your "Expected result" actually has multiple vertical axes. Unfortunately there is no clone method to clone a node in JavaFX. So you will have to create a new axis and layer it on top of the chart. One way to accomplish that (which is a bit overkill and inefficient), is to create a completely new chart and layer it on top of the old one, similar to what is done in the solution to draw layers of XYCharts. The other way to do it, which is probably preferable but a bit trickier, would be just create another axis and stack it over the original chart.

示例代码

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

这篇关于移动刻度标签JavaFx 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！