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

Creating large heatmap using highcharts freezes browser

本文关键字：冻结 浏览器 大型 高图 创建      更新时间：2023-09-26

我正在使用高图创建一个大型热图。它运行良好，但当有大量记录需要生成热图时。在这种情况下，它会冻结broswer，broser会显示等待或结束页面的警报。我在Stackoverflow上看到的其他答案很少，这些答案建议将计算算法更改为可以迭代调用的算法，然后使用timeout（），但我无法在我的场景中使用它，即如何使高图渲染迭代？

如何防止它冻结浏览器？

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 }'
}

我使用事件类型来确定是否使用缩放重置（再次获得初始聚合数据）

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

相关文章：