1

私は自分のウェブサイトでheatmap.jsを使用しています。1 つの小さな問題は、ヒート マップを生成するイベントがトリガーされると、キャンバスが読み込まれる間、ページが数秒間使用できなくなることです。

このプロセス中に最終的にページを非表示にするロードバーを備えたモーダルダイアログを作成しました.モーダルを呼び出す関数を作成するのが難しいだけです.

heatcanvasと呼ばれる別の (あまり役に立たない) ヒート マップ ライブラリには、これを処理する 2 つの関数があります。

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/) ライブラリで 2 つの同様の関数を作成する方法はありますか?

ありがとう

4

1 に答える 1

3

残念ながら、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
    };

configure方法：

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

最後に、これらのコールバックがアタッチされている場合はそれらを呼び出します。setDataSetこれを行うのに最適な場所はメソッドだと思います：

   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 */);
        }
    }

このソリューションはテストしていないため、修正や改善が必要になる場合があることに注意してください。それがあなたを助けることを願っています。

于 2012-11-06T14:47:03.790 に答える