我正在使用 heatmap.js在我的网站上,看起来很棒。一个小问题是,当触发生成热图的事件时,在加载 Canvas 时页面会在几秒钟内变得不可用。
我已经创建了一个带有加载条的模态对话框,最终会在此过程中隐藏页面,我只是在创建调用模态的函数时遇到了困难。
在另一个名为 heatcanvas 的热图库中(用处稍小) ,有两个函数可以处理这个:
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 似乎默认不提供此类回调。您能做的最好的事情就是 fork 项目并自己添加此功能。我会尝试指出一些需要更改的地方。
首先,你需要提供添加回调的功能:
// 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
方法:
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 */);
}
}
请注意,我尚未测试此解决方案,它可能需要一些修复和改进。希望对您有所帮助。
关于javascript - 渲染热图 HTML Canvas 时调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13251887/