从 api 获取的数据未显示在 canvas.js 图中

Question

The given server code fetches the data but I don't know why it doesn't get assigned to yVal and the graph

Below is the code for the server which fetches the data from API and send it back to the client

const fetch = require("node-fetch");
const static = require('node-static');
const fileServer = new static.Server('.');
var express = require('express');
var app = express();

let url = "https://io.adafruit.com/api/v2/Drake_Sully/feeds/local-area1";

 app.listen(8081);
 app.use(express.static('./'))


app.get('/status', async (req,res)=>{
let response = await fetch(url);   
let data = await response.json();
res.send(data);
})

Below is the client code where get() requests the server to fetch data from api

class Uploader {

constructor() {}

async plotLastValue(){

var dps = []; // dataPoints
var chart = new CanvasJS.Chart("plotLastValue", {
  title :{
    text: "Load vs Time Graph"
  },
   axisX:{
    title: "time in hour",
    gridDashType: "dot",
    gridThickness: 2
   },
  axisY: {
    includeZero: false,
    title: "Load in kW",
    customBreaks: [{
      startValue: 1,
      endValue: 50,
      interval: 10,  
      maximum : 5
    }]
  },      
  data: [{
    type: "line",
    dataPoints: dps
  }]
});

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

async function get() {  // function to fetch data 
  let response = await fetch('status');
  let res = await response.json();
  return res["last_value"]; 
}


var updateChart = async function (count) {

  count = count || 1;

  for (var j = 0; j < count; j++) {
    let yVal = await get();
    dps.push({
      x: xVal,
      y: yVal
    });
    xVal++;
  }

  if (dps.length > dataLength) {
    dps.shift();
  }

  chart.render();
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);

 }
}

Answer 1

很可能从 await get() 返回的数据不仅仅是一个数字。它是返回值的 JSON 表示。要查看格式，请执行以下操作：

  let yVal = await get();
  console.log(">>>yVal",yVal);

看看真正回来的是什么。如果它是一个像 { y: 7 } 这样的对象，那么你应该像这样推送数据：

dps.push({
  x: xVal,
  y: yVal.y
});

从 api 获取的数据未显示在 canvas.js 图中

Data fetched from api not showing in canvas.js plot

javascript

node.js

fetch

canvasjs