Question

我正在尝试使用从JSON对象中包含的函数获取的数据创建动态图表。

JSON对象通过Relayr Javascript API返回，如：

relayr.devices().getDeviceData({
            token: toke,
            deviceId: Candle1_deviceId,
            incomingData: function (data) {
                console.log(data.readings[0].meaning);
                console.log(data.readings[0].value);
                return data.readings[0].value;
            }
        });

我想要做的是将data.readings [0] .value放入图表中，如下所示：

window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Westminster Cathedral Building Movement Data"
            },
            data: [{
                type: "line",
                dataPoints: dps
        }]
        });

        var xVal = 0;
         var yVal;
        var updateInterval = 100;
        var dataLength = 500; // number of dataPoints visible at any point

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {
                yVal = yVal + relayr.devices().getDeviceData.incomingData;
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal++;
            };
            if (dps.length > dataLength) {
                dps.shift();
            }

            chart.render();

        };

        // generates first set of dataPoints
        updateChart(dataLength);

        // update chart after specified time. 
        setInterval(function () {
            updateChart()
        }, updateInterval);

    }

以上代码取自CanvasJS上的此示例。

Answer 1

无需重新生成图表或在单独的计时器中使用更新图表功能。只需在从relayr获取数据时更新图表，如下所示：

var yVal = 0, xVal = 0, dataLength = 500;
var dps = []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Westminster Cathedral Building Movement Data"
    },
    data: [{
        type: "line",
        dataPoints: dps
    }]
});
relayr.devices().getDeviceData({
    token: toke,
    deviceId: Candle1_deviceId,
    incomingData: function (data) {
        console.log(data.readings[0].meaning);
        console.log(data.readings[0].value);
        yVal = data.readings[0].value;
        dps.push({
            x: xVal,
            y: yVal
        });
        xVal++;

        if (dps.length > dataLength) {
            dps.shift();
        }
        chart.render()
        return data.readings[0].value;
    }
});

Answer 2

使用参数value创建一个额外的函数来创建图表：

function createChart(value) {
    // Do something with value

    var dps = []; // dataPoints

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Westminster Cathedral Building Movement Data"
        },
        data: [{
            type: "line",
            dataPoints: dps
    }]
    });

    var xVal = 0;
     var yVal;
    var updateInterval = 100;
    var dataLength = 500; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        // count is number of times loop runs to generate random dataPoints.

        for (var j = 0; j < count; j++) {
            yVal = yVal + relayr.devices().getDeviceData.incomingData;
            dps.push({
                x: xVal,
                y: yVal
            });
            xVal++;
        };
        if (dps.length > dataLength) {
            dps.shift();
        }

        chart.render();

    };

    // generates first set of dataPoints
    updateChart(dataLength);

    // update chart after specified time. 
    setInterval(function () {
        updateChart()
    }, updateInterval);

}

然后从回调中调用该函数：

window.onload = function () {
    relayr.devices().getDeviceData({
        token: toke,
        deviceId: Candle1_deviceId,
        incomingData: function (data) {
            console.log(data.readings[0].meaning);
            console.log(data.readings[0].value);
            createChart(data.readings[0].value);
            return data.readings[0].value;
        }
    });
}

如何获取JSON对象的返回值作为变量

2 个答案: