Question

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

我的chart.destroy()花了很多时间75000分。每个点都有一个工具提示（使用的工具提示是Highcharts＆＃39;自己的工具提示）

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

有没有人使用Highcharts处理这些数据点？如果是的话，你是如何设法保持它顺利运作的。 4-5秒的延迟是可以的，但我在渲染图表时会有30秒的延迟。时间轴中的GC事件也显示了大量垃圾收集数据。我觉得我没有解决方案，但我却在拼命寻找任何线索。

谢谢！

Answer 1

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

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

出于演示目的，我使用名为ZingChart的库并使用渲染类型作为画布来提高大型数据集的性能。启用工具提示后，我能够在我的计算机上仅在15秒以下的头发中渲染75k（显然取决于计算机）。但是，当可视化密度超过像素密度时，您可以看到散点图没有实际价值。

简单的时间安排：

 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");
});

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

1 个答案: