JavaFx 图表在悬停时突出显示整条曲线

Question

我正在对图表使用对数刻度，并且我希望能够在将鼠标悬停在所有其他曲线以及颜色键值上方时使各个曲线更宽一些。下面的图片更好地说明了我想要做什么(敏感数据已编辑)

这样的事情可能吗？如果是这样，我应该朝什么方向发展才能实现这一目标？

Answer 1

第一种情况是当鼠标悬停在曲线上时应用视觉变化，可以通过修改图表上表示 Series 的 Node 来实现，这是一个路径。您可以将更改应用于Path的笔划，使其更暗、更宽，并在鼠标进入时将其置于前面，并在鼠标离开时恢复它们

<小时/>

第二个，将鼠标悬停在图例项目上时应用视觉更改仍然是可能的，但它不是那么干净解决方案，至少在我下面的实现中不是这样。使用节点 lookup您可以获取这些项目并将它们转换到公开图形和文本的 Label 或 LegendItem 中。我选择 Label 以避免使用内部 API

在此处查看更多信息:It is a bad practice to use Sun's proprietary Java classes?

通过图例文本和系列名称之间的String比较，您可以将两者关联起来，假设每个系列都有一个名称并且是唯一的。如果它不是唯一的，您可以比较笔划填充以及名称

重要提示:这些假设限制了这种方法，因此如果可能的话我会避免使用它

<小时/> SSCCE :

public class DarkerSeriesOnHoverExample extends Application {

    @SuppressWarnings("unchecked")
    @Override
    public void start(Stage primaryStage) throws Exception {
        //LogarithmicNumberAxis source: https://stackoverflow.com/a/22424519/5556314
        LineChart lineChart = new LineChart(new LogarithmicNumberAxis(1, 1000000), new NumberAxis(0, 2.25, 0.25));
        lineChart.setCreateSymbols(false);

        //Values guessed from the screen shot
        ObservableList<XYChart.Data> seriesData = FXCollections.observableArrayList(new XYChart.Data(1, 2),
                new XYChart.Data(10, 2), new XYChart.Data(100, 2), new XYChart.Data(1000, 1.85),
                new XYChart.Data(10000, 1.50), new XYChart.Data(100000, 1.20), new XYChart.Data(1000000, 0.9));

        ObservableList<XYChart.Data> series2Data = FXCollections.observableArrayList(new XYChart.Data(1, 2),
                new XYChart.Data(10, 2), new XYChart.Data(100, 2), new XYChart.Data(1000, 1.60),
                new XYChart.Data(10000, 1.25), new XYChart.Data(100000, 0.95), new XYChart.Data(1000000, 0.65));

        ObservableList<XYChart.Data> series3Data = FXCollections.observableArrayList(new XYChart.Data(1, 2),
                new XYChart.Data(10, 1.85), new XYChart.Data(100, 1.55), new XYChart.Data(1000, 1),
                new XYChart.Data(10000, 0.65), new XYChart.Data(100000, 0.5), new XYChart.Data(1000000, 0.45));

        ObservableList<XYChart.Series> displayedSeries = FXCollections.observableArrayList(
                new XYChart.Series("Series 1", seriesData), new XYChart.Series("Series 2", series2Data),
                new XYChart.Series("Series 3", series3Data));

        lineChart.getData().addAll(displayedSeries);
        Scene scene = new Scene(lineChart, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.show();

        darkenSeriesOnHover(displayedSeries); //Setup for hovering on series (cleaner)
        darkenSeriesOnLegendHover(lineChart); //Setup both hovering on series and legend (messier)
    }

    private void darkenSeriesOnHover(List<XYChart.Series> seriesList){
        for(XYChart.Series series : seriesList){
            Node seriesNode = series.getNode();
            //seriesNode will be null if this method is called before the scene CSS has been applied
            if(seriesNode != null && seriesNode instanceof Path){
                Path seriesPath = (Path) seriesNode;
                Color initialStrokeColor = (Color)seriesPath.getStroke();
                double initialStrokeWidth = seriesPath.getStrokeWidth();

                seriesPath.setOnMouseEntered(event -> {
                    updatePath(seriesPath, initialStrokeColor.darker(), initialStrokeWidth*2, true);
                });
                seriesPath.setOnMouseExited(event -> {
                    //Reset
                    updatePath(seriesPath, initialStrokeColor, initialStrokeWidth, false);
                });
            }
        }
    }

    private void darkenSeriesOnLegendHover(LineChart lineChart){
        Set<Node> legendItems = lineChart.lookupAll("Label.chart-legend-item");
        List<XYChart.Series> seriesList = lineChart.getData();

        //Will be empty if this method is called before the scene CSS has been applied
        if(legendItems.isEmpty()){ return; }

        for(Node legendItem : legendItems){
            Label legend = (Label) legendItem;
            XYChart.Series matchingSeries = getMatchingSeriesByName(seriesList, legend.getText());
            if(matchingSeries == null){ return; }

            Node seriesNode = matchingSeries.getNode();
            //seriesNode will be null if this method is called before the scene CSS has been applied
            if(seriesNode != null && seriesNode instanceof Path){
                Path seriesPath = (Path) seriesNode;
                Color initialStrokeColor = (Color)seriesPath.getStroke();
                double initialStrokeWidth = seriesPath.getStrokeWidth();

                legendItem.setOnMouseEntered(event -> {
                    updatePath(seriesPath, initialStrokeColor.darker(), initialStrokeWidth*2, true);
                });
                legendItem.setOnMouseExited(event -> {
                    //Reset
                    updatePath(seriesPath, initialStrokeColor, initialStrokeWidth, false);
                });

                seriesPath.setOnMouseEntered(event -> {
                    updatePath(seriesPath, initialStrokeColor.darker(), initialStrokeWidth*2, true);
                });
                seriesPath.setOnMouseExited(event -> {
                    //Reset
                    updatePath(seriesPath, initialStrokeColor, initialStrokeWidth, false);
                });
            }
        }
    }

    private void updatePath(Path seriesPath, Paint strokeColor, double strokeWidth, boolean toFront){
        seriesPath.setStroke(strokeColor);
        seriesPath.setStrokeWidth(strokeWidth);
        if(!toFront){ return; }
        seriesPath.toFront();
    }

    private XYChart.Series getMatchingSeriesByName(List<XYChart.Series> seriesList, String searchParam){
        for (XYChart.Series series : seriesList){
            if(series.getName().equals(searchParam)){
                return series;
            }
        }
        return null;
    }
}

<小时/>

输出:

之前与悬停