在google.visualization.data.group中包含字符串列 [英] Include string column in google.visualization.data.group

问题描述

我有一个基本上像这样的表:

I have a table that basically looks like this:

{"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轴上，类别将是人.

I want to display the data as a stacked area chart. The date would be on the x axis, the amount would be on the y axis, and the categories would be the people.

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

Here's my attempt to group the data:

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"，因为它是一个字符串，此外，它还会引发错误给定轴上的所有序列"必须具有相同的数据类型".

My problem is that I don't know what to put for 'aggregation' for column 1. I can't use 'sum' as it's a string, and besides, it throws the error "All series on a given axis must be of the same data type".

我尝试过:

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

但是这也会引发错误给定轴上的所有序列必须具有相同的数据类型".

but this also throws the error "All series on a given axis must be of the same data type".

如果我完全不考虑第1列，则该图有效，但是没有堆叠.所有人的数据都集中在一起.

If I leave out column 1 altogther, then the graph works, but there's no stacking. The data for all the people is just lumped together.

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

推荐答案

，以便为每个人提供单独的堆栈，
每个人都需要自己的数据表列或系列.

in order to have separate stacks for each person,
each person needs their own data table column, or series.

转换给定的数据表，
按日期和人员划分的第一组.
然后为每个人创建一个带有单独列的数据视图，
最后，按日期对所有列进行分组和求和.

to transform the given data table,
first group by both date and person.
then create a data view with a separate column for each person,
finally, group and sum all columns by date.

请参阅以下工作片段，
该表在那里显示所需的布局...

see following working snippet,
the table is there to show the needed layout...

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);
});

.dashboard {
  text-align: center;
}

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

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

这篇关于在google.visualization.data.group中包含字符串列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！