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		转换热力图为图片