有没有办法在JavaFX LineChart中断开2个串联串？

Question

我在LineChart上有四个系列。每个系列都包含一些时间分割的图形。默认情况下，LineChart连接这些图形。它看起来很丑，在上下文中没有任何意义，所以我想将它们分开，但保留颜色和图例。换句话说，我想要的是删除两个特定点之间的连接。有没有办法这样做而不需要在图表中添加新的系列（图形是逻辑连接的，添加新系列会使用户混淆并使图表混乱）？

for(int j = 0; j < 4; j++) {
    XYChart.Series<Float, Float> series = new XYChart.Series<>();
    series.setName("Канал " + (j + 1));
    fillWithData(series);
    chart.getData().add(series);
}

Answer 1

是的你可以

如https://docs.oracle.com/javase/8/javafx/api/javafx/scene/chart/XYChart.Series.html#nodeProperty所述，serie节点用于存储线路。节点是您可以修改的路径。

看看这个小应用：

    package application;

import java.util.Arrays;
import java.util.List;

import javafx.application.Application;
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.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.shape.Circle;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {

            NumberAxis xAxis = new NumberAxis();
            NumberAxis yAxis = new NumberAxis();
            MyLineChart chart = new MyLineChart(xAxis, yAxis, Arrays.asList(5));


            XYChart.Series<Number, Number> serie = new Series<>();

            serie.getData().add(new Data<Number, Number>(0, 5));
            serie.getData().add(new Data<Number, Number>(1, 5));
            serie.getData().add(new Data<Number, Number>(2, 5));
            serie.getData().add(new Data<Number, Number>(3, 5));
            serie.getData().add(new Data<Number, Number>(4, 5));
            serie.getData().add(new Data<Number, Number>(5, -5));
            serie.getData().add(new Data<Number, Number>(6, -5));
            serie.getData().add(new Data<Number, Number>(7, -5));

            chart.getData().add(serie);

            Path p = (Path) serie.getNode();        

            Scene scene = new Scene(chart,400,400);
            primaryStage.setScene(scene);
            primaryStage.show();



    }

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

    private static class MyLineChart extends LineChart<Number,Number>{


        private List<Integer> breakpointIndex;

        public MyLineChart(Axis<Number> xAxis, Axis<Number> yAxis, List<Integer> breakpointIndex) {
            super(xAxis, yAxis);
            this.breakpointIndex = breakpointIndex;
        }

        @Override
        protected void layoutPlotChildren() {
            super.layoutPlotChildren();

            Path p = (Path) getData().get(0).getNode();

            breakpointIndex.forEach(i ->{

                Data<Number, Number> discontinuousPoint = getData().get(0).getData().get(i+1);
                p.getElements().add(i+1, new MoveTo(getXAxis().getDisplayPosition( discontinuousPoint.getXValue()), getYAxis().getDisplayPosition(discontinuousPoint.getYValue())));

            });

            System.out.println("\nnew Path :");
            p.getElements().forEach(e -> System.out.println("p : " + e));


            //getPlotChildren().add(new Circle(50));


        }

    }
}

你必须覆盖负责绘制图表的方法layoutplotchildren（如果可以的话，看看原始方法的代码很有意思）。

然后你可以在这里画出你想要的东西。

在我的小应用程序中，我只是修改已创建的节点，但您可以省略超级调用并绘制您想要的内容。

查看doc有访问chartelement的方法，比如getPlotChildren（），getchartchildren（）。

并且您可以使用getdata（）访问添加到图表中的系列

Answer 2

显然在JavaFX 11中用于填充Elements中的底层Path列表的内部逻辑已经改变。现在，如果我缩放图表（换句话说，更改轴上的下限/上限），它只会被可见元素重新填充，因此Data和PathElement的索引不再匹配（各个列表的大小也不相同） 。我想这是各种各样的优化。

我被迫以下面的hacky方式重写代码：

@Override
protected void layoutPlotChildren() {
    super.layoutPlotChildren();
    for(Series<Number, Number> data : getData()) {
        ObservableList<PathElement> elements = ((Path)data.getNode()).getElements();
        for(int i = 0; i < elements.size() - 1; i++) {
            PathElement oldElement = elements.get(i);
            PathElement newElement = elements.get(i + 1);
            if (oldElement instanceof LineTo && newElement instanceof LineTo) {
                double oldDisplayX = ((LineTo) oldElement).getX();
                double newDisplayX = ((LineTo) newElement).getX();
                if(getXAxis().getValueForDisplay(newDisplayX).doubleValue() -
                       getXAxis().getValueForDisplay(oldDisplayX).doubleValue() > 10)
                    elements.set(i, new MoveTo(newDisplayX, ((LineTo) newElement).getY()));
            }
        }
    }
}

现在（对我而言）没有必要保留单独的断点索引列表，不需要手动添加它们，因为我只在一个条件上插入断点：X值之间的空间大于10.我完全忽略Data列表并遍历Elements列表，将显示坐标转换为需要的X值。对于大量元素，这显然会增加一些开销，因为每次窗口大小更改时都会调用，或者添加新元素时调用，但是对于我的用例图表包含4个6000-15000点的系列并且对于此大小计算需要〜1ms，这可以忽略不计。我也可以删除其中一个getValueForDisplay调用，首先计算像素差异，不确定。