如何从 JSON 文件中读取数据并将其传递给谷歌图表行（javascript）答案

【问题标题】：how to read data from an JSON file and pass it to google chart rows (javascript)如何从 JSON 文件中读取数据并将其传递给谷歌图表行（javascript）
【发布时间】：2017-11-21 15:28:01
【问题描述】：

具有以下功能 JSONChart() 它从 var "allText" 读取 json 数据，并且应该能够解析数据并将其用作谷歌图表的行数据。

注释掉添加行部分，用空图正确显示列数据。

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

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% "}

【问题讨论】：

标签： javascript html json google-visualization

【解决方案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) 推荐与以下工作 sn-p 类似的设置...

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>

【讨论】：