Heatmap.js 一个强大简易的web动态热图

小螃蟹er

已于 2022-07-20 14:56:09 修改

阅读量6.7k

点赞数 1

分类专栏： javascript 文章标签：可视化

于 2020-12-03 19:06:41 首次发布

本文链接：https://blog.csdn.net/Jermyo/article/details/110561098

版权

javascript 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

Heatmap.js 一个强大简易的web动态热图

最近在做热力图效果，背景图上绘制热力图，最开始使用的事Echarts，但是Echarts绘制是基于map，还其他一些第三方的库也很多基于map，还要进行坐标转化，麻烦的一批；最后还是研究一下heatmap.js这个库。
by the way：需求迫于无奈使用了阿里的G2，交互效果勉强符合，但是看他们的API的时候，真的是麻烦的一批啊，API很多很乱，慎用。

接下来看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

直接上demo代码

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 600px;
            height: 400px;
            border: 1px solid;
            border-color: grey;
        }
    </style>
</head>

<body>
    <div id="heatmap"></div>
</body>
<script src="js/heatmap.js"></script>
<script type="text/javascript">
    // 创建一个heatmap实例对象
    // “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
    // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
    var heatmapInstance = h337.create({
        container: document.querySelector('#heatmap'),
        // canvas: document.querySelector('#heatmap'), // 其实还可以传canvas对象，看一下源码就知道了，源码很显而易见，代码不多，逻辑清晰，有那么一丝丝感觉有些地方写的不好
        backgroundColor: '#fff',
        gradient: { // 数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色
            '0': 'blue',
            '0.2': 'blue',
            '0.4': 'green',
            '0.6': 'green',
            '0.8': 'yellow',
            '1': 'red'
        },
        // radius: 40, // 设置光圈的半径大小，值>=0,=0取得是默认值
        // opacity: 0.7, // 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值
        maxOpacity: .5, minOpacity: 0,
        // blur: .9
    });
    //构建一些随机数据点,网页切图价格这里替换成你的业务数据
    var points = [];
    var max = 0;
    var width = 600;
    var height = 400;
    var len = 200;
    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
    };
    57 //因为data是一组数据,web切图报价所以直接setData
    heatmapInstance.setData(data); //数据绑定还可以使用
</script>

</html>

heatma.js 要自己下载

API大概唠叨一下：

API一定要去官网去看一下，官网写的很简单，但是也很简单明了。

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

container 页面操作div的dom对象，如div的id为test,可以写成
backgroundColor 画板的背景颜色设置，支持rgb(a)，颜色名称，但必须要用引号
gradient 设置热点图的光圈颜色，数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色
radius 设置光圈的半径大小，值>=0,=0取得是默认值
opacity 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值

截图代码我自己稍微改了改，无伤大雅，就是告诉大家，可以灵活使用，如果运用require方式的话
在这里插入图片描述

小螃蟹er

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Heatmap.js 一个强大简易的web动态热图

Heatmap.js 一个强大简易的web动态热图最近在做热力图效果，背景图上绘制热力图，最开始使用的事Echarts，但是Echarts绘制是基于map，还其他一些第三方的库也很多基于map，还要进行坐标转化，麻烦的一批；最后还是研究一下heatmap.js这个库。by the way：需求迫于无奈使用了阿里的G2，交互效果勉强符合，但是看他们的API的时候，真的是麻烦的一批啊，API很多很乱，慎用。接下来看Heatmap.js:官网：http://www.patrick-wied.at/stat
复制链接

扫一扫