2014-10-10 2 views
1

Можно ли переместить/сдвинуть метки метки в диаграмму. В настоящее время я вижу, что api's, чтобы скрывать/показывать тиковые метки, есть API, который перемещает метки тика внутри диаграммы? Если API отсутствует, есть ли способ, который я могу использовать/применить, чтобы это сделать?Переместить ярлык метки JavaFx 2

Текущий код

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

Текущий результат

enter image description here

Ожидаемый результат enter image description here

ответ

2

Перевод одной оси

Вы можете перевести ось y на диаграмму.

Например:

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

Для того, чтобы обеспечить ось отображается на верхней части диаграммы, можно установить буфер глубины истину на сцене и установить г координату в YAxis -1 ,

yAxis.setTranslateZ(-1); 

Переводя нескольких осей

Ваш "ожидаемый результат" на самом деле имеет несколько вертикальных осей. К сожалению, не существует метода клонирования для клонирования узла в JavaFX. Таким образом, вам нужно будет создать новую ось и наложить ее поверх диаграммы. Один из способов добиться этого (который немного переборчив и неэффективен) - создать совершенно новую диаграмму и сложить ее поверх старой, аналогично тому, что сделано в решении draw layers of XYCharts. Другой способ сделать это, который, вероятно, предпочтительнее, но немного сложнее, - просто создать другую ось и уложить ее поверх исходной диаграммы.

Пример кода

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

оверлеев chart.css

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

Есть ли способ для 1. перемещать 30 и 240 внутри границы графика 2. центрировать метки оси Y по оси y. 3. установить линию оси y прозрачно, пока метка все еще отображается Ожидаемый скриншот результата - это то, что я ищу. – SDS

+0

Да, это все можно сделать SDS: 1 уже сделано в моем решении 2 - дополнительный запрос на перевод, а 3 - стиль css. Однако я не буду обновлять это решение с этими изменениями. – jewelsea