如何獲取作爲變量的JSON對象的返回值

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; 
     } 
    }); 
}