最近玩了玩圖表的熱力圖滚秩，因?yàn)楣居型孪胱鰺o(wú)線設(shè)備的信號(hào)強(qiáng)度可視化，在不同頻段（x 軸: MHz）的信號(hào)強(qiáng)度 ( y軸: dbm)本身就是一個(gè)兩維的數(shù)據(jù)榕吼，加上隨著時(shí)間的信號(hào)強(qiáng)度變化您朽，在二維空間中會(huì)累加出熱區(qū)效果，我們可以計(jì)算出熱力值作為第三維數(shù)據(jù)仍源。
思路
利用chart.js 我們可以完成基本的坐標(biāo)軸和信號(hào)強(qiáng)度線條的繪制笼踩，但是熱力圖是chart.js 本身不支持的，所以需要二次開發(fā)亡嫌。
熱力圖實(shí)質(zhì)上可以認(rèn)為是點(diǎn)密度圖嚎于，就是數(shù)據(jù)點(diǎn)在空間中的密集程度，越密集值越高挟冠。具體的算法可以根據(jù)自己的需求來(lái)定于购，但是主流的做法還是點(diǎn)密度。這種算法可以是截?cái)嗟?/strong>知染，也就是搜索半徑內(nèi)有多少數(shù)據(jù)點(diǎn)肋僧，就作為熱力值。也可以是隨著距離衰減的控淡，比如IDW嫌吠。
距離越遠(yuǎn)的點(diǎn)對(duì)于當(dāng)前單元格的熱力值影響相對(duì)弱，這也是地理學(xué)第一定律的典型應(yīng)用掺炭。
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 {
// 把當(dāng)前的信號(hào)強(qiáng)度點(diǎn)直接累加到原有的熱力值矩陣上辫诅，如果想要把信號(hào)的其他屬性作為權(quán)重，那么就把1 替換成當(dāng)前點(diǎn)的某屬性值
mat[lineSets[x] - 1][x] += 1;
this.addBuffer(mat, lineSets, x, radius); // 搜索半徑為 radius, 對(duì)于當(dāng)前數(shù)據(jù)點(diǎn)竹伸，我們要把ta 累加到附近的熱力矩陣單元格內(nèi)泥栖。
}
}
}
// 根據(jù)熱力矩陣的統(tǒng)計(jì)結(jié)果（最大最小值）來(lái)限定邊界顏色，從紅色漸變到背景色
static setColor(densityData: DensityData) {
// 使得每個(gè)熱力值都對(duì)應(yīng) 不同的漸變色勋篓。
}
性能
性能在實(shí)時(shí)性要求較高的熱力圖中很重要吧享，包括 heatmap.js 這種著名的熱力圖庫(kù)是具有很高性能的，因?yàn)閠a 直接在canvas 的渲染函數(shù)里面 putImageDate譬嚣， 利用漸變函數(shù)直接上色钢颂，性能是非常高的， 毫秒級(jí)別拜银。
而我最開始的熱力計(jì)算函數(shù)是很笨的殊鞭，遍歷整個(gè)矩陣（假如n * n）去搜索要計(jì)算熱力的數(shù)據(jù)點(diǎn)或者線的節(jié)點(diǎn)（m個(gè)點(diǎn)），復(fù)雜度很高尼桶，最多需要執(zhí)行 n * n * m 次累加函數(shù)操灿。 但是后來(lái)逆向思維了一下，直接遍歷數(shù)據(jù)點(diǎn)（m個(gè)）泵督，最多再加上遍歷周邊半徑（rad）內(nèi)的單元格趾盐，至多執(zhí)行 m * rad 次累加函數(shù)。 這個(gè)復(fù)雜度大大降低小腊，性能提升不止10倍救鲤。最開始的gif圖中的例子，160 * 100 的矩陣秩冈，加上動(dòng)態(tài)數(shù)據(jù)（160個(gè)節(jié)點(diǎn)）本缠，熱力計(jì)算的耗時(shí)單次在10ms 以內(nèi)。
關(guān)于點(diǎn)密度的計(jì)算還是挺有趣的入问，后面整理后再把關(guān)鍵代碼放到Github 上丹锹。對(duì)，就是那個(gè)已經(jīng)被微軟收購(gòu)的Github..
