基于chart.js绘制热力图

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

ps: 以下图表显示的都是随机的模拟数据。

计算思路

利用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 次累加函数。 这个复杂度大大降低，耗时从1000ms左右降到10ms 以内。 原谅我搞不清楚大O 算法复杂度。。哈哈

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