heatmap.js online demo - 踏得网

heatmap.js是在网页上动态生成热力图的一个轻量级开发库。

h5, heatmap

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1291
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function() {
    // helper function
    function $(id) {
        return document.getElementById(id);
    };
    /*  legend code */
    // we want to display the gradient, so we have to draw it
    var legendCanvas = document.createElement('canvas');
    legendCanvas.width = 100;
    legendCanvas.height = 10;
    var legendCtx = legendCanvas.getContext('2d');
    var gradientCfg = {};

function updateLegend(data) {
        // the onExtremaChange callback gives us min, max, and the gradientConfig
        // so we can update the legend
        $('min').innerHTML = data.min;
        $('max').innerHTML = data.max;
        // regenerate gradient image
        if (data.gradient != gradientCfg) {
            gradientCfg = data.gradient;
            var gradient = legendCtx.createLinearGradient(0, 0, 100, 1);
            for (var key in gradientCfg) {
                gradient.addColorStop(key, gradientCfg[key]);
            }
            legendCtx.fillStyle = gradient;
            legendCtx.fillRect(0, 0, 100, 10);
            $('gradient').src = legendCanvas.toDataURL();
        }
    };
    /* legend code end */
    // create a heatmap instance
    var heatmap = h337.create({
        container: document.getElementById('heatmapContainer'),
        maxOpacity: .5,
        radius: 10,
        blur: .75,
        // update the legend whenever there's an extrema change
        onExtremaChange: function onExtremaChange(data) {
            updateLegend(data);
        }
    });
    // boundaries for data generation
    var width = (+window.getComputedStyle(document.body).width.replace(/px/, ''));
    var height = (+window.getComputedStyle(document.body).height.replace(/px/, ''));
    // generate 1000 datapoints
    var generate = function() {
        // randomly generate extremas
        var extremas = [(Math.random() * 1000) >> 0, (Math.random() * 1000) >> 0];
        var max = Math.max.apply(Math, extremas);
        var min = Math.min.apply(Math, extremas);
        var t = [];
        for (var i = 0; i < 1000; i++) {
            var x = (Math.random() * width) >> 0;
            var y = (Math.random() * height) >> 0;
            var c = ((Math.random() * max - min) >> 0) + min;
            // btw, we can set a radius on a point basis
            var r = (Math.random() * 80) >> 0;
            // add to dataset
            t.push({
                x: x,
                y: y,
                value: c,
                radius: r
            });
        }
        var init = +new Date;
        // set the generated dataset
        heatmap.setData({
            min: min,
            max: max,
            data: t
        });
        console.log('took ', (+new Date) - init, 'ms');
    };
    // initial generate
    generate();
    // whenever a user clicks on the ContainerWrapper the data will be regenerated -> new max & min
    document.getElementById('heatmapContainerWrapper').onclick = function() {
        generate();
    };
};

编译

CSS

HTML