Javascript 如何将Json数据加载到Charts.js图表

我想在下面的Json（）中以x轴变量的形式显示数据变量“temp”，该变量按ID在（.list）下列出：

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>

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var图表=新图表（ctx{
//我们要创建的图表类型
键入：“行”，
//我们的数据集的数据
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“rgb（255，99，132）”，
边框颜色：“rgb（255，99，132）”，
数据：[0,10,5,2,20,30,45]
}]
},
//配置选项在这里
选项：{}
});

---

图表目前单独运行，没有Json数据。如何导入此指定数据，以便它可以替换“data:[0、10、5、2、20、30、45]”变量？

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

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

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

提取JSON

解析临时值的JSON变量

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

---

如果不清楚的话，我会的

首先学习如何使用fetchAPI和JSON.parse。也许是我，但我不知道这个问题和代码与Java编程有什么关系。你确定你的问题中添加了正确的语言标记吗？嗨，谢谢你，我添加了这段代码，但是我不知道如何将这些数据绘制到图表中：注意：你在等待和获取之间有一个下划线，获取在大多数网站上都不起作用（如果您试图使用HTTP获取网站，则包括JS FIDLE，因为JSFIDLE是通过HTTPS加载的），并且您需要将图表中的数据属性分配给chartData。如果不起作用，请尝试在对象创建后更新数据

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

const data = await response.json()

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