无法在JavaScript中显示图形

Question

我正在调用一个基于REST的API，并在JavaScript中正确获取数据。在下面的代码中，变量 dataPoints 的设置是正确的。从web service获取数据并更新结构的代码工作正常。之后，我需要将数据显示在图表中。

然而，当图表被绘制时，数据并没有出现。

window.onload = function() {

  var dataPoints = [];

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Total cases"
    },
    axisY: {
      title: "Units",
      titleFontSize: 24
    },
    data: [{
      type: "column",
      yValueFormatString: "#,### Units",
      dataPoints: dataPoints
    }]
  });


  fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
        "x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
      }
    })

    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      for (var i = 0; i < data.length; i++) {
        dataPoints.push({
          x: data[i].date,
          y: data[i].totalconfirmed
        })


      }
      chart.render();
    });
}

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

Answer 1

Canvas Js接受日期或数字作为x和y坐标。而我们从api得到的输出是字符串。date: "30 January ",totalconfirmed: "1" 因此，我们需要将它们转换为日期和数字来绘制图形。

   dataPoints.push({
        x: new Date(data[i].date + new Date().getFullYear()), // converting into date
          y: parseInt(data[i].totalconfirmed) // converting into number
        })

window.onload = function() {

  var dataPoints = [];

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Total cases"
    },
    axisY: {
      title: "Units",
      titleFontSize: 24
    },
    data: [{
      type: "column",
      yValueFormatString: "#,### Units",
      dataPoints: dataPoints
    }]
  });


  fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
        "x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
      }
    })

    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      for (var i = 0; i < data.length; i++) {
        dataPoints.push({
        x: new Date(data[i].date + new Date().getFullYear()),
          y: parseInt(data[i].totalconfirmed)
        })


      }
      chart.render();
    });
}

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>