Question

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

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

我想要做的是创建一个表格，其中填写了以下值的查询：

总家庭
过去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（）以获得所需结果的最佳方法是什么？

谢谢。

Answer 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>

在Google Charts中从同一数据源创建多个查询

1 个答案: