heatmap.js是一个轻巧,易于使用的JAVAScript库,可帮助您可视化三维数据!
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。
热力图示例
1、因为它是网络上最先进的热图可视化库。
它占地面积小(〜3kB gzip),并且有了新的2.0版本heatmap.js
2、插件模式
随着Heatmap.js或多或少地在github上积极开发和维护,人们贡献了一些非常有用的插件(尤其是对于GIS开发人员)
插件使用
1、只需要引入heatmap.min.js文件
<script src="js/heatmap.min.js"></script>
2、html加入热力图所需要的图片
<div class="heatmap" style="width:538px; height:503px; background:url(images/t.png) no-repeat;">热力图</div>
3、js
// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
var heatmapInstance = h337.create({
container: document.querySelector('.heatmap'),
});
//构建一些随机数据点,网页切图价格这里替换成你的业务数据
var points = [];
var max = 100;
var width = 538;
var height = 503;
var len = 5;
while (len--) {
var val = Math.floor(Math.random() * 1000);
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是一组数据,web切图报价所以直接setData
heatmapInstance.setData(data); //数据绑定还可以使用
热力图