Javascript热图本地问题答案

【问题标题】：Javascript heatmap local issueJavascript热图本地问题
【发布时间】：2021-03-24 22:42:42
【问题描述】：

在使用 heatmap.js 时，我的代码存在一些问题。我需要使用渲染鼠标移动热图，然后将其保存到 csv。将 heatmap 更改为 .heatmap 后，Chrome 错误现在消失了，但仍然没有渲染。 div 现在有它的固定大小了。

window.onload = function(){
    var heatmapInstance = h337.create({
        container: document.querySelector('.heatmap'),
        radius: 90
      });
      document.querySelector('.heatmap').onmousemove = function(ev) {
        heatmapInstance.addData({
          x: ev.layerX,
          y: ev.layerY,
          value: 1
        });
      };
}

<script src="heatMapJs/build/heatmap.min.js"></script>

<script src="js/heatMap.js"></script>





<div class="heatmap"> </div>

【问题讨论】：

document.querySelector('heatmap') 必须是 document.querySelector('.heatmap')。我还建议使用eventListeners 而不是覆盖onload 和onmousemove 方法，因为这会导致覆盖现有功能。
成功了。有点。现在它不起作用，但在控制台上没有显示错误。
请用更新后的代码更新您的问题，以便我们继续帮助您调试
完成。你现在可以看看吗？
您的代码似乎运行良好，您只需为 .heatmap div 指定宽度和高度

标签： javascript web frameworks

【解决方案1】：

下面的 sn-p 似乎可以工作

window.onload = function(){
  var heatmapInstance = h337.create({
    container: document.querySelector('.heatmap'),
    radius: 90
  });
  
  document.querySelector('.heatmap').onmousemove = function(ev) {
    heatmapInstance.addData({
      x: ev.layerX,
      y: ev.layerY,
      value: 1
    });
  };
}

.heatmap {
  width: 100vw;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.0/heatmap.min.js"></script>

<div class="heatmap"></div>

【讨论】：