【Heatmap】自动生成一张热力图

最新推荐文章于 2025-05-09 15:21:04 发布

fengzibs

最新推荐文章于 2025-05-09 15:21:04 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： heatmap 文章标签： heatmap

本文链接：https://blog.youkuaiyun.com/fengzibs/article/details/79754234

heatmap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用heatmap.js库来自动生成热力图的方法。通过设置随机数据点的位置、半径和点击次数等参数，可以在指定区域内生成一系列热力点，并通过调整参数来改变热力图的表现形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章之前介绍了热力图的引用，以及如何设置，本篇文章就不再赘述。

业务需求：

要求在页面中自动生成一些热力点。

代码实现：

Minimal.js

// minimal heatmap instance configuration
var heatmapInstance = h337.create({ //创建一个heatmap
    // only container is required, the rest will be defaults
    container: document.querySelector('.heatmap')    //在哪个标签上绑定，绑定后会在这个标签下新增一个cavanse(画布)
});

// now generate some random data  这里设置了一些随机数，目的是为了产生一些随机热力点
var points = [];   //存储热力点的数组
var max = 0;     //cavanse中点击次数最多的点，意味着这个点亮度最高
var width = 840;//设置cavanse宽
var height = 400;//设置cavanse高
var len = 300;//要生成多少个点

while (len--) {   //每次循环减一，控制循环次数
    var val = Math.floor(Math.random()*100);//点击次数
    // now also with custom radius
    var radius = Math.floor(Math.random()*70);  //热力点的半径

    max = Math.max(max, val);   //筛选出来最大点击值，如果没有点击自然是上边设置的max=0
    var point = {    //设置单点属性
        x: Math.floor(Math.random()*width),  //x坐标
        y: Math.floor(Math.random()*height),   //y坐标
        value: val,     //点击次数
        // radius configuration on point basis
        radius: radius
    };
    points.push(point);  //将设置好的点存储进数组
}
// heatmap data format
var data = {    //设置cavanse中的数据
    max: max,   //设置点击次数最多的点
    data: points
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
//注意这里是setData不是addData ，两者的区别就是setData会删除上一次绘制的热力点，重新添加数据，addData是在现有基础上再新加数据

//这里可以有一个思路：就是获取用户在页面中点击的网页的坐标，然后存储到数据库。然后将数据库中的数据导出，在var point 位置设置成自己的数据。 
// 循环次数len就是某个页面点击的总次数

这里是生成热力点的js，同时还需要引入heatmap.js 并且自己写网页。

还是无私分享下吧~

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    body{
        width:100%;height:100%;
    }
    </style>
</head>
<body>

<input id=xxx type=hidden  value="">

<input id=yyy type=hidden value="">
<!--<input id="array" type="button" value="点击查看数组内容" onclick="getindex()"/>-->

<div class="demo-wrapper">
    <div class="heatmap" style="position: relative;">
        <div><img src="image/1.jpg" ></div>

    </div>
</div>
</body >
<script src="js/heatmap.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/key-minimal.js"></script>
</html>

上边js给了一些读取自己数据点的思路，欢迎大家实现。