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

Question

我正在为我的应用尝试热图，但我认为我的代码中缺少某些东西，因为它无法正常工作。

下面是我的代码：

<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

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

heatmap.js is not rendering in my website

html

javascript

heatmap