Heatmap.js – 最强大的 Web 动态热图

最新推荐文章于 2024-08-08 07:16:32 发布

灬点点

最新推荐文章于 2024-08-08 07:16:32 发布

阅读量2.6w

点赞数 8

分类专栏：练习案例前端开发文章标签： Heatmap.js 最强大的 We

前端开发同时被 2 个专栏收录

39 篇文章

订阅专栏

练习案例

30 篇文章

订阅专栏

Heatmap.js – 最强大的 Web 动态热图

最新公司项目需要用到热力图，在百度上搜下，了解到heatmap.js这款神器。然后搜了下例子，却很难搜到马上出效果的例子，特此写一篇heatmap.js基础教程。

官网：http://www.patrick-wied.at/static/heatmapjs/

api：http://www.patrick-wied.at/static/heatmapjs/docs.html

官网例子：http://www.patrick-wied.at/static/heatmapjs/examples.html

本人英文不好，官网的例子看了好久才看懂

首先看一段代码

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title></title>
     <style>
    </style>
 </head>
 <body>
     <div style="height: 900px; width: 100%;" id="heatmap"></div>
 </body>
<script src="js/heatmap.min.js"></script>
<script type="text/javascript">
// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
 var heatmapInstance = h337.create({
     container: document.querySelector('#heatmap'),
 });
 //构建一些随机数据点,网页切图价格这里替换成你的业务数据
 var points = [];
 var max = 0;
 var width = document.body.clientWidth;
 var height = document.body.clientHeight;
 var len = 300;
 while (len--) {
     var val = Math.floor(Math.random()*100);
     max = Math.max(max, val);
     var point = {
        x: Math.floor(Math.random()*width),
        y: Math.floor(Math.random()*height),
        value: val
    };
     points.push(point);
 }
    var data = {
    max: max,
    data: points
};
 //因为data是一组数据,web切图报价所以直接setData
 heatmapInstance.setData(data); //数据绑定还可以使用
 </script>
 </html>

请先下载 heatmap.js ,上面的代码复制出去就能看到效果了。

API方法，属性

h337.create(configObject)

创建heatmap实例，configObject是一个json对象，里面有很多参数

参数详情

container 页面操作div的dom对象，如div的id为test,可以写成

backgroundColor 画板的背景颜色设置，支持rgb(a)，颜色名称，但必须要用引号

gradient 设置热点图的光圈颜色，数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色

radius 设置光圈的半径大小，值>=0,=0取得是默认值

opacity 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值

 h337.create({ 
     container:document.getElementById("text"),
     backgroundColor:'red',    // '#121212'    'rgba(0,102,256,0.2)'
      gradient: {
         '0.5': 'blue',
         '0.8': 'red',
         '0.95': 'white',
         '0.6':'yellow',
         '0.5':'green'
     },
     radius: 10,        // [0,+∞)
    opacity:0.8,
});