javascript - 如何将 JSON 对象正确格式化为 Google 可视化图表的数据表

Question

我正在尝试从 JSON 对象创建一个简单的图表。

折线图不会直接接受 JSON，因此我需要将其转换为数据，但看起来每种情况都是独一无二的，具体取决于 JSON 的设置方式。

如果JSON在我将其转换为字符串时看起来像这样，那么将其作为数据表传递的正确方法是什么:

    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));

无论我做什么，我都会收到 "Error: First row is not an array"
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>

注意:如果您想直接从 json 创建数据表...

  // create data table from json
  var data = new google.visualization.DataTable(jsonData);

那么 json 必须采用特定格式，如在此处找到的...
Format of the Constructor's JavaScript Literal data Parameter

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}