准備動態數據以通過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的計數在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]]
}