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

【问题标题】：Display dynamic data in Rickshaw chart retreived from API在从 API 检索的人力车图表中显示动态数据
【发布时间】：2018-04-04 04:07:37
【问题描述】：

我尝试使用人力车显示通过 ajax 请求从 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();

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

【问题讨论】：

标签： javascript json api charts rickshaw

【解决方案1】：

Rickshaw 不会自动监视数据集中的变化，因此您需要在 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()

【讨论】：