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