Question

我正在尝试从API获取数据，更具体地说是windSpeed数据并将其应用到图表中。

我不是要您为我解决问题，而是要让我通过提示和诸如此类的：p

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>GrafIndex</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <canvas id="lineChart"></canvas>

  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.js"></script>

  <script>
    $(document).ready(function() {

      var apiPrt1 = "https://api.openweathermap.org/data/2.5/forecast?id=";
      var apiKey = "mykey";
      var city = "2673730"; //Stockholm-ID 
      var ctxL = document.getElementById("lineChart").getContext('2d');
      var myLineChart = new Chart(ctxL, {
        type: 'line',
        data: {
          labels: ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"],
          datasets: [{
              label: "Celsius",
              data: [65, 59, 80, 81, 56, 55, 40],
              backgroundColor: [
                'rgba(105, 0, 132, .2)',
              ],
              borderColor: [
                'rgba(200, 99, 132, .7)',
              ],
              borderWidth: 2
            },
            {
              label: "Vindstyrka m/s",

              data: [, 48, 40, 19, 86, 27, 10],
              backgroundColor: [
                'rgba(0, 137, 132, .2)',
              ],
              borderColor: [
                'rgba(0, 10, 130, .7)',
              ],
              borderWidth: 2
            }
          ]
        },
        options: {
          responsive: true
        }
      });

      $.ajax({
        url: apiPrt1 + city + apiKey,
        method: "GET",
        dataType: "JSON",
        data: "{}",
        success: function(data) {
          console.log(data.list)

          var windSpeed = data.list[0].wind.speed;
          console.log(windSpeed)
        }
      })
    })

json数据到图表中

0 个答案: