最近项目需要用到热力图,于是乎找了这个,挺好用的,分享给大家哦!
.js是一个轻巧,易于使用的库,可帮助您可视化三维数据!
.js满足了您所有的热图可视化需求!
热图通过众多数据点信息,汇聚成直观可视化颜色效果ios 调用 c语言 静态库,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。
热力图示例
为什么选择.js?
1、因为它是网络上最先进的热图可视化库。
它占地面积小(〜3kB gzip)ios 调用 c语言 静态库,并且有了新的2.0版本.js
2、插件模式
随着.js或多或少地在上积极开发和维护,人们贡献了一些非常有用的插件(尤其是对于GIS开发人员)
插件使用
使用方法
1、只需要引入.min.js文件
2、html加入热力图所需要的图片
热力图
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); //数据绑定还可以使用
热力图
更多教程和示例请查看官网哦!
本文到此结束,希望对大家有所帮助。
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至81118366@qq.com举报,一经查实,本站将立刻删除。发布者:简知小编,转载请注明出处:https://www.jianzixun.com/87012.html