javascript - 使用工具提示在丰富的散点图上绘制 75000 个点

Question

我可以在这里发布一些代码，但问题的标题正是问题所在。

我的 chart.destroy() 需要花费大量时间来处理 75000 个点。每个点也有一个工具提示(使用的工具提示是 Highcharts 自己的工具提示)

此外，使用 new Highcharts.Chart({ ...options...}) 绘制新图表也需要花费大量时间。

有人使用 Highcharts 处理过这么多数据点吗？如果是，您是如何让它顺利运行的？ 4-5 秒的延迟是可以的，但我在渲染图表时遇到了 30 秒的延迟。时间轴中的 GC 事件也显示大量数据正在被垃圾收集。我感觉我没有解决方案，但我正在拼命寻找任何线索。

谢谢!

Answer 1

性能瓶颈在于内存中代表数据集中每个点所需的数据量。由于您需要工具提示，因此每个点都必须将其值作为字符串存储在内存中；因此，内存中至少需要 75,000 个对象，不包括 highcharts 本身的成本。 highcharts 之所以能够在更短的时间内显示 75k 散点图(没有工具提示)，是因为它对输出进行采样并显示估计值，而无需任何点的交互性。

http://jsfiddle.net/5haL91vf/1/

为了演示目的，我使用了一个名为 ZingChart 的库，并使用渲染类型作为 Canvas 来提高大型数据集的性能。启用工具提示后，我可以在计算机上用不到 15 秒的时间渲染 75k(显然取决于计算机)。但正如您所看到的，当可视化密度超过像素密度时，散点图没有实际值(value)。

简单的设置与计时:

 startTime = Date.now();
 zingchart.render({
    id:'zc',
    width: 1000,
    height: 700,
    output: "canvas",
    data:myChart
});

zingchart.bind('zc', 'complete', function(){
    alert((Date.now() - startTime)/1000 + " seconds");
});