JavaFX(八)——提高散点图性能

Question

问题:

在下面描述的场景中，我可以通过哪些方式改善渲染时间？

描述:

我面临的任务是在 JavaFX 的散点图上绘制相当多的点。我正在从 Oracle DB 获取数据。

我认为我目前的瓶颈是scatterChart.getData().add(series);

series包含图表中所需的所有数据点。

执行此操作并将图表呈现在屏幕上可能需要几秒钟到几分钟的时间。在此期间，GUI 卡住。

我们正在运行一些配备 4 核 4 线程、Intel HD4000 显卡的 Lenovo Thinkpad。

下面是一些完成图表的示例。后者是目前最坏的情况，但随着收集的数据越来越多，将会显示更多的数据。

(由于图片太大，仅提供链接)

Chart with ~5.5K points
Chart with ~75K points

更多信息

我关注了this tutorial因为我是 JavaFX 新手，所以我不确定渲染是如何发生的。

代码示例

这不是我正在使用的实际代码，它只是为了说明我是如何做事情的。

//Reference to the chart in the fxml file.
@FXML
private ScatterChart<Date, Number> scatterChart
= new ScatterChart<>(new DateAxis(), new NumberAxis());

private void handleSelectionUpdate(PerfResultSet newValue){
    //newValue is an object containing all the data from the database
    XYChart.Series<Date, Number> series = new XYChart.Series<>();
    /**
    *   adding all the data from newValue to series as 
    *   XYChart.Data<Date, Number>
    *
    *   this is handled by multiple threads and does not take long
    */

    series.setName("myName");


    //this statement is where the gui freezes
    //can I optimize this in any way?
    scatterChart.getData().add(series);
}

Answer 1

我遇到了类似的问题 - 我正在用 Javascript 绘制由许多点组成的路线到谷歌地图。考虑到当前的规模，我删除了一些点。我看到了你的 png 文件，看来你确实需要 ~30-50 点来表达以下消息 - 嘿，这个垂直/水平段包含这么多点，你可能会认为它是实线!

下一个问题是最大比例 - 我认为 75K 图表中的每条实线实际上都不是实线。我的意思是，在小规模下，我看到很多像实线 ____ 的点，但在最大规模下，我将它们视为 。 。 。 .... ..但通常情况下，仅小块图表需要最大比例，并且您可以不按比例而是按边框消除。再次引用谷歌地图 - 当您缩放 map 时，您看到的不是高分辨率的整个地球，而是一小部分 map 。其他边框自动消除。

在这里发布您的代码，一些有关比例、缩放的信息(您有这样的功能吗？)。如果没有，并且您的图表始终与链接中的 png 文件一样，则应该迭代每条垂直线或水平线，查找连续点并替换，例如，将 100 个连续点替换为这 100 个点的中间点。不是通过实验找到 100 个这样的 X，而是将连续 X 点替换为一个中间值点 不会影响生成的图表。

我重复一下主要思想 - 存在一些 X，这样绘制 X 个连续点等于在某个固定比例中绘制 1 个点 - 许多点不会给出精度，而只是相互“覆盖”由于规模和人眼的限制。

如果你的比例不变，一些用于查找 X 的伪代码；

int MAGIC = 50; //change it on each run of your program! You have to find the best value
int counter=1; // points[0] taken as included in accumulating solid segment
int startIndex=0,endIndex;
ArrayList<Integer> compressedDatesArray = new ArrayList<Integer>();
for(int i=1;i<datesArray.length;i++){
  if(deltaBetweenDates(datesArray[i]-datesArray[i-1])==1){
     counter++;
     endIndex=i;
     if(counter==MAGIC){
       counter=0;
       compressedDatesArray.add(datesArray[{endIndex-startIndex)/2]);
       startIndex=endIndex+1;
     }
  }

}

渲染压缩数组，参见 png。如果结果不好 - 改变 MAGIC 并重复

更新

你可以二分搜索魔法 - 尝试 5000，如果在将 5000 点压缩为 1 后仍然可靠，则尝试更大的值，如果不是，尝试 2500 等等...人类也可以二分搜索某些内容= )))

另外，不要忘记记住代表大线段的点的 Y 值。我的意思是，还要声明 compressedY 并添加 datesArray[(endIndex-startIndex/2)]

的相应 Y