如何从JSON文件读取数据并将其传递给Google图表行（javascript）

Question

具有以下功能JSONChart（），它从var“ allText”读取json数据，并且应该能够解析该数据并将其用作Google图表的行数据。

注释掉添加的行部分可以正确显示带有空白图形的列数据。

需要一种从文件中解析给定样本数据并将其显示为google图表中的行数据的方法。

function JSONChart() {
google.charts.load('current', {'packages':['corechart']});
 var data = new google.visualization.DataTable();
   data.addColumn('string', 'Time stamp');
   data.addColumn('number', 'CPU');
   data.addColumn('number', 'MEMORY');
   data.addColumn({type:'string', role:'annotation'});
   data.addColumn({type:'string', role:'annotationText'});
   var data1  = JSON.parse(allText);
   var dataTableData = google.visualization.arrayToDataTable(data1);
   data.addRows (dataTableData);

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// Set chart options
   var options = {'title' : 'CPU & Memory',
      hAxis: {
         title: 'Time'
      },
      vAxis: {
         title: 'Percentage'
      },
      'width':1400,
      'height':600,
      curveType: 'function'
   };

chart.draw(data, options);
}

window.onload = function() {
  google.charts.setOnLoadCallback(JSONChart());
};

样本JSON传递到变量“ allText”中

{"2017/11/03 01:06:51":{"SCREEN":" ABC ","MEMORY":" 32.0142% ","CPU":" 9.1% "},"2017/11/03 02:22:20":{"SCREEN":" XYZ ","MEMORY":" 31.101% ","CPU":" 10.3% "}

Answer 1

一些东西...

1） arrayToDataTable需要一个简单的数组，而不是json对象
它还返回一个完整的数据表，该表已经创建-> data
而是将每个json对象转换为数组，
然后使用addRows将数据添加到现有数据表-> data

就像是...

for (var date in data1) {
  if (data1.hasOwnProperty(date)) {
    chartData.push([
      date,
      parseFloat(data1[date].MEMORY.replace('%', '').trim()),
      parseFloat(data1[date].CPU.replace('%', '').trim()),
      data1[date].SCREEN,
      ''  // not sure what value you want to use here
    ]);
  }
}
data.addRows(chartData);

2） google.charts.load此语句在调用回调之前等待窗口/文档加载
不需要-> window.onload = function() {...

google.charts.load实际上会返回一个承诺，
所以你可以做...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // draw chart code here...  

3）将回调函数传递给setOnLoadCallback ，
对函数的引用应传递-> JSONChart
不是函数的结果-> JSONChart() （删除括号）

4）建议与以下工作片段类似的设置...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Time stamp'); data.addColumn('number', 'CPU'); data.addColumn('number', 'MEMORY'); data.addColumn({type:'string', role:'annotation'}); data.addColumn({type:'string', role:'annotationText'}); var chartData = []; var data1 = {"2017/11/03 01:06:51":{"SCREEN":" ABC ","MEMORY":" 32.0142% ","CPU":" 9.1% "},"2017/11/03 02:22:20":{"SCREEN":" XYZ ","MEMORY":" 31.101% ","CPU":" 10.3% "}}; for (var date in data1) { if (data1.hasOwnProperty(date)) { chartData.push([ date, parseFloat(data1[date].MEMORY.replace('%', '').trim()), parseFloat(data1[date].CPU.replace('%', '').trim()), data1[date].SCREEN, '' // not sure what value you want to use here ]); } } data.addRows(chartData); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); var options = {'title' : 'CPU & Memory', hAxis: { title: 'Time' }, vAxis: { title: 'Percentage' }, height: 600, curveType: 'function' }; chart.draw(data, options); }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>