前几天接了个业务,两百块钱。
帮助同校的学妹做前端设计。
其中一个问题是如何用HeatMap.js做热力图呢,我参考了csdn上的数据,得出这个demo
---------------------------------------------------以下是分割线-------------------------------------------
// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称。可以使用它来创建热点图实例
var heatmapInstance = h337.create({
//这里直接指定热点图渲染的div了。
//heatmap支持自定义的样式方案,具体可看官网api
container: document.querySelector('#heatmap')
});
//构建一些随机数据点,这里替换成你的业务数据
var points = [];
var max = 0;
var width = 600;
var height = 400;
var len = 200;
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random()*width),
y: Math.floor(Math.random()*height),
value: val
};
points.push(point);
}
var data = {
max: max,
data: points
};
//因为data是一组数据,所以直接setData
heatmapInstance.setData(data);
//数据绑定还可以使用 addData(object|array) 方法
/**
//单个数据点的添加方式
var dataPoint = {
x: 5,
y: 15,
value: 100
};
heatmapInstance.addData(dataPoint);
//多个数据点的添加方式
var dataPoints = [dataPoint1, dataPoint2, dataPoint3, dataPoint4];
heatmapInstance.addData(dataPoints);
**/
参考自
作者:五只鸭子
来源:CSDN
原文:https://blog.csdn.net/tuposky/article/details/44832377