0

我有一个通常看起来像这样的电子表格：

Date        Families
1/2/2016    3
1/3/2016    4
1/4/2016    5

我想做的是从中创建一个表，其中填充了对以下值的查询：

  • 家庭总数
  • 过去 30 天的家庭
  • 之前 30 天的家庭
  • 年初至今的家庭。

我首选的方法是为每个查询设置一个变量，然后使用这些变量手动创建一个表。

例如：

var sum1 = value from Query1
var sum2 = value from Query2
var sum3 = value from Query3
var sum4 = value from Query4

var data = new.google.visualization.DataTable({
    data.AddColumn('string', 'This Month');
    data.AddColumn('string', 'Last Month');
    data.AddColumn('string', 'Year to Date');
    data.AddColumn('string', 'All Time');

    data.AddRow([sum1, sum2, sum3, sum4])
})

var chart = new.google.visualization.Table();
chart.draw(data);

给出下表：

'This Month'  'Last Month'   'Year to Date'   'All Time'
 sum1          sum2           sum3             sum4

然而，最大的问题是你似乎只能为每个查询设置一个回调，所以得到这样的东西似乎需要为每个查询嵌套回调，每个查询都变成一个数据表，然后最后加入最后.

例如：

var q1 = google.visualization.Query(URL);
q1.setQuery(QueryStatement1);
q1.send(function (r1) {
    var data1 = r1.getDataTable();
    var q2 = google.visualization.Query(URL);
    q2.setQuery(QueryStatement2);
    q2.send(function(r2) {
        var data2 = r2.getDataTable();

        var joinedData = google.visualization.data.join(
          data1, 
          data2,
          'full',
          [0,0],
          [[0,0], [0,0]]
    );
  }
}

后一种方式似乎要复杂得多，并且可能会给格式化带来困难。一遍又一遍地重复调用同一个 URL 似乎也是多余的。

这将继续的页面将对 3 个不同的列执行类似的操作，因此将从同一个电子表格中获取 12 次查询。

所以，StackOverflow，我想把这个问题分成两部分。

第 1 部分： 是否可以避免后一种方法创建此表？

第 2 部分： 如果没有，构造 google.visualization.data.join() 以达到预期结果的最佳方法是什么？

谢谢你。

4

1 回答 1

1

为每个类别使用带有计算列的 DataView... 

var view = new google.visualization.DataView(response.getDataTable());
view.setColumns([0,
  {
    calc: function (dt, r) {
      if ((dt.getValue(r, 0).getMonth() === (new Date()).getMonth()) &&
          (dt.getValue(r, 0).getFullYear() === (new Date()).getFullYear())) {
        return dt.getValue(r, 1);
      }
      return null;
    },
    type: 'number',
    label: 'This Month'
  },
  ...

然后使用该group()方法聚合结果... 

var aggData = google.visualization.data.group(
  view,
  [{
    column: 0,
    label: 'Total',
    modifier: function () {
      return 'Total';
    },
    type: 'string'
  }],
  [
    {
      column: 1,
      label: view.getColumnLabel(1),
      aggregation: google.visualization.data.sum,
      type: 'number'
    },
    ...

请参阅以下工作片段... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1-UbQQMofRecLpO9zUYoscQxo4Wi50N8YnmQmbW1lNJ0/edit?usp=sharing');
  query.setQuery('select A, B');
  query.send(function (response) {
    var view = new google.visualization.DataView(response.getDataTable());
    view.setColumns([0,
      {
        calc: function (dt, r) {
          if ((dt.getValue(r, 0).getMonth() === (new Date()).getMonth()) &&
              (dt.getValue(r, 0).getFullYear() === (new Date()).getFullYear())) {
            return dt.getValue(r, 1);
          }
          return null;
        },
        type: 'number',
        label: 'This Month'
      },
      {
        calc: function (dt, r) {
          var curDate = new Date();
          var rowDate = dt.getValue(r, 0);
          var thisMonth = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
          var lastMonth = new Date(curDate.getFullYear(), curDate.getMonth(), 0);
          lastMonth = new Date(lastMonth.getFullYear(), lastMonth.getMonth(), 1);
          if ((rowDate.getTime() >= lastMonth.getTime()) &&
              (rowDate.getTime() < thisMonth.getTime())) {
            return dt.getValue(r, 1);
          }
          return null;
        },
        type: 'number',
        label: 'Last Month'
      },
      {
        calc: function (dt, r) {
          if (dt.getValue(r, 0).getYear() === (new Date()).getYear()) {
            return dt.getValue(r, 1);
          }
          return null;
        },
        type: 'number',
        label: 'Year to Date'
      },
      {
        calc: function (dt, r) {
          return dt.getValue(r, 1);
        },
        type: 'number',
        label: 'All Time'
      }
    ]);

    var aggData = google.visualization.data.group(
      view,
      [{
        column: 0,
        label: 'Total',
        modifier: function () {
          return 'Total';
        },
        type: 'string'
      }],
      [
        {
          column: 1,
          label: view.getColumnLabel(1),
          aggregation: google.visualization.data.sum,
          type: 'number'
        },
        {
          column: 2,
          label: view.getColumnLabel(2),
          aggregation: google.visualization.data.sum,
          type: 'number'
        },
        {
          column: 3,
          label: view.getColumnLabel(3),
          aggregation: google.visualization.data.sum,
          type: 'number'
        },
        {
          column: 4,
          label: view.getColumnLabel(4),
          aggregation: google.visualization.data.sum,
          type: 'number'
        }
      ]
    );

    var chartDiv = document.getElementById('chart_div');
    var chart = new google.visualization.Table(chartDiv);
    chart.draw(aggData);
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

于 2016-11-27T00:10:51.033 回答