准备通过 Google 图表 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 图表中，第一列可以是 date/string，其余的必须是数字，所以我在格式化数据时遇到了问题使其可用于 Google 图表的方法。

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

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

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

在这种情况下设置列很容易，但设置行让我感到困惑。我如何确保 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' case。但是，他们的大多数图表都使用非常相似的 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 图表 API 显示的动态数据

Preparing dynamic data for displaying via Google Chart API

javascript

charts

object

google-visualization