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]

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

在这种情况下设置列很容易，但设置行是让我感到困惑的原因。如何确保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");

上面的'result'变量将是你的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]]
}

准备动态数据以通过Google Chart API进行显示

1 个答案: