java - 在折线图中移动并设置 XYChart.Data 节点的值

Question

我想要一个交互式折线图，允许我移动和设置图表上点的基础值。将鼠标事件 ondragged 处理程序添加到 XYChart.Data 点的节点应该允许我这样做，但我需要能够将鼠标事件位置转换为该点的轴参照系。使用以下内容；

xAxis.getValueForDisplay(event.getX()).doubleValue();

其中 xAxis 是折线图的数字轴，不适用于应用于 XYChart.Data 点的鼠标事件(当您在图表背景的节点上使用此方法时会起作用)。下面是我的代码；

package com.jtech;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.Axis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;

public class MovePoint extends Application {

    class MouseHandler implements EventHandler<MouseEvent> {
        private XYChart.Data data;
        private Axis<Number> xAxis, yAxis;

        public MouseHandler(XYChart.Data data, Axis<Number> xAxis, Axis<Number> yAxis) {
            this.data=data;
            this.xAxis=xAxis;
            this.yAxis=yAxis;
        }

        @Override
        public void handle(MouseEvent event) {
            //we want these in the axis coordinate frame
            double x =  xAxis.getValueForDisplay(event.getX()).doubleValue();
            double y =  yAxis.getValueForDisplay(event.getY()).doubleValue();

            if (event.getEventType() == MouseEvent.MOUSE_DRAGGED) {
                System.out.println(String.format("(%.2f,%.2f)",x,y));
                //data.setXValue(x);
                //data.setYValue(y);
            }
        }
    }

    @Override
    public void start(Stage stage) {
        final NumberAxis xAxis = new NumberAxis(0,6,1);
        final NumberAxis yAxis = new NumberAxis(0,10,2);

        final LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
        lineChart.setTitle("Point moving example");
        XYChart.Series series = new XYChart.Series();

        final XYChart.Data d1 = new XYChart.Data(0.0, 0.0);
        final XYChart.Data d2 = new XYChart.Data(0.5, 2.0);
        final XYChart.Data d3 = new XYChart.Data(2.0, 2.5);
        final XYChart.Data d4 = new XYChart.Data(3.5, 3.5);
        final XYChart.Data d5 = new XYChart.Data(5.0, 8.0);

        series.getData().addAll(d1,d2,d3,d4,d5);
        lineChart.getData().add(series);
        lineChart.setLegendVisible(false);

        final Scene scene = new Scene(lineChart, 400, 300);
        stage.setScene(scene);
        stage.show();

        registerNode(d1,xAxis, yAxis);
        registerNode(d2,xAxis, yAxis);
        registerNode(d3,xAxis, yAxis);
        registerNode(d4,xAxis, yAxis);
        registerNode(d5,xAxis, yAxis);
    }

    private void registerNode(XYChart.Data data, Axis<Number> xAxis, Axis<Number> yAxis) {
        final Node node = data.getNode();
        node.setOnMouseDragged(new MouseHandler(data,xAxis,yAxis));
    }

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

实现此目标的正确方法是什么？我看过一些翻译实际节点的示例，但我很想知道我是否可以通过直接设置数据的实际 X、Y 值来做到这一点。

Answer 1

这似乎完全有可能:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Point2D;
import javafx.scene.Cursor;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class DraggingLineChartSample extends Application {

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Line Chart Sample");
        //defining the axes
        final NumberAxis xAxis = new NumberAxis(0, 12, 1);
        final NumberAxis yAxis = new NumberAxis(0, 50, 5);
        xAxis.setLabel("Number of Month");
        //creating the chart
        final LineChart<Number,Number> lineChart = 
                new LineChart<Number,Number>(xAxis,yAxis);

        lineChart.setTitle("Stock Monitoring, 2010");

        lineChart.setAnimated(false);

        //defining a series
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("My portfolio");
        //populating the series with data
        series.getData().add(new XYChart.Data<>(1, 23));
        series.getData().add(new XYChart.Data<>(2, 14));
        series.getData().add(new XYChart.Data<>(3, 15));
        series.getData().add(new XYChart.Data<>(4, 24));
        series.getData().add(new XYChart.Data<>(5, 34));
        series.getData().add(new XYChart.Data<>(6, 36));
        series.getData().add(new XYChart.Data<>(7, 22));
        series.getData().add(new XYChart.Data<>(8, 45));
        series.getData().add(new XYChart.Data<>(9, 43));
        series.getData().add(new XYChart.Data<>(10, 17));
        series.getData().add(new XYChart.Data<>(11, 29));
        series.getData().add(new XYChart.Data<>(12, 25));        

        Scene scene  = new Scene(new BorderPane(lineChart),800,600);
        lineChart.getData().add(series);

        for (Data<Number, Number> data : series.getData()) {
            Node node = data.getNode() ;
            node.setCursor(Cursor.HAND);
            node.setOnMouseDragged(e -> {
                Point2D pointInScene = new Point2D(e.getSceneX(), e.getSceneY());
                double xAxisLoc = xAxis.sceneToLocal(pointInScene).getX();
                double yAxisLoc = yAxis.sceneToLocal(pointInScene).getY();
                Number x = xAxis.getValueForDisplay(xAxisLoc);
                Number y = yAxis.getValueForDisplay(yAxisLoc);
                data.setXValue(x);
                data.setYValue(y);
            });
        }


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

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