如何将JSON数据映射为对象并生成DataTable适配Google Charts

要将API返回的time和temperature_2m数组映射为Google Charts的DataTable，可以通过遍历数组生成对应行数据的方式实现，以下是修改后的完整代码：

$.ajax({
    url: FullURL,
    dataType: "JSON",
    success: function (responseData) {
        // 初始化Google DataTable
        var chartData = new google.visualization.DataTable();
        // 添加列：第一列为时间（datetime类型适配时间序列图表），第二列为气温
        chartData.addColumn('datetime', '时间');
        chartData.addColumn('number', '2米气温');

        // 提取需要的数组数据
        const timeList = responseData.hourly.time;
        const tempList = responseData.hourly.temperature_2m;
        const rows = [];

        // 遍历数组生成行数据（确保两个数组长度一致）
        if (timeList.length === tempList.length) {
            for (let i = 0; i < timeList.length; i++) {
                // 将ISO时间字符串转为Date对象
                const time = new Date(timeList[i]);
                // 组装行数据：[时间, 气温]
                rows.push([time, tempList[i]]);
            }
        }

        // 将行数据添加到DataTable
        chartData.addRows(rows);

        // 后续可添加图表绘制逻辑
        // 示例：绘制折线图
        // const chart = new google.visualization.LineChart(document.getElementById('chart_container'));
        // const options = { title: '逐小时气温变化' };
        // chart.draw(chartData, options);
    }
});

关键说明 #

• 变量名冲突避免：将AJAX回调的参数名从data改为responseData，防止覆盖后续创建的chartData变量
• 列类型选择：使用datetime类型作为X轴列，比纯数字索引更适合时间序列数据的展示
• 数据映射逻辑：利用两个数组索引一一对应的特性，一次循环即可完成时间与气温的配对
• 时间格式转换：将API返回的ISO标准时间字符串转为Date对象，确保Google Charts能正确解析时间数据

如果需要沿用示例中的数字索引作为X轴，只需修改列定义和行数据：

// 修改列定义
chartData.addColumn('number', '索引');
chartData.addColumn('number', '2米气温');

// 修改行数据组装
rows.push([i, tempList[i]]);

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