来自 REST 服务的数据的 cal-HeatMap 问题

cal-HeatMap issue with data from REST service

我正在研究 cal-HeatMap,并得到了一些静态 json-数据 运行 的例子。现在我想使用 REST 服务动态加载 json-data。不幸的是,当我使用来自 REST 服务的数据时,这并没有按预期工作。

这是 cal-HeatMap 的代码(RESTful 版本不起作用):

var heatData = dojo.xhr.get({
    url:"http://localhost:8080/webapp/xfull2.nsf/services.xsp/heatdata",
    handleAs:"json"
});

var cal = new CalHeatMap();
cal.init(
{
    itemSelector:"#cal-heatmap",
    range: 10,
    start: new Date(2016, 3,4,1),
    data: heatData
}
);

REST 调用似乎启动并且 returns JSON 结果:

{
    "1459742400":1,
    "1459749600":1,
    "1459753200":1,
    "1459756800":1,
    "1459767600":1
}

在浏览器控制台上我看到这个错误: 类型错误:a 未定义 cal-hea....min.js(第 8 行,第 30282 列)(在 cal-heamap 中。min.js)

我将 REST 调用中的 JSON 保存为 .json 文件,并使用该文件测试了 cal-HeatMap。在这种情况下,它可以正常工作。这是我的代码的静态版本:

var cal = new CalHeatMap();
cal.init(
{
    itemSelector:"#cal-heatmap",
    range: 10,
    start: new Date(2016, 3,4,1),
    data: "js/cal-heatmap/sample-json/testdata.json"
}
);

testdata.json 文件如下所示(同上):

{
    "1459742400":1,
    "1459749600":1,
    "1459753200":1,
    "1459756800":1,
    "1459767600":1
}

结果如下所示(没问题):

我在这里错过了什么?任何帮助或提示表示赞赏。

好吧,我终于找到了我的代码的问题 - 问题的答案很明显。当我使用带有 xhr.get 的异步 REST 调用时,我必须在回调中创建 HeatMap 对象。否则在创建 HeatMap 对象时数据尚不可用。

正确的代码如下所示:

var heatData = dojo.xhr.get({
    url:"http://localhost:8080/webapp/xfull2.nsf/services.xsp/heatdata",
    handleAs:"json",
    load: function(data) {
        var cal = new CalHeatMap();
        cal.init({
                itemSelector:"#cal-heatmap",
                range: 10,
                start: new Date(2016, 3,4,1),
                data: data
                });
    }
})