js heatmap.js 使用说明

GitHub: ​​https://github.com/pa7/heatmap.js​​​ 官方网址:​​https://www.patrick-wied.at/static/heatmapjs/​​ 官方 Doc 说明: ​​https://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create​

我写的一个例子:​​https://kylebing.cn/e/#/test/heatmap​

js heatmap.js 使用说明_github

简介

​heatmap.js​​ 能实现的是,在现有 dom 之上新建一个 canvas 层,在这个层上显示热力图,根据设置的 heat 点位。

安装

// NPM 
npm i heatmapjs

// 或者 yarn
yarn add heatmapjs

主要方法

主要方法有两个,一个是根据 dom 元素 创建 heatmap 实例,config 的主要参数有 : ​​https://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create​

let heatmap = h337.create(config)

一个是更新 ​​heatmap​​ 的点位数据

heatmap.setData({
data: [
{x: 23, y: 45, value: 23},
{x: 23, y: 566, value: 45},
{x: 45, y: 254, value: 12},
],
max: 30, // 最大值
min: 0 // 最小值
})

示例代码

// Vue
// 引入 heatmapjs
import h337 from 'heatmapjs'

// 初始化 heat map
heatMapInit(){
let config = {
container: this.$refs.display, // 显示热力图的 dom 元素、或元素 id 名
radius: 70, // 半径
maxOpacity: 1, // 最大透明度 0 - 1.0
minOpacity: 0, // 最小透明度 0 - 1.0
blur: 0.6 // 边缘羽化程度 0.0 - 1.0
}
// create heatmap with configuration
this.heatmap = h337.create(config);
this.updateHeatMap()
},

// 根据数据数组 更新 heatmap 图
updateHeatMap(){
let dataHeat = this.dataOrigin.map(item => {
return {
x: item.reserve.location.offsetX + 30,
y: item.reserve.location.offsetY + 30,
value: item.unit[2].value
}
})
this.heatmap.setData(
{
data: dataHeat,
max: 30,
min: -10
}
)
},

例子

我写的一个例子:​​https://kylebing.cn/e/#/test/heatmap​

js heatmap.js 使用说明_vue.js_02