Web-Based Dynamic Heatmap Plugin heatmap.js

Add-ons

2026-07-26 04:23 5 次浏览 • 0 次下载 35.6KB

Plugin Description: Web-based dynamic heatmap plugin heatmap.js, which can be used to monitor device operating status.

Usage

Simply include the heatmap.min.js file.

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

Add the image required for the heatmap to the HTML.

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

// Create a heatmap instance
// "h337" is the name of the global heatmap.js object. It can be used to create heatmap instances.
// Specify the div element for rendering the heatmap directly here. heatmap supports custom styling solutions. For details on web outsourcing projects, see the official API documentation.
var heatmapInstance = h337.create({
    container: document.querySelector('.heatmap'),
});
// Generate some random data points. Replace these with your actual business data.
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 = {
        // Demo random data
        x: Math.floor(Math.random() * width),
        y: Math.floor(Math.random() * height),
        value: val
    };
    points.push(point);
}
var data = {
    max: max,
    data: points
};
// Since data is an array of data points, use setData directly.
heatmapInstance.setData(data); // Data binding can also use