热图.js 未在我的网站上呈现

heatmap.js is not rendering in my website

本文关键字：网站 我的 js 热图      更新时间：2023-09-26

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

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>

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

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

这是行不通的，因为热图.js会自动将其自己的<canvas>附加到container元素，因此您需要一个容器元素，例如<div>, <p>，因此您应该传递

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

作为容器元素。如果仍然不起作用，则很可能尚未设置容器大小（容器元素应设置宽度、高度或width，并且应在热图配置中传递height。

您还可以在热图.js网站上找到更多基本的热图示例

相关文章：