Javascript 渲染热图HTML画布时调用函数

我在我的网站上使用，看起来很棒。一个小问题是，当触发生成热图的事件时，画布加载时，页面会在几秒钟内变得不可用

我已经创建了一个带有加载条的模态对话框，在这个过程中它最终会隐藏页面，我只是在创建调用模态的函数时遇到了困难

在另一个名为的（稍微不太有用）热图库中，有两个函数可以处理此问题：

heatmap.onRenderingStart = function(){document.getElementById('status').innerHTML = 'rendering...'}
heatmap.onRenderingEnd = function(){document.getElementById('status').innerHTML = 'ready'}

有没有办法用heatmap.js创建两个类似的函数(http://www.patrick-wied.at/static/heatmapjs/)图书馆

---

谢谢

不幸的是，heatmap.js在默认情况下似乎不提供此类回调。您所能做的最好的事情就是完成这个项目并自己添加这个功能。我会尽量给你指出一些需要改变的地方

首先，您需要提供添加回调的功能：

// heatmap object constructor
var heatmap = function heatmap(config){
    // private variables
    var _ = {
        radius : 40,
        element : {},
        canvas : {},
        acanvas: {},
        ctx : {},
        actx : {},
        legend: null,
        visible : true,
        width : 0,
        height : 0,
        max : false,
        gradient : false,
        opacity: 180,
        premultiplyAlpha: false,
        bounds: {
            l: 1000,
            r: 0,
            t: 1000,
            b: 0
        },
        debug: false,
        onRenderingStart: null,
        onRenderingEnd: null
    };

配置

方法：

   me.set("onRenderingStart", config.onRenderingStart || null);
   me.set("onRenderingEnd", config.onRenderingEnd || null);

   setDataSet: function(obj, internal){
        var me = this,
            heatmap = me.get("heatmap"),
            onRenderingStart = heatmap.get("onRenderingStart"),
            onRenderingEnd= heatmap.get("onRenderingEnd"),
            data = [],
            d = obj.data,
            dlen = d.length;

        if(typeof onRenderingStart === "function") {
            onRenderingStart(/* maybe it'd be a good idea to pass reference to heatmap or sth */);
        }

        // the rest of the code

        heatmap.colorize();
        this.set("data", d);

        if(typeof onRenderingEnd === "function") {
            onRenderingEnd(/* maybe it'd be a good idea to pass reference to heatmap or sth */);
        }
    }

最后一件事是调用这些回调，如果它们是附加的。我想最好的方法是

setDataSet

方法：

   me.set("onRenderingStart", config.onRenderingStart || null);
   me.set("onRenderingEnd", config.onRenderingEnd || null);

   setDataSet: function(obj, internal){
        var me = this,
            heatmap = me.get("heatmap"),
            onRenderingStart = heatmap.get("onRenderingStart"),
            onRenderingEnd= heatmap.get("onRenderingEnd"),
            data = [],
            d = obj.data,
            dlen = d.length;

        if(typeof onRenderingStart === "function") {
            onRenderingStart(/* maybe it'd be a good idea to pass reference to heatmap or sth */);
        }

        // the rest of the code

        heatmap.colorize();
        this.set("data", d);

        if(typeof onRenderingEnd === "function") {
            onRenderingEnd(/* maybe it'd be a good idea to pass reference to heatmap or sth */);
        }
    }

---

请注意，我尚未测试此解决方案，它可能需要一些修复和改进。希望对您有所帮助。

谢谢！我现在就试试：）