如何将JSON对象正确地格式化为dataTable for Google可视化图表

Question

    var data = JSON.stringify(myJSONObject);
    var dataTableData = new google.visualization.DataTable(data); //throws error
    //var dataTableData = new google.visualization.DataTable(myJSONObject); //throws error
    //var dataTableData = myJSONObject //throws error
    var chart = new google.charts.Line(document.getElementById('line_top_x'));
    chart.draw(dataTableData, google.charts.Line.convertOptions(options));

JSON MyJSONObject：

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {month: "February", column1: "1", column2: "2", column3: "3", column4: "4", …}
1: {month: "March", column1: "1", column2: "2", column3: "3", column4: "4", …}
2: {month: "April", column1: "1", column2: "2", column3: "3", column4: "4", …}
3: {month: "May", column1: "1", column2: "2", column3: "3", column4: "4", …}
4: {month: "June", column1: "1", column2: "2", column3: "3", column4: "4", …}
5: {month: "July", column1: "1", column2: "2", column3: "3", column4: "4", …}
6: {month: "August", column1: "1", column2: "2", column3: "3", column4: "4", …}
7: {month: "September", column1: "1", column2: "2", column3: "3", column4: "4", …}
8: {month: "October", column1: "1", column2: "2", column3: "3", column4: "4", …}
9: {month: "November", column1: "1", column2: "2", column3: "3", column4: "4", …}
10: {month: "December", column1: "1", column2: "2", column3: "3", column4: "4", …}
11: {month: "Total", column1: "1", column2: "2", column3: "3", column4: "4", …}
12: {month: undefined, column1: undefined, column2: undefined, column3: undefined, column4: undefined, …}
length: 13
__proto__: Array(0)

myJSONObject（console.log（data））的字符串：

[{"month":"February","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"March","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"April","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"May","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"June","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"July","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"August","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"September","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"October","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"November","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"December","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"Total","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{}]

Answer 1

需要将每个对象转换为数组。

首先，创建一个空白数据表……

  // create blank data table
  var data = new google.visualization.DataTable();

然后添加列和行...

  // parse json
  jsonData.forEach(function (jsonRow, indexRow) {
    // add columns
    if (indexRow === 0) {
      for (var column in jsonRow) {
        if (column === 'month') {
          data.addColumn('string', column);
        } else {
          data.addColumn('number', column);
        }
      }
    }

    // add row
    var dataRow = [];
    for (var column in jsonRow) {
      if (column === 'month') {
        dataRow.push(jsonRow[column]);
      } else {
        // convert string to number
        dataRow.push(parseFloat(jsonRow[column]));
      }
    }
    if (dataRow.length > 0) {
      data.addRow(dataRow);
    }
  });

google.charts.load('current', {
  packages: ['line']
}).then(function () {
  var jsonData = [{"month":"February","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"March","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"April","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"May","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"June","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"July","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"August","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"September","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"October","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"November","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"December","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"Total","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{}];

  // create blank data table
  var data = new google.visualization.DataTable();

  // parse json
  jsonData.forEach(function (jsonRow, indexRow) {
    // add columns
    if (indexRow === 0) {
      for (var column in jsonRow) {
        if (column === 'month') {
          data.addColumn('string', column);
        } else {
          data.addColumn('number', column);
        }
      }
    }

    // add row
    var dataRow = [];
    for (var column in jsonRow) {
      if (column === 'month') {
        dataRow.push(jsonRow[column]);
      } else {
        // convert string to number
        dataRow.push(parseFloat(jsonRow[column]));
      }
    }
    if (dataRow.length > 0) {
      data.addRow(dataRow);
    }
  });

  var options = {
    chart: {
      title: 'test'
    }
  };
  var chart = new google.charts.Line(document.getElementById('line_top_x'));
  chart.draw(data, google.charts.Line.convertOptions(options));
});

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