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>

我正在关注此example。我不确定我做错了什么。我得到空白的白色帆布，但没有任何热图。我不知道我是否包含了运行它所需的一切。有人可以向我解释一下。

Answer 1

http://jsfiddle.net/xh2yrdt7/

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

看看这个例子。

我为.heatmap元素提供了宽度和高度，并删除了canvas元素。

这应该适合你。

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

1 个答案: