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没有在我的网站上呈现

1 个答案: