heatmap.js api docs All In One
https://www.patrick-wied.at/static/heatmapjs/docs.html
config
var nuConfig = {
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75
};
heatmapInstance.configure(nuConfig);
add
// a single datapoint
var dataPoint = {
x: 5, // x coordinate of the datapoint, a number
y: 5, // y coordinate of the datapoint, a number
value: 100 // the value at datapoint(x, y)
};
heatmapInstance.addData(dataPoint);
// multiple datapoints (for data initialization use setData!!) ✅
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
heatmapInstance.addData(dataPoints);
set
var data = {
max: 100,
min: 0,
data: [
dataPoint, dataPoint, dataPoint, dataPoint
]
};
heatmapInstance.setData(data);
heatmapInstance.setDataMax(200);
// setting the maximum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMax(100);
heatmapInstance.setDataMin(10);
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);
value
heatmapInstance.addData({ x: 10, y: 10, value: 100});
// get the value at x=10, y=10
heatmapInstance.getValueAt({ x: 10, y: 10 }); // returns 100
var currentData = heatmapInstance.getData();
// now let's create a new instance and set the data
var heatmap2 = h337.create(config);
heatmap2.setData(currentData); // now both heatmap instances have the same content
heatmapInstance.getDataURL(); // data:image/png;base64...
// ready for saving locally or on the server
repaint
heatmapInstance.repaint()
demo
window.h337 ok ✅
const importScript = () => {
if(!window.h337) {
const script = document.createElement('script');
script.src = '/libs/heatmap.min.js';
const body = document.querySelector('body');
body.appendChild(script);
}
};
const parentPage = document.getElementById('parentPage');
const heatMapObj = h337.create({
container: parentPage,
radius: 30,
maxOpacity: .5,
minOpacity: 0,
blur: .75
});
landing pages / 落地页
<div class="phone-box" >
<section
v-show="showHeatMap"
id="parentPage"
class="heatmap-box"
:style="`height: ${dynamicHeight}px;`">
<img
id="childPage"
name="childPage"
:src="previewCoverUrl"
style=" 100%; height: auto;"
alt="落地页封面"
srcset=""
/>
</section>
</div>
importScript () {
if(!window.h337) {
const script = document.createElement('script');
script.src = '/libs/heatmap.min.js';
const body = document.querySelector('body');
body.appendChild(script);
script.onload = () => {
this.iframeScroll();
};
} else {
this.iframeScroll();
}
},
iframeScroll (init = true) {
const img = document.getElementById('childPage');
if(this.isDragonflyLandingPage && this.showHeatMap && init) {
setTimeout(() => {
this.dynamicHeight = img.scrollHeight;
setTimeout(() => {
this.createHeatMap();
}, 0);
}, 0);
}
},
createHeatMap () {
const parentPage = document.getElementById('parentPage');
this.heatMapObj = h337.create({
container: parentPage,
radius: 30,
maxOpacity: .5,
minOpacity: 0,
blur: .75
});
// TODO: 缩放 坐标转换
// 坐标 375px => 300px
this.heatMapObj.addData({
x: this.autoConvert(100),
y: this.autoConvert(100),
value: 100,
});
this.heatMapObj.addData({
x: this.autoConvert(100),
y: this.autoConvert(1000),
value: 100,
});
},
autoConvert (value) {
const result = (value * 300) / 375;
return result;
},
changeShow (value) {
if(value) {
this.iframeScroll(false);
}
},
refs
https://www.cnblogs.com/xgqfrms/p/15650383.html
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 ️,侵权必究⚠️!