柱形图的谷歌图表数据分组

Question

我正在尝试实现这种图表（柱形图）

但我似乎无法正确分组我的数据，请帮助。 这是我的示例 json 数据。

[
   [
     'male',
     '05-09'
   ],
   [
     'female',
     '05-09'
   ],
   [
     'male',
     '05-09'
   ],
]

我正在使用

创建我的数据表

       function createDataTable(rawData, $tableHeader) {
            try {
                return google.visualization.arrayToDataTable([
                    $tableHeader,
                    ...rawData
                ]);
            } catch (e) {
                return null;
            }
        }

这就是我目前的分组方式

      function groupData(columnIndex) {
            return google.visualization.data.group(data, [columnIndex], [{
                'column': columnIndex,
                'aggregation': google.visualization.data.count,
                'type': 'number'
            }])
        }

这是我绘制图表的方式

function drawBarChart() {
            let ageData = groupData(1);

            let options = {
                title: '',
                width: '810',
                height: '500',
                chartArea: {width: '50%'},
                colors: ['#FF7300', '#383A38', '#FFC799'],
                hAxis: {
                    title: 'Age Groups',
                    minValue: 0
                },
                vAxis: {
                    title: 'Hits'
                },
                orientation: 'horizontal',
                legend: { position: 'none' }
            };

            let chart = new google.visualization.BarChart(document.getElementById('age-graph'));
            chart.draw(ageData, options);
        }

非常感谢！

Answer 1

首先，当使用arrayToDataTable时，
需要将第二个参数设置为 --> true,
如果第一行是数据而不是列标题...

return google.visualization.arrayToDataTable([
  [
    'male',
    '05-09'
  ],
  [
    'female',
    '05-09'
  ],
  [
    'male',
    '05-09'
  ],
], true);  // first row is data = true

接下来，您实际上需要将数据分组两次，
一次获取不同值的计数，
并再次按性别求和

获取不同值的计数，
在两列上分组并计算第二个

return google.visualization.data.group(
  data,
  [1, 0],  // group on both columns, age group first
  [{
    column: 1,
    aggregation: google.visualization.data.count,
    type: 'number'
  }]
);

然后创建一个数据视图，其中包含每个性别的列，
然后再次分组以对每一列求和

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [
      'male',
      '05-09'
    ],
    [
      'female',
      '05-09'
    ],
    [
      'male',
      '05-09'
    ],
    [
      'male',
      '10-14'
    ],
    [
      'female',
      '10-14'
    ],
    [
      'male',
      '10-14'
    ],
  ], true);  // first row is data = true

  var groupData = google.visualization.data.group(
    data,
    [1, 0],  // group on both columns, age group first
    [{
      column: 1,
      aggregation: google.visualization.data.count,
      type: 'number'
    }]
  );

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

  // init column arrays
  // use age group as first column
  var viewColumns = [0];
  var aggColumns = [];

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

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

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

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

  // draw chart
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(aggData);
});

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