为了账号安全,请及时绑定邮箱和手机立即绑定

chart.js绘制热力图

标签:
Html/CSS

最近玩了玩图表的热力图,因为公司有同事想做无线设备的信号强度可视化,在不同频段(x 轴: MHz)的信号强度 ( y轴: dbm)本身就是一个两维的数据,加上随着时间的信号强度变化,在二维空间中会累加出热区效果,我们可以计算出热力值作为第三维数据。

webp

刚开始,信号强度密集的区域不是很明显

webp

随着时间推移,可以看出信号强度集中在40-60dbm 的部分

思路

利用chart.js 我们可以完成基本的坐标轴和信号强度线条的绘制,但是热力图是chart.js 本身不支持的,所以需要二次开发。
热力图实质上可以认为是点密度图,就是数据点在空间中的密集程度,越密集值越高。具体的算法可以根据自己的需求来定,但是主流的做法还是点密度。这种算法可以是截断的,也就是搜索半径内有多少数据点,就作为热力值。也可以是随着距离衰减的,比如IDW。

距离越远的点对于当前单元格的热力值影响相对弱,这也是地理学第一定律的典型应用。

static computeDensity(heatSets: any[], lineSets: number[], maxValueY: number) {    if (!heatSets) {
      mat = this.genMat(matY, matX, 0);  // 初始化 Y*X 的矩阵
    } else {
      mat = heatSets;  // 上一次累加后的热力值矩阵
    }    // 
    for (let x = 0; x < matX; x += 1) {      try {        // 把当前的信号强度点直接累加到原有的热力值矩阵上,如果想要把信号的其他属性作为权重,那么就把1 替换成当前点的某属性值
        mat[lineSets[x] - 1][x] += 1;        this.addBuffer(mat, lineSets, x, radius);  // 搜索半径为 radius, 对于当前数据点,我们要把ta 累加到附近的热力矩阵单元格内。
      }
    }
}// 根据热力矩阵的统计结果(最大最小值)来限定边界颜色,从红色渐变到背景色static setColor(densityData: DensityData) { 
    // 使得每个热力值都对应 不同的渐变色。}

性能

性能在实时性要求较高的热力图中很重要,包括 heatmap.js 这种著名的热力图库是具有很高性能的,因为ta 直接在canvas 的渲染函数里面 putImageDate, 利用渐变函数直接上色,性能是非常高的, 毫秒级别。

而我最开始的热力计算函数是很笨的,遍历整个矩阵(假如n * n)去搜索要计算热力的数据点或者线的节点(m个点),复杂度很高,最多需要执行 n * n * m 次累加函数。 但是后来逆向思维了一下,直接遍历数据点(m个),最多再加上遍历周边半径(rad)内的单元格,至多执行 m * rad 次累加函数。 这个复杂度大大降低,性能提升不止10倍。最开始的gif图中的例子,160 * 100 的矩阵,加上动态数据(160个节点),热力计算的耗时单次在10ms 以内。

webp

草图

关于点密度的计算还是挺有趣的,后面整理后再把关键代码放到Github 上。对,就是那个已经被微软收购的Github..



作者:四爷在此
链接:https://www.jianshu.com/p/69d381c5359c


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消