对xively.feed.history()的多次调用

Question

我试图建立一个绘图的网页，它从多个西弗利提要中获取数据，并用人力车 (基于D3)绘制它们。我遇到的问题是无法访问从调用函数之外的服务器返回的数据。我对js并不熟悉，所以我不知道如何处理这些调用的异步特性。我想调用xively.feed.history()来获取历史数据的各个部分，并将它们连接到一个图上。不管怎么说，这和我试过的差不多。它基于西弗利教程

xively.setKey('xxxx my key ')
// Replace with your own values  
var feedID        = 12345678,          // Feed ID  
    selector      = "#myelement";   // Your element on the page  

var series = [];
xively.feed.history(feedID, {  duration: "10days", interval: 1800 ,limit: 1000}, function (mydata) {
    mydata.datastreams.forEach( function(stream){
        if ((stream.id == "tempinside") || (stream.id == "tempoutside")) {
            var points = [];
           stream.datapoints.forEach( function(datapoint){
                points.push({x: new Date(datapoint.at).getTime()/1000.0, y: parseFloat(datapoint.value)});
            // Add Datapoints Array to Graph Series Array
            });
            series.push({
                name: stream.id,
                data: points
            });
        };
    });


    var graph2 = new Rickshaw.Graph( {
        element: document.querySelector("#chart2"), 
        width: 600, 
        height: 400, 
        renderer: 'line',
        series: [{
            data: series[0].data,
            name: series[0].name,
            color: 'red'
            },{
            data: series[1].data,
            name: series[1].name,
            color: 'blue'
            }]
     })
})

正如我说的，我对javascript很陌生，所以我可能遗漏了一些东西。如果将图形放置在xively.feed.history函数的回调部分中，则该图形工作良好。如果我尝试对函数进行多次调用，那么到图形代码运行时，数据还没有准备好。

Answer 1

好的，我让它起作用了，我把它的一个子集放在这里，这样其他人就可以看到我是怎么做的。

var starttime = moment().subtract("day", 3);
series['tempoutside']=[
 {x:starttime.subtract("second",2).unix(),y:15},
 {x:starttime.subtract("second",1).unix(),y:15}
 ];


graph = new Rickshaw.Graph({
    element: document.querySelector("#chart"),
    height: 400,
    width: 600,
    renderer: 'line',
    interpolation: 'step-before',
    series: new Rickshaw.Series([
        {
            name: 'temperature',
            data: series['tempoutside'],
            color: 'blue',
        }
    ], series)
});

xively.datastream.history( "123456789", "tempoutside", query, loadData);

function loadData(data) {
    //console.log('Getting ' + data.id + 'data from Xively');
    if (data.datapoints != undefined){
        //console.log('received ' + data.datapoints.length +' datapoints');
        lastdata=data;
        var filtedData = data.datapoints.filter(function(x) { return (x.value >0.005); });
        for (var i=0; i < filtedData.length; i++ ) {
            var date = moment(filtedData[i].at);
            var value = parseFloat(filtedData[i].value+0.000001);
        series[data.id].push({x: date.unix(), y: value});
        }
        graph.render();
    }
}

在最后的代码中，我还用series['tempoutside']从.pop()数组中删除了虚拟初始化值。我需要它们在数组中，因为图是在数据从西弗利返回之前先生成的。当数据返回时，xively.datastream.history()函数调用loaddata()回调，该回调将数据推入series数组。另外，我不知道您不需要将数据推送到图形序列数组中，因为该数组是在构建图形时作为引用传递的。更新数组，然后调用graph.render()，然后重新绘制所有内容。赢!这意味着可以对Xively进行多个调用，以获得比一个API调用(限制在1000个数据点)更多的数据。在绘图前要记住按x值对数据进行排序.