Web动态热图插件heatmap.js _heatmap.js

heatmap.js是一个轻巧，易于使用的JAVAScript库，可帮助您可视化三维数据！
heatmap.js满足了您所有的热图可视化需求！【Web动态热图插件heatmap.js】Heatmap热图通过众多数据点信息，汇聚成直观可视化颜色效果，热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业，甚至应用于竞技体育领域的数据分析。

文章插图
热力图示例
为什么选择heatmap.js？1、因为它是网络上最先进的热图可视化库。
它占地面积小（?3kB gzip），并且有了新的2.0版本heatmap.js

有了新的渲染模块，速度更快
更强大，可处理更多数据点（40k +）
易于使用，因此您可以快速上手
易于扩展以实现自定义功能

2、插件模式
随着Heatmap.js或多或少地在github上积极开发和维护，人们贡献了一些非常有用的插件（尤其是对于GIS开发人员）

文章插图
插件使用
使用方法1、只需要引入heatmap.min.js文件
<script src=https://www.isolves.com/it/cxkf/bk/2020-10-12/"js/heatmap.min.js">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支持自定义的样式方案,网页外包接活具体可看官网apivar 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切图报价所以直接setDataheatmapInstance.setData(data); //数据绑定还可以使用