heatmap.js是一個輕巧，易于使用的JAVAScript庫，可幫助您可視化三維數(shù)據(jù)！

heatmap.js滿足了您所有的熱圖可視化需求！

Heatmap熱圖通過眾多數(shù)據(jù)點(diǎn)信息，匯聚成直觀可視化顏色效果，熱圖已廣泛被應(yīng)用于氣象預(yù)報、醫(yī)療成像、機(jī)房溫度監(jiān)控等行業(yè)，甚至應(yīng)用于競技體育領(lǐng)域的數(shù)據(jù)分析。

熱力圖示例

為什么選擇heatmap.js？

1、因?yàn)樗蔷W(wǎng)絡(luò)上最先進(jìn)的熱圖可視化庫。
它占地面積小（?3kB gzip），并且有了新的2.0版本heatmap.js

• 有了新的渲染模塊，速度更快
• 更強(qiáng)大，可處理更多數(shù)據(jù)點(diǎn)（40k +）
• 易于使用，因此您可以快速上手
• 易于擴(kuò)展以實(shí)現(xiàn)自定義功能

2、插件模式

隨著Heatmap.js或多或少地在github上積極開發(fā)和維護(hù)，人們貢獻(xiàn)了一些非常有用的插件（尤其是對于GIS開發(fā)人員）

插件使用

使用方法

1、只需要引入heatmap.min.js文件

<script src="js/heatmap.min.js"></script>

2、html加入熱力圖所需要的圖片

<div class="heatmap" style="width:538px; height:503px; background:url(images/t.png) no-repeat;">熱力圖</div>

3、js

// 創(chuàng)建一個heatmap實(shí)例對象
// “h337” 是heatmap.js全局對象的名稱.可以使用它來創(chuàng)建熱點(diǎn)圖實(shí)例
// 這里直接指定熱點(diǎn)圖渲染的div了.heatmap支持自定義的樣式方案,網(wǎng)頁外包接活具體可看官網(wǎng)api
var heatmapInstance = h337.create({
    container: document.querySelector('.heatmap'),
});
//構(gòu)建一些隨機(jī)數(shù)據(jù)點(diǎn),網(wǎng)頁切圖價格這里替換成你的業(yè)務(wù)數(shù)據(jù)
var points = [];
var max = 100;
var width = 538;
var height = 503;
var len = 5;
while (len--) {
    var val = Math.floor(Math.random() * 1000);
    max = Math.max(max, val);
    var point = {
        //演示隨機(jī)數(shù)據(jù)
        x: Math.floor(Math.random() * width),
        y: Math.floor(Math.random() * height),
        value: val
    };
    points.push(point);
}
var data = {
    max: max,
    data: points
};
//因?yàn)閐ata是一組數(shù)據(jù),web切圖報價所以直接setData
heatmapInstance.setData(data); //數(shù)據(jù)綁定還可以使用

熱力圖