Heatmap.js 学习笔记

heatmap.js 2.0

github
https://github.com/pa7/heatmap.js/releases

参考博客 http://blog.csdn.net/rongchaoliu/article/details/47830799

一、简介

Heatmap.js（热图） 是目前应用最广的web动态热图javaScript库,帮助研究和可视化用户的行为。

热图有时候叫热区图或者热力图，都是用于表现某种事物密集度的图形化显示

用途：
1.网站设计，可以帮助设计人员知道用户喜欢点哪些地方，对哪些东西感兴趣，以此来改良设计，改善用户体验
2.用户调查：现在很多像购物网站，都用到heatmap分析顾客在网站上哪些地方点击量比较大
3.模拟分布，比如绘制热力地图、气象云图、无线射频信号的分布等等，都可以用这个来做

---

二、代码结构

1.js库包裹在一个立即执行匿名函数库中，避免污染全局变量命名空间

2.核心对象
1）Store（数据）
2）Canvas2dRenderer（绘制工具）
3）HeatMap（构建器）

3.通过global[‘h337’]暴露 创建工厂

---

三、热力图渲染原理

1、设置单点渲染模板
核心方法：canvas的createRadialGradient方法

每个点设置渲染半径，由渐变因子blur确定内圆比例，内圆与外圆的圆周间进行无色的放射渐变，达到中间透明度高，边缘透明度低的效果。这个无色的透明度渐变的圆形即为点的模板

2、根据模板绘制全部点
核心方法：canvas的drawImage方法

在每个点的位置按照模板进行绘制，达到重叠部分透明度叠加的效果

3、构建0到256的调色板
核心方法：canvas的createLinearGradient方法

    var gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);    for (var key in gradientConfig) {      gradient.addColorStop(key, gradientConfig[key]);    }    paletteCtx.fillStyle = gradient;    paletteCtx.fillRect(0, 0, 256, 1);

4、着色
核心方法：canvas的putImageData方法

对绘制的每个点进行着色，获取绘制的区域中每个像素，根据像素的透明度去调色板中取对应的颜色进行渲染，最后达到热力图的效果

---

四、代码解读

1.heatmapFactory 创建工厂对象

<1>通过h337属性名暴露给外界

global['h337'] = heatmapFactory;

<2>heatmapFactory内容

var heatmapFactory = {  create: function(config) {    return new Heatmap(config);  },  register: function(pluginKey, plugin) {    HeatmapConfig.plugins[pluginKey] = plugin;  }};

creat方法:创建heatmap对象
register方法：注册一个heatmap插件，即给插件一个key以管理

<3>config为创建heatmap的参数配置信息

名称 类型 描述 container DomNode heatmap载体,必须 backgroundColor String canvas背景色 gradient Object 渐变色，用于制作调色板 radius Number 点半径 opacity Number[0,1] 热力图渲染透明度，设置该参数后，maxOpaticy、minOpaticy参数无效 maxOpacity Number[0,1] 热力图渲染允许的透明度最大值，默认为1. minOpacity Number[0,1] 热力图渲染允许的透明度最小值，默认为0. useGradientOpacity Boolean 热力图渲染是否使用gradient渐变色的透明度，默认false,设置为true时opacity、maxOpaicy、minOpaticy无效。 onExtremaChange functioncallback 渲染的数据极值发生变化的事件回调函数，由以下函数触发setData、setDataMax、setDataMin。 blur Number[0,1] 模糊因子，默认0.85 xField String x坐标属性名称，默认为’x’ yField String y坐标属性名称，默认为’y’ valueField String 渲染属性名称，默认为’value’,若渲染属性不存在，则一个点value为1

2.heatmapInstance heatMap对象
h337.creat(config)，命名为heatmapInstance
<1>heatmapInstance的API接口

方法 参数 描述 setData Object[] data 设置渲染的数据 addData Objext data 添加渲染的数据 removeData 移除渲染的数据 setDataMax Number 设置渲染最大值，并重新绘制 setDataMin Number 设置渲染最小值，并重新绘制 configure config 设置热力图配置信息 repaint 重绘 getData 返回store中的数据 getDataURL 返回热力图图片 getValueAt point 返回一个像素点渲染数据

3.HeatmapConfig 默认配置

var HeatmapConfig = {  defaultRadius: 40,  defaultRenderer: 'canvas2d',  defaultGradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},  defaultMaxOpacity: 1,  defaultMinOpacity: 0,  defaultBlur: .85,  defaultXField: 'x',  defaultYField: 'y',  defaultValueField: 'value',   plugins: {}};

名称 默认值 描述 defaultRadius 40 点半径 backgroundColor canvas2d 绘图工具，canvas绘图对象,2D defaultGradient { 0.25: “rgb(0,0,255)”, 0.55: “rgb(0,255,0)”, 0.85: “yellow”, 1.0: “rgb(255,0,0) 渐变色，用于制作调色板 defaultMaxOpacity 1 透明度最大值 defaultMinOpacity 0 透明度最小值 defaultBlur 0.85 颜色渐变因子值，值越大，内圆越小，热力效果越小 defaultXField x x坐标属性名称 defaultYField y y坐标属性名称 defaultValueField value 渲染字段名称

4.Store 数据管理

方法 参数 描述 setData Object[] data 设置渲染的数据 addData Objext data 添加渲染的数据 removeData 移除渲染的数据 setDataMax Number 设置渲染最大值，并重新绘制 setDataMin Number 设置渲染最小值，并重新绘制 setCoordinator Coordinator 设置事件管理对象，Coordinator为heatMap中定义事件管理类 _organiseData dataPointforceRender 将数据按照heatmap要求进行格式化 getData 返回当前渲染的数据

5、Renderer (Canvas2dRenderer) 渲染管理

方法 参数 描述 Canvas2dRenderer config 渲染器初始化方法 _getColorPalette config 获取调色板 _setStyles config 设置渲染样式，背景色、渐变因子、透明度 _prepareData data 将store处理完成的数据转换为可渲染的数据 _getPointTemplate radius,blur 根据圆半径和渐变因子确定一个点渲染的模板 _drawAlpha data 根据渲染的数据进行点绘制，未着色 _colorize 对绘制完成的渲染数据进行着色 renderPartial data 对传入的数据进行渲染 renderAll data 将传入的数据作为全部数据进行渲染 _updateGradient config 更新渲染的渐变色，即重新设置调色板 updateConfig config 更新渲染配置信息，即更新渲染的渐变色和渲染相关样式 setDimensions width,height 设置画布宽高 _clear 清除画布 getValueAt point 获取一个像素点数据，包括颜色及透明度 getDataURL 转换热力图为图片