在google.visualization.data.group中包含字符串列

Question

我有一张表基本上是这样的：

{"cols":[
    {"label":"Date","type":"date"},
    {"label":"Person","type":"string"},
    {"label":"Amount","type":"number"}],
"rows":[
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":1.28}]},
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Mary"},{"v":6}]},
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":9.31}],
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Richard"},{"v":3.5}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Mary"},{"v":48.99}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Richard"},{"v":29.95}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"John"},{"v":18}]},
    etc...
]}

我想将数据显示为堆积区域图表。日期将在x轴上，数量将在y轴上，类别将是人。

这是我尝试对数据进行分组：

var data = new google.visualization.data.group(
    data,
    [0],
    [{'column': 1, 'aggregation': ?, 'type': 'string'}],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

我的问题是我不知道第1列的'聚合'应该放什么。我不能使用'sum'，因为它是一个字符串，此外，它会抛出错误“给定轴上的所有系列必须具有相同的数据类型“。

我试过了：

var data = new google.visualization.data.group(
    data,
    [0,1],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

但这也会引发错误“给定轴上的所有系列必须具有相同的数据类型”。

如果我遗漏第1列altogther，那么图表可以工作，但是没有堆叠。所有人的数据只是集中在一起。

var data = new google.visualization.data.group(
    data,
    [0],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

Answer 1

为每个人分别堆叠，
每个人都需要自己的数据表列或系列。

转换给定的数据表，
第一组由日期和人组成。
然后创建一个数据视图，每个人都有一个单独的列，
最后，按日期对所有列进行分组和汇总。

请参阅以下工作片段，
该表是为了显示所需的布局......

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  // create data table
  var data = new google.visualization.DataTable({
    "cols": [
      {"label":"Date","type":"date"},
      {"label":"Person","type":"string"},
      {"label":"Amount","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":1.28}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Other"},{"v":6}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":9.31}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Child"},{"v":3.5}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Mary"},{"v":48.99}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Richard"},{"v":29.95}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"John"},{"v":18}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Other"},{"v":6}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Child"},{"v":3.5}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Mary"},{"v":48.99}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Richard"},{"v":29.95}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"John"},{"v":18}]}
    ]
  });

  // group data table
  var groupData = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 2,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]
  );

  // create data view
  var view = new google.visualization.DataView(groupData);

  // sum column array
  var aggColumns = [];

  // use date as first view column
  var viewColumns = [0];

  // build view & agg columns for each person
  groupData.getDistinctValues(1).forEach(function (gender, index) {
    // add view column for each person
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === gender) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: gender,
      type: 'number'
    });

    // add sum column for each person
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: gender,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  // sum view by date
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // draw chart
  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(aggData, {
    isStacked: true
  });

  // draw table
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(aggData);
});

＆＃13;

.dashboard {
  text-align: center;
}

.dashboard div {
  margin-bottom: 12px;
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
  <div id="chart_div"></div>
  <div id="table_div"></div>
</div>

＆＃13;

＆＃13;

＆＃13;