Question

我正在尝试构建一个绘图网页，该网页从多个xively Feed中获取数据，并使用Rickshaw（基于D3）绘制它们。我遇到的问题是我无法访问从调用函数外部的服务器返回的数据。我是js的新手，所以我不确定如何处理调用的异步性质。我想调用xively.feed.history()来获取历史数据的各个部分，然后将它们连接到一个图表上。无论如何，这里有类似于我尝试过的东西。它基于xively tutorial

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返回数据之前首先构建图形。当数据确实返回时，xively.datastream.history()函数调用loaddata()回调，将数据推送到series数组。另外，我不明白你不需要将数据推送到图形系列数组中，因为在构建图形时数组作为参考传递。更新数组然后调用graph.render()并重新创建所有数组。赢得！这意味着可以对Xively进行多次调用以获得比一次API调用可用的数据更多的数据（限制为1000个数据点）。记得在绘制之前按x值对数据进行排序....

多次调用xively.feed.history（）

1 个答案: