Question

我尝试使用人力车通过ajex请求显示从Web API检索到的数据。正确检索数据并将其添加到数组中。但是图表不会呈现任何数据。当我控制系列数据阵列时，它会显示所有数据。这是我的代码

var seriesData = [
    []
];


$.ajax({
    url: "http://things.ubidots.com/api/v1.6/devices/Smart-
    FAD/Temperature/values?page_size=50&format=json&&token=A1E-
    BR1Y0dMLAULMNmMLbk0Y8qADGOdS5h",
    type: "GET"
}).done(function(data) {
    var result = data.results;
    for (var i = 0; i < result.length; i++) {
        var value = result[i].value;
        var time = result[i].timestamp;
        seriesData[0][i].push({
            "x": time,
            "y": value
        });
    };
}).fail(function() {
    console.log("REQUEST FAILED");
});


var graph = new Rickshaw.Graph({
    element: document.querySelector("#chart"),
    width: 540,
    height: 240,
    series: [{
        data: seriesData[0],
        color: 'steelblue',
        name: 'Server1'
    }]
});

var x_axis = new Rickshaw.Graph.Axis.Time({
    graph: graph
});

var y_axis = new Rickshaw.Graph.Axis.Y({
    graph: graph,
    orientation: 'left',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
});

graph.render();

有人可以帮我解决这个问题吗？

Answer 1

人力车不会自动监视数据集的变化，因此您需要在ajax.done函数的末尾调用graph.update（）。

.done(function(data) {
    var result = data.results;
    for (var i = 0; i < result.length; i++) {
        var value = result[i].value;
        var time = result[i].timestamp;
        seriesData[0].push({
            "x": time,
            "y": value
        });
    };

    graph.update()

显示从API中检索的人力车图表中的动态数据

1 个答案: