JavaFX LineChart悬停值 [英] JavaFX LineChart Hover Values

问题描述

我正在用JavaFX创建折线图.目前一切都很好，它可以使用数据库存储过程中所需的数据成功创建图表.无论如何，如果可能的话，我需要对LineChart上的每个数据点进行鼠标悬停事件，该事件指出了特定点后面的值，例如150,000英镑.我已经在PieCharts上看到了这样的示例，它显示了悬停时的％值，但是我在LineCharts的任何地方都找不到示例，甚至可以做到吗?

I am in the process of creating a line chart in JavaFX. All is good currently and it successfully creates the chart with the data I need from a database stored procedure. Anyway what I require if possible is for every data point on the LineChart to have a mouse hover event on it which states the value behind the specific point, for example £150,000. I have seen examples of this been done on PieCharts where it shows the % value on hover but I cannot find examples anywhere for LineCharts, can this even be done?

如果可以的话，谁能指出我正确的方向?

Can anyone point me in the right direction if possible?

到目前为止的代码:

private static final String MINIMIZED = "MINIMIZED";
private static final String MAXIMIZED = "MAXIMIZED";
private static String chartState = MINIMIZED;
// 12 Month Sales Chart
XYChart.Series<String, Number> series = new XYChart.Series<>();
XYChart.Series<String, Number> series2 = new XYChart.Series<>();

public void getDeltaData() {

    try {
        Connection con = DriverManager.getConnection(connectionUrl);
        //Get all records from table
        String SQL = "";
        Statement stmt = con.createStatement();

        //Create the result set from query execution.
        ResultSet rs = stmt.executeQuery(SQL);

        while (rs.next()) {

            series.getData().add(new XYChart.Data<String, Number>(rs.getString(1),
                    Double.parseDouble(rs.getString(7))));
            series2.getData().add(new XYChart.Data<String, Number>(rs.getString(1),
                    Double.parseDouble(rs.getString(8))));

        }
        rs.close();
        stmt.close();

    } catch (Exception e) {
    }
    yearChart = createChart();
}

    protected LineChart<String, Number> createChart() {
    final CategoryAxis xAxis = new CategoryAxis();
    final NumberAxis yAxis = new NumberAxis();

    // setup chart
    series.setName("Target");
    series2.setName("Actual");
    xAxis.setLabel("Period");
    yAxis.setLabel("£");

    yearChart.getData().add(series);
    yearChart.getData().add(series2);

    yearChart.setCreateSymbols(false);

    return yearChart;
}

jewelsea提供的答案是解决此问题的完美解决方案.

谢谢你，珍宝海.

推荐答案

使用 StackPane 的容器.添加鼠标事件侦听器，以便您知道何时鼠标输入和标签用作值在hoverPane中.退出时，从hoverPane移除标签.

Use XYChart.Data.setNode(hoverPane) to display a custom node for each data point. Make the hoverNode a container like a StackPane. Add mouse event listeners so that you know when the mouse enters and leaves the node. On enter, place a Label for the value inside the hoverPane. On exit, remove the label from the hoverPane.

有一些示例代码来演示这种技术.

There is some example code to demonstrate this technique.

示例代码的输出显示为将光标悬停在22个节点上.

Output of the sample code is shown with the cursor hovered over the 22 node.

这篇关于JavaFX LineChart悬停值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！