jquery - 循环遍历来自ajax成功消息谷歌图表的json数据

Question

我正在尝试从 ajax 成功消息传递 json 数据，但 $.each 函数不允许在 内显示数据谷歌图表中的drawchart()。下面是我迄今为止尝试过的代码。

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':'test chart',
                       'legend':'right',
                       'width':100000,
                       'height':500,
                        'colors':['blue'],
                     };
                    
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options)
        }

<div id="chart_div" style="overflow:auto;overflow-x:scroll;overflow-y:scroll; "></div>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

请帮忙

Answer 1

您需要在调用arrayToDataTable之前构建数据数组

请参阅以下代码片段...

function drawChart() {
  var chartData = [['x', 'y']];  // <-- column headings

  // load data into array
  $.each(resp_data, function (key, val) {
    chartData.push([val.userid, val.ncpu]);
  });

  // convert array to google data table
  var data = google.visualization.arrayToDataTable(chartData);

  var options = {
    title: 'test chart',
    legend: 'right',
    width: 100000,
    height: 500,
    colors: ['blue']
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options)
}