Fatal编程技术网
  • javascript/
  • Javascript 无法使用heatmap.js生成简单的热图 漩涡 var heatmapInstance=h337.create({ //仅需要容器，其余为默认值 容器：document.querySelector（“.heatmap”） }); //现在生成一些随机数据 var点=[]； var max=0； var宽度=840； var高度=400； var-len=200； 而(len--){ var val=Math.floor（Math.random（）*100）； max=Math.max（max，val）； 变量点={ x:Math.floor（Math.random（）*宽度）， y:Math.floor（Math.random（）*高度）， 值：val }; 点。推（点）； } //热图数据格式 变量数据={ 马克斯：马克斯， 数据：点数 }; //如果您有一组数据点，请始终使用setData而不是addData //用于数据初始化 heatmaInstance.setData（数据）；

Javascript 无法使用heatmap.js生成简单的热图 漩涡 var heatmapInstance=h337.create({ //仅需要容器，其余为默认值 容器：document.querySelector（“.heatmap”） }); //现在生成一些随机数据 var点=[]； var max=0； var宽度=840； var高度=400； var-len=200； 而(len--){ var val=Math.floor（Math.random（）*100）； max=Math.max（max，val）； 变量点={ x:Math.floor（Math.random（）*宽度）， y:Math.floor（Math.random（）*高度）， 值：val }; 点。推（点）； } //热图数据格式 变量数据={ 马克斯：马克斯， 数据：点数 }; //如果您有一组数据点，请始终使用setData而不是addData //用于数据初始化 heatmaInstance.setData（数据）；

javascript canvas

Javascript 无法使用heatmap.js生成简单的热图 漩涡 var heatmapInstance=h337.create({ //仅需要容器，其余为默认值 容器：document.querySelector（“.heatmap”） }); //现在生成一些随机数据 var点=[]； var max=0； var宽度=840； var高度=400； var-len=200； 而(len--){ var val=Math.floor（Math.random（）*100）； max=Math.max（max，val）； 变量点={ x:Math.floor（Math.random（）*宽度）， y:Math.floor（Math.random（）*高度）， 值：val }; 点。推（点）； } //热图数据格式 变量数据={ 马克斯：马克斯， 数据：点数 }; //如果您有一组数据点，请始终使用setData而不是addData //用于数据初始化 heatmaInstance.setData（数据）；,javascript,canvas,heatmap,Javascript,Canvas,Heatmap,我正在关注这一点。我不确定我做错了什么。我有空白的白色帆布，但没有任何热图。我不知道我是否已经包括了运行此程序所需的所有内容。谁能给我解释一下。 看看这个例子 我给了.heatmap元素一个宽度和一个高度，并删除了canvas元素 这应该对你有用。谢谢，现在有用了。有什么问题吗。我下面的例子是使用canvas，canvas正在为它们工作。 <!doctype html> <html lang="en"> <head> <meta char

我正在关注这一点。我不确定我做错了什么。我有空白的白色帆布，但没有任何热图。我不知道我是否已经包括了运行此程序所需的所有内容。谁能给我解释一下。

看看这个例子

我给了.heatmap元素一个宽度和一个高度，并删除了canvas元素

这应该对你有用。

谢谢，现在有用了。有什么问题吗。我下面的例子是使用canvas，canvas正在为它们工作。 
    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Vortex</title>
  <meta name="description" content="Data Visualization Vault">
  <link rel="stylesheet" href="css/styles.css">
  <!--<script type="text/javascript" src="scripts/heatmap.js"></script> -->
  <script type="text/javascript" src="scripts/heatmap.min.js"></script>


</head>

<body>

  <h1 style="padding: 20px"><a style="color: #41FF67">Vor</a><a style="color: #8E8E8E">tex</a></h1>
    <div class="navbar">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul> 
    </div>



      <div style="position: relative;" class="heatmap">
        <canvas style="position: absolute; left: 0px; top: 0px;" height="400" width="834" class="heatmap-canvas"></canvas>    
      </div>
<script type="text/javascript">
var heatmapInstance = h337.create({
  // only container is required, the rest will be defaults
  container: document.querySelector('.heatmap')
});

// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;

while (len--) {
  var val = Math.floor(Math.random()*100);
  max = Math.max(max, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val
  };
  points.push(point);
}
// heatmap data format
var data = { 
  max: max, 
  data: points 
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
</script>
</body>
</html>