博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
heatmap.js
阅读量:6193 次
发布时间:2019-06-21

本文共 4441 字,大约阅读时间需要 14 分钟。

恩如题

用了seajs 也可以不用

define(function (require, exports, module) {    require('./gmaps-heatmap.js/index.js');//这个作用不明,不引用应该也可以    require('./heatmap.js');    require('./heatmap.min.js');//引用不压缩版的就是正常的,压缩版的就不行,蛋疼    var commpent = {        showct: function (id) {//显示            document.getElementById(id).style.display = "block";        },        hidect: function (id) {//隐藏            document.getElementById(id).style.display = "none";        },        getheatMapData() {            var userData = {};        },        initcontainer: (obj) => {            $('#mengban').css({ "display": "block" });            var max = 0;            let pContainer = obj.parentContainer || obj.selector || 'heatContainer';            let st = obj.selector || 'body';            console.log("this.initcontainer");            if (obj.selector) {            }            function formatDataf(data) {                var cwidth = document.body.clientWidth;                var formatArray = [];                data.forEach(function (item) {                    item.x = item.x * (item.width / cwidth);                    item.y = item.y * (item.width / cwidth);                    item.value = 1;                    var sarry = formatArray.some(function (itemarr) {//判断是否有重复的                        if (item.x == itemarr.x && item.y == itemarr.y) {                            itemarr.value = itemarr.value + 1;                            max = Math.max(max, itemarr.value);                            return true;                        } else {                            return false;                        }                    })                    formatArray.push(item);                    if (!sarry) {                        formatArray.push(item);                    } else {                    }                })                //formatArray=data;//测试                //return formatArray;                return formatArray;            }            $.ajax({//获取首页签约用户                //url: "/getheatmapData/mainHome0",                url: obj.url,                data: {},                type: "POST",                error: function (error) {                    console.log(error)                },                success: function (data) {                    // debugger                    let userData = {};                    userData.a = data;                    var formatData = formatDataf(data);                    // console.log('formatData', formatData);                    console.log("***********签约用户数量", data.length);                    console.log(document.getElementById('heatContainer'));                    console.log('offsetHeight', document.getElementById('heatContainer').offsetHeight);                    var heatmap = '';                    if (obj.containerId) {                        heatmap = h337.create({                            container: document.getElementById(obj.containerId),                            backgroundColor: 'red',    // '#121212'    'rgba(0,102,256,0.2)'                            radius: 10,        // [0,+∞)                            opacity: 1,                        });                    } else {                        heatmap = h337.create({                            container: document.getElementById('heatContainer')                        });                    }                    // this.heatmap = heatmap;                    console.log('max', max)                    heatmap.setData({                        max: max, //按了最大值如果嫌浅,可以自己调节                        min: 1,                        data: formatData                    });                    var ct = document.getElementById('mengban');                    var self = this;                    // setTimeout(() => {                    //     $('#mengban').css({ 'display': "none" });                    // }, 5000);                }            })        },        init: (obj) => {            initcontainer(selector, parentContainer)        }    }    module.exports = commpent});

dom:

在需要加入热点图的地方加上;没做动态添加dom的,有时间可以做下;

<!-- 热力图 -->

<div id="mengban" style="position: absolute;width:100%;height:100%;z-index: 99">
<div id="heatContainer" style="height: 100%;width:100%;position:relative">
</div>
</div>

引用的时候

//热力图组件 引入jsvar heatMap = require('./heatmapComment');//主页   url 是ajax接口地址 heatMap.initcontainer({ url: "/getheatmapData/mainHome0" });

恩heatmap下载很重要,要感谢大神的分享,这个上面有heatmap.js下载链接

转载于:https://blog.51cto.com/13496570/2409277

你可能感兴趣的文章
C语言初学者代码中的常见错误与瑕疵(14)
查看>>
已知ip地址和其子网掩码如何求网络号子网号主机号
查看>>
asp.net 导出excel的一种方法
查看>>
html块状元素、内联元素
查看>>
WCF服务端与客户端时间匹配问题
查看>>
ruby之各种概念
查看>>
array_column php 函数 自定义版本 php_version<5.5
查看>>
关于大型网站技术演进的思考(十八)--网站静态化处理—反向代理(10)
查看>>
RHCS集群理论暨最佳实践
查看>>
第3章 Java语言基础----声明常量
查看>>
iPhone取消软件更新上边的1
查看>>
CentOS禁用root本地或远程ssh登录
查看>>
多表连接的三种方式详解 hash join、merge join、 nested loop
查看>>
SQL Server 自定义函数(1)把某一列多行的值拼接成一个字符串
查看>>
ASP Request.ServerVariables 参数集
查看>>
矩阵键盘 数码管
查看>>
何谓集群
查看>>
hive建表没使用LZO存储格式,可是数据是LZO格式时遇到的问题
查看>>
Elasticsearch教程(九) elasticsearch 查询数据 | 分页查询
查看>>
magento megatron主题加入中文
查看>>