无法使用heatmap.js生成简单的热图

Question

    <!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>

I am following this example . 我正在关注这个例子。 I am not sure what I am doing wrong. 我不确定自己在做什么错。 I get blank white canvas but not any heatmap whatsoever. 我得到空白的白色画布，但没有任何热图。 I don't know if I have included everything that is needed to run this. 我不知道是否已包含运行此程序所需的所有内容。 Can somebody explain this to me. 有人可以向我解释一下。

Answer 1

http://jsfiddle.net/xh2yrdt7/ http://jsfiddle.net/xh2yrdt7/

<div style="position: relative; height: 400px; width: 400px;" class="heatmap"></div>

Look at this example. 看这个例子。

I gave the .heatmap element a width and a height and removed the canvas element. 我给.heatmap元素指定了宽度和高度，并删除了canvas元素。

This should work for you. 这应该为您工作。

无法使用heatmap.js生成简单的热图

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-12-09 10:16:22

无法使用heatmap.js生成简单的热图

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-12-09 10:16:22

解决方案1
2 已采纳 2015-12-09 10:16:22