热力图heatmap.js使用中的思路解析
官网: https://www.patrick-wied.at/static/heatmapjs/
需求:使用heatmap.js制作热力图,反映人群分布情况
问题:热力图需要的数据:坐标 + 人数 + max人数, 从后台能拿到的数据总共只有12条,要怎么更加准确、效果更加地显示整个区域的人群分布呢?
壹解:用12条数据,12个坐标的话,每个点的半径就是超级超级大,人流分布无法详尽,效果很明显无法满足需求。×
贰解:整个区域分成12部分,每部分都有一个各自的总人数。而每部分根据实际人数占比划分为2-3小部分,如右图所示:
根据画图的点的数量:
第一区域area1 上下比例为3:7,top上部点数量为 6 的话,bottom下部点的数量就为 6/3*7 = 14,上下部分点的半径一致,并均匀分布,然后根据area1内的点总数,计算每个点的value,
以此类推。最后根据整区域的平均值(后台数据)除以 12个区域点的平均数 得到 max值,从而成功画出热力图。(因是后面整理的笔记,故无效果图)
后经过测试,与实际情况并不相符,差别甚大。×
叁解:改变方式,根据画图的点的值:
在第一区域area1内,均匀分布点的坐标(通过后面自我测试,发现横向两点间距最佳为半径的一半,纵向间距为半径距离),例如半径为50,area1点坐标为:(因背景底图上会有建筑物部分,热力图不能覆盖,故无法使用代码计算坐标)
area1总人数为m,area1上部分人数:m * 30%,下部分人数:m * 70% 。每个点的value为,上部分: m * 30%,下部分: m * 70% , max:area1的平均值(后台数据) , 成功达到预期效果,与实际情况也是90%吻合
最终效果图:
热力图heatmap.js使用中的思路解析的更多相关文章
- 网页热力图 heatmap js
HBuilder +js 实现网页热力图 废话不多说,上代码 <!DOCTYPE html> <html> <head> <title>111</ ...
- 热力图实现-heatmap.js 代码示例
Heatmap.js – 最强大的 Web 动态热图 最新公司项目需要用到热力图,在百度上搜下,了解到heatmap.js这款神器.然后搜了下例子,却很难搜到马上出效果的例子,特此写一篇heatma ...
- 热力图 vue 项目中使用热力图插件 “heatmap.js”(保姆式教程)
我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...
- 【JS】heatmap.js v1.0 到 v2.0,详细总结一下:)
前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...
- Heatmap.js v2.0 – 最强大的 Web 动态热图
Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...
- django基础之day08,分页器从无到有,动态思路解析全过程
*********分页器从无到有的全过程,动态思路解析如下:******** 1.通过book_queryset = models.Book.objects.all()[start_num:end_n ...
- js里各浏览器解析XML,支持IE、火狐、Chrome等
js在chrome中加载XML,js加载XML支持ff,IE6+,Opera等浏览器 见代码: <!doctype html> <html lang="en"&g ...
- ThinkPHP第八天(U函数放置在外部JS不会被解析,错误界面定制,错误信息变量)
1.JS外部文件中U函数不会被解析,内部JS代码可以被解析. 2.halt. _404可以定制错误模板,在配置文件中配置 TMPL_EXCEPTION_FILE =>'./Public/Tpl/ ...
- 一种轻便且灵活的js模板的思路
一种轻便且灵活的js模板的思路 项目地址:https://github.com/j20041426/template 思路背景 在Vue.React.Angular等大前端框架异军突起的今天,写前端时 ...
随机推荐
- Loadrunner初学
1.创建脚本 启动Vvitrual User Generator 创建脚本 因为我们选择录制页面相关的操作,则选择web(HTTP/HTML) application type 选择是录制浏览器网页还 ...
- linux dd使用记录
dd if=/dev/sda of=/dev/sdb bs=10M Linux下显示dd命令的进度: dd if=/dev/zero of=/tmp/zero.img bs=10M count=100 ...
- JavaScript(第九天)【正则表达式】
假设用户需要在HTML表单中填写姓名.地址.出生日期等.那么在将表单提交到服务器进一步处理前,JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的. 一.什么是正则表 ...
- IT & ME
第一部分:结缘计算机 填报志愿的那天晚上,老爸老妈和我一起在房间里讨论专业选择的事情.因为我性格比较内敛,家人建议我去学医.而我又对学医一点也不感冒,再加上自己高中时期一直喜欢玩游戏,于是最后就填报了 ...
- 团队作业2:需求分析&原型设计
Deadline: 2017-11-5 22:00PM,以博客发表日期为准. 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以 ...
- 【iOS】Swift GCD-下
欢迎来到本GCD教程的第二同时也是最终部分! 在第一部分中,你学到了并发,线程以及GCD的工作原理.通过使用dispatch_barrrier和dispatch_sync,你做到了让PhotoMana ...
- Django 分类标签查找
from django.conf.urls import url from django.contrib import admin from blog.views import index,stude ...
- android 时间获取以及时间格式化
Android中获取系统时间有多种方法,可分为Java中Calendar类获取,java.util.date类实现,还有android中Time实现 现总结如下: 方法一: void getTime1 ...
- nyoj 数的长度
描述 N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出N!的位数有多少(十进制)? 输入 首行输入n,表示有多少组测试数据(n<1 ...
- nyoj VF
VF 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 Vasya is the beginning mathematician. He decided to make ...