Google Charts中Ajax传递JSON至drawChart()时$.each函数失效问题

嘿，我看你在尝试把Ajax成功回调里的JSON数据传给Google Charts的drawChart()函数时，碰到了$.each没法正常渲染数据的问题，咱们来一步步拆解和解决它！

先看看你代码里的核心问题 #

你目前的写法里，直接把$.each循环嵌入到了google.visualization.arrayToDataTable()的参数里，这是典型的语法错误。arrayToDataTable需要接收一个标准的二维数组（表头+数据行），而你现在的写法既混淆了对象和数组的语法，又试图把循环逻辑直接塞到函数参数里，自然没法生成正确的数据结构。

你的原代码片段：

google.charts.load('current', {'packages':['barchart']});
google.charts.setOnLoadCallback(drawChart);
var resp_data=JSON.parse(response.msg);
function drawChart() {
  var data = google.visualization.arrayToDataTable({
    $.each(resp_data, function(key,val){
      [val.userid, val.ncpu],
    });
  });
  var options = {'title':'...'

修正方案：先构建完整数组，再传入图表函数 #

正确的做法是先初始化一个包含表头的二维数组，然后用$.each遍历你的JSON数据，把每一行数据push到数组里，最后再把这个完整的数组传给arrayToDataTable。另外还要注意几个细节：

1. 修正图表包名

Google Charts的柱状图官方推荐使用'bar'包，而不是旧的'barchart'，这个小细节别忽略～

2. 正确构建数据数组

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);

// 假设这是你Ajax成功后解析得到的resp_data
// var resp_data = JSON.parse(response.msg);

function drawChart() {
  // 第一步：初始化数据数组，第一个元素是表头，根据你的字段调整
  var chartData = [
    ['用户ID', 'CPU使用量']
  ];

  // 第二步：用$.each遍历resp_data，把每一项数据添加到数组中
  $.each(resp_data, function(key, val) {
    chartData.push([val.userid, val.ncpu]);
  });

  // 第三步：把完整的二维数组传给arrayToDataTable
  var data = google.visualization.arrayToDataTable(chartData);

  // 配置图表选项
  var options = {
    title: '用户CPU使用情况统计',
    width: 600,
    height: 400
  };

  // 第四步：创建图表实例并绘制（记得页面上要有id为chart_div的元素）
  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

3. 处理异步数据加载的情况

如果你的resp_data是通过Ajax异步获取的，最好把图表的加载和绘制逻辑放在Ajax的成功回调里，避免数据还没加载完就执行drawChart：

// 异步场景下的正确写法
$.ajax({
  url: '你的接口地址',
  method: 'GET', // 根据你的接口调整请求方式
  success: function(response) {
    var resp_data = JSON.parse(response.msg);
    // 加载图表包后再调用drawChart，并把数据传进去
    google.charts.load('current', {'packages':['bar']}, function() {
      drawChart(resp_data);
    });
  },
  error: function(err) {
    console.error('数据加载失败：', err);
  }
});

// 把drawChart改成接收数据参数的形式
function drawChart(dataSource) {
  var chartData = [['用户ID', 'CPU使用量']];
  $.each(dataSource, function(key, val) {
    chartData.push([val.userid, val.ncpu]);
  });
  var data = google.visualization.arrayToDataTable(chartData);
  var options = {title: '用户CPU使用情况统计'};
  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

这样调整后，$.each就能正常遍历你的JSON数据，把每一行数据正确渲染到Google Charts里啦～

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