無法使用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>

我正在關注這個例子。 我不確定自己在做什么錯。 我得到空白的白色畫布，但沒有任何熱圖。 我不知道是否已包含運行此程序所需的所有內容。 有人可以向我解釋一下。

Answer 1

http://jsfiddle.net/xh2yrdt7/

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

看這個例子。

我給.heatmap元素指定了寬度和高度，並刪除了canvas元素。

這應該為您工作。

無法使用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