1

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

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工作。如果我尝试多次调用该函数，那么在图形代码运行时数据还没有准备好。

4

1 回答 1

0

好的，所以我让它工作了，我把它的一个子集放在这里，这样其他人就可以看到我是如何做到的。

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 值对数据进行排序......

于 2013-12-06T15:23:20.797 回答