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

javascript 专栏收录该内容
26 篇文章 0 订阅

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方式的话
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值