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

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

业务需求：

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

代码实现：

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 并且自己写网页。

还是无私分享下吧~

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