使用highcharts创建大型热图会冻结浏览器

Question

我正在使用highcharts创建一个大型热图。它工作正常，但是当有大量记录生成热图时。在这种情况下，它会冻结broswer并且broser显示警报等待或结束页面。我在Stackoverflow上看到了很少的其他答案，它建议将计算算法改为可以迭代调用然后使用timeout（）的东西，但我不能在我的场景中使用它，我怎样才能使高图渲染迭代？

如何防止它冻结浏览器？

Answer 1

Highcharts有很多循环来渲染数据，所以我找到的唯一可能是减少加载的数据量。加载10MB +（通常已经是3-4MB）的数据会导致几乎每个浏览器都冻结。

我遇到了类似的大数据集问题（10个系列的月份，15分钟的数据点）。我在查看整个数据集时所做的是服务器端数据聚合（平均4小时）。在缩放时，我通过ajax获得了实际的15分钟数据点，但仅用于带有afterSetExtremes事件的可见区域：

events: {
  afterSetExtremes: 'function(event) { 
      if(typeof event.userMin == "undefined") 
          { var a={"min": null, "max": null}; } 
      else 
          { var a={"min": event.min, "max": event.max}; } 
      $.ajax({url:"/user/analyze/intval", method: "POST", 
          data: a, dataType: "json"}).success(function(json) 
          { //update series here }'
}

我使用typeof事件来确定是否使用了缩放重置（以再次获取初始聚合数据）

我认为类似的东西也可以解决你的问题。并且问问自己，拥有如此多的数据会有帮助吗？即使原始数据被大量聚合（因子4-6），通常可见差异也接近于零。