如何在JavaScript中将AJAX成功数据传递给Chart.js生成折线图？

你只需要把Chart.js的初始化逻辑放到AJAX请求的success回调函数里，因为AJAX是异步操作，必须等后端返回数据后再渲染图表。修改后的完整代码如下：

$(document).ready(function (){
    loadSkiResortData();
});

function loadSkiResortData(){
    $.ajax({
       method: 'GET',
       url: '/admin/sknowed/loadSkiResortData',
       success: function(response){
           console.log(typeof response.weatherData);
           const obj = JSON.parse(response.weatherData);
           console.log(obj.hourly.temperature_2m);
           console.log(obj.hourly.time);
           
           // 在这里初始化Chart.js，使用拿到的数据
           const ctx = document.getElementById('myChart');
           new Chart(ctx, {
               type: 'line',
               data: {
                   labels: obj.hourly.time, // 替换为时间数据
                   datasets: [{
                       label: '温度变化', // 可根据需求修改标签文本
                       data: obj.hourly.temperature_2m, // 替换为温度数据
                       borderWidth: 1
                   }]
               }
           });
       }
    });
}

关键说明 #

• 必须在AJAX的success回调内创建图表：AJAX请求是异步执行的，如果直接在$(document).ready里初始化图表，此时后端数据还未返回，会导致labels和data无法获取有效值。
• 数据格式适配：从你的控制台输出可以确认，obj.hourly.time和obj.hourly.temperature_2m已经是数组格式，完全符合Chart.js对数据的要求，无需额外格式转换。

内容的提问来源于stack exchange，提问作者spreaderman