javascript - 准备动态数据以通过 Google Chart API 显示

Question

我有大量数据通过 API 以 JSON 字符串形式传入，如下所示:

someData1: {0: {_id: {date: "2015-11-11"}, count: 1}, length: 1}
    0: {_id: {date: "2015-11-11"}, count: 1}
        _id: {date: "2015-11-11"}
        date: "2015-11-11"
        count: 1
    length: 1
someData2: {0: {_id: {date: "2015-11-12"}, count: 5}, 1: {_id: {date: "2015-11-11"}, count: 3}, length: 2}
    0: {_id: {date: "2015-11-12"}, count: 5}
        _id: {date: "2015-11-12"}
        count: 5
    1: {_id: {date: "2015-11-11"}, count: 3}
        _id: {date: "2015-11-11"}
        date: "2015-11-11"
        count: 3
    length: 2
someDataN: ...

但是，我需要将此数据显示在 Google 图表(确切地说是面积图)中。

据我了解，在 Google 图表中，第一列可以是日期/字符串，其余的必须是数字，因此我在格式化数据以使其可用于 Google 图表时遇到困难.

因此，在我的例子中，someData1 和 someData2 必须是列，基本上位于第一个 date 列之后。

所以列将是:[date, someData1, someData2]

1. 显然第一列带有日期。在这种情况下，如何使用我提供的对象中的日期？
2. 如何使用上面的数据作为示例，在自己的列中创建行？

在这种情况下设置列很容易，但设置行却让我感到困惑。如何确保 someData1 的 count 位于 someData1 列下方，依此类推？

我如何重组这个对象以使其满足我的需要？

谢谢。

Answer 1

我编写了一个 JavaScript 函数来完成这件事:

var GenerateChart = function(element, columns, data, title, type) {
var dataArr = [];

for (var i = 0; i < data.length; i++) {
  var cell = [];
  for (var n = 0; n < data[i].length; n++) {
    if (n === 0) {
      cell.push(data[i][n]);
    } else {
      cell.push(parseInt(data[i][n], 10));
    }

  }
  dataArr.push(cell);
}
var data = new google.visualization.DataTable();

for (var i = 0; i < columns.length; i++) {
  if (i === 0) {
    data.addColumn('string', columns[i].label);
  } else {
    data.addColumn('number', columns[i].label);
  }
}
data.addRows(dataArr);

var options;
var chart;
switch (type) {
  case 'line':
    options = {
      title: title,
      curveType: 'function',
      legend: {
        position: 'bottom'
      }
    }
    chart = new google.visualization.LineChart(element);
    break;
  case 'bar':
    options = {
      title: title,
      trendlines: {
        0: {}
      },
      legend: {
        position: 'bottom'
      },
    }
    chart = new google.visualization.ColumnChart(element);
    break;
  case 'pie':
    options = {
      title: title
    }
    chart = new google.visualization.PieChart(element);
    break;
  case 'bubble':
    var hAxis;
    var vAxis;
    for (var i = 0; i < 3; i++) {
      if (i === 1) {
        hAxis = columns[i].label;
      } else if (i === 2) {
        vAxis = columns[i].label;
      }
    }
    options = {
      title: title,
      hAxis: hAxis,
      vAxis: vAxis,
      buble: {
        textStyle: {
          fontSize: 11
        }
      }
    }
    chart = new google.visualization.BubbleChart(element);
    break;
  }
chart.draw(data, options);
  }

您只需要在 switch 语句中添加一个“area”大小写即可。但是，他们的大多数图表都使用非常相似的 json 结构进行处理。您可以像这样调用上面的函数:

var element = document.getElementById('graph');
var columns = result[key].columns;
var data = result[key].data;
GenerateChart(element, columns, data, "Graph Title", "area");

上面的“结果”变量将是您的 json 对象。我将很快给出一个用于上述函数的 json 对象的示例。条形图示例:

{
    "title":"Feeds Today",
    "type":"bar",
    "columns":[
            {"label":"Feed Type"},
            {"label":"Successes"},
            {"label":"Fails"}],
    "data":[
         ["ListHub","507",2],
         ["Reliance","270",0],
         ["Realogy","88",0],
         ["DDF","36",0],
         ["RETS","231",7],
         ["IDX","23",0],
         ["XML","26",3]]
}