如何将 Json 数据加载到 Chartjs 图表中

Question

我想将以下 Json (http://api.openweathermap.org/data/2.5/forecast?lat=53.4808&lon=2.2426&appid=4ce23fd03d1558816c3ef6efb6a5ec30&units=metric) 上 (.list) 下的 ID 列出的数据变量“temp”作为 x 轴变量显示在此图表上：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});



<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>

图表目前在没有 Json 数据的情况下单独运行。我将如何导入这个指定的数据，以便它可以替换“数据：[0、10、5、2、20、30、45]”变量？

Answer 1

假设您的主要障碍是从 API 中检索数据，您只需要三个步骤：

1. 向您发布的 URL 发出网络请求，通常使用 fetch 完成。这会要求 openweathermap 网站向您发送一些数据。

const response = await fetch('http://api.openweathermap.org/data/2.5/forecast?lat=53.4808&lon=2.2426&appid=4ce23fd03d1558816c3ef6efb6a5ec30&units=metric');

这将为您提供一个响应类型的对象，这不是您想要的，因为它包含您没有用的 HTTP 标头等。您希望将 JSON 数据作为响应的一部分发送。

1. 提取 JSON

const data = await response.json()

1. 解析 JSON 变量以获取临时值

const chartData = data.list.map((object) => object.main.temp)

说明：API 返回的 JSON 对象包含一个“list”数组，该数组本身包含一个“main”属性，最终包含您要查找的 temp。 “json.list”访问列表，地图正在获取每个对象并创建一个新数组（我相信），其中包含“main”对象内的“temp”值。

如果不清楚的话，Lmk！