时间戳

首页 > 解决方案 > Javascript热图本地问题

javascript - Javascript热图本地问题

问题描述

使用 heatmap.js 时我的代码有一些问题。我需要使用渲染鼠标移动热图，然后将其保存到 csv。heatmapChrome 错误现在在更改为后消失了，.heatmap但仍然没有渲染。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>

标签： javascriptwebframeworks

解决方案

以下片段似乎有效

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>

推荐阅读