heatmap.js 是目前适用范围最广的热点图插件，他的实现原理是通过canvas来绘出热点图的区域点的，所以heatmap只能在支持html5的浏览器上使用。
效果图显示
demo代码：
<html>
<body>
<div id="heatmap" style="width:600px; height:400px;border: 1px solid;border-color: grey;"></div>
</body>
<script src="heatmap.min.js"></script>
<script type="text/javascript">
// 创建一个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);
**/
</script>
</html>
时间： 2024-10-10 13:12:42