heatmap.js_强大的Web热力图插件

Web前端开发网

fly63.com

首页资源工具文章教程栏目

heatmap.js

分享

网站地址:http://www.patrick-wied.at/static/heatmapjs/

描述信息:强大的Web热力图插件

访问官网

Heatmap 是用来呈现一定区域内的统计度量，最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。

Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页，帮助您研究和可视化用户的行为。 Heatmap.js V2.0 是目前网络上最先进的热图可视化库。新的2.0版本 Heatmap.js 更快，拥有更强的渲染模块，使用更方便，因此您可以快速掌握和扩展自定义功能。

代码

<!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>

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的值

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2936

热门资源

目前应用较广泛的移动端网页触摸内容滑动js插件

官网

GitHub

layer是一款口碑极佳的web弹层组件

GitHub

IScroll是移动页面上被使用的一款仿系统滚动插件。

官网

GitHub

基于javascript和css开发的 Web富文本编辑器

官网

GitHub

由百度web前端研发部开发所见即所得富文本web编辑器

官网

GitHub

Highlight.js 是一个用 JavaScript 写的代码高亮插件，在客户端和服务端都能工作。

官网

GitHub

一个js 解释器、最小化器、压缩器、美化器工具集

官网

GitHub

高性能,轻量级,可配置的懒加载图片工具

官网

GitHub

简单灵活的 JavaScript 拖放排序插件

官网

GitHub

表单提供了强大的验证功能,让客户端表单验证变得更简单

官网

GitHub

一款兼容移动手机的js拖拽插件

官网

GitHub

响应式图像延迟加载JS插件【懒加载】

官网

GitHub

类似于heatmap.js的资源

JavaScript happiness style linte

GitHub

一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源

官网

GitHub

一个快速、易于使用、文档齐全且经过全面测试的 WebSocket 客户端和服务器实现

GitHub

将 Word 文档转换为 HTML 的库

GitHub

weapp.socket.io

基于小程序的websocket的socket.io实现

官网

GitHub

一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等

官网

GitHub

轻量级的行内工具栏编辑器

官网

GitHub

使用 CSS 选择器检测新的 DOM 节点的js库

官网

GitHub