javascript - heatmap.js 未在我的网站中呈现

Question

我正在为我的应用程序尝试热图，但我认为我的代码中缺少一些东西，因为它不起作用。

JSFiddle

下面是我的代码:

<div  class="example-1" style="position: relative;">
    <canvas id="heatmapf" width="320" height="270" style="position: absolute; left: 0px; top: 0px;"></canvas>
</div>

<script>
    var domElement = document.getElementById( "heatmapf" );
    var heatmap = h337.create({
        container: domElement
    });

    heatmap.setData({
        max: 5,
        data: [{ x: 10, y: 15, value: 5}, { x: 20, y: 25, value: 8}]
    });
</script>

我是这个热图的新手，想要在我的应用程序中使用一个非常基本的示例。任何帮助将不胜感激。

Answer 1

这里是 heatmap.js 的创建者。您似乎正在尝试使用 <canvas>元素作为热图容器。

这不起作用，因为 heatmap.js 会自动附加自己的 <canvas>到container因此您需要一个容器元素，例如 <div>, <p>所以你应该通过

document.querySelector( ".example-1" );


作为容器元素。如果它仍然不起作用，您很可能没有设置容器大小(容器元素应该设置宽度、高度，或者 width 和 height 应在热图配置中传递。

您还可以找到更多基本热图示例 on the heatmap.js website