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>

         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'),

 });

 //构建一些随机数据点,网页切图价格这里替换成你的业务数据

 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

 };

  //因为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,

 });

热力图实现-heatmap.js 代码示例的更多相关文章

  1. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  2. 热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）

    我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...

  3. jsonp原生js代码示例

    /* mightygumball.js */ /* * get the content of a JSON file using JSONP * update every 3 seconds. * * ...

  4. 一文了解服务端推送（含JS代码示例）

    常用的服务端推送技术,包括轮询.长轮询.websocket.server-sent-event(SSE) 传统的HTTP请求是由客户端发送一个request,服务端返回对应response,所以当服务 ...

  5. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  6. 网页热力图 heatmap js

    HBuilder +js 实现网页热力图 废话不多说,上代码 <!DOCTYPE html> <html> <head> <title>111</ ...

  7. 热力图heatmap.js使用中的思路解析

    官网: https://www.patrick-wied.at/static/heatmapjs/ 需求:使用heatmap.js制作热力图,反映人群分布情况 问题:热力图需要的数据:坐标 + 人数 ...

  8. 中文代码示例之NW.js桌面应用开发初体验

    先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...

  9. 【JS】heatmap.js v1.0 到 v2.0，详细总结一下:)

    前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...

随机推荐

  1. java反射详解 （转至 http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html）

    本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象 ...

  2. 【问题】报错[CRITICAL] Rendering SLS 'base:minions.install' failed: Jinja variable 'list' object has no element 0

    1.报错[CRITICAL] Rendering SLS 'base:minions.install' failed: Jinja variable 'list' object has no elem ...

  3. HGNC 数据库-人类基因组数据库

    HGNC 全称为HUGO Gene Nomenclature Committee, 叫做 HUGO基因命名委员会,负责对人类基因组上包括蛋白编码基因, ncRNA基因,甲基因和其他基因在内的所有基因提 ...

  4. 最有价值的50道java面试题 适用于准入职Java程序员

    下面的内容是对网上原有的Java面试题集及答案进行了全面修订之后给出的负责任的题目和答案,原来的题目中有很多重复题目和无价值的题目,还有不少的参考答案也是错误的,修改后的Java面试题集参照了JDK最 ...

  5. openal 基础知识4

    二函数 1. buffer函数 void alGenBuffers(ALsizei n /* buffer数*/, ALuint * buffers /* buffer ID数组*/); void a ...

  6. oracle 死锁和锁等待的区别

    所谓的锁等待:就是一个事务a对一个数据表进行ddl或是dml操作时,系统就会对该表加上表级的排它锁,此时其他的事务对该表进行操作的时候会等待a提交或是回滚后,才可以继续b的操作 所谓的死锁:当两个或多 ...

  7. Vuforia AR实战教程

    官网:https://developer.vuforia.com/ Vuforia AR实战教程 http://www.taikr.com/my/course/531. AQaVpF//////AAA ...

  8. 用MathType怎么编辑带圈数字序号

    在用MathType编辑公式时,涉及到的数学公式与符号这些都能编辑出来,只要你能够细心一点找到它们相应的模板,不管是在word公式编辑器MathType工具栏模板中,还是在插入符号之后的面板中都可以. ...

  9. 基于FP-Growth算法的关联性分析——学习笔记

    数据挖掘 比之前的Ap快,因为只遍历两次. 降序 一.构建FP树 对频繁项集排序,以构成共用关系. 二.基于FP树的频繁项分析 看那个模式基出现过几次.频繁度. 看洗发液的 去掉频繁度小的 构建洗发液 ...

  10. Win8快捷键收集大汇总

    键盘党的用户有福了,熟悉操作系统快捷键,提高开发效率. Windows 8 常用快捷键: Windows 键 可在开始屏幕主菜单及最后一个应用程序间循环切换 Windows 键 + C 打开“超级按钮 ...