基于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..