柱形图的Google Charts数据分组 [英] Google Charts Data Grouping for column chart

问题描述

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

I am trying to achieve this kind of chart (column chart)

但我可以似乎无法正确整理我的数据，请提供帮助。
这是我的示例json数据。

but I can't seem to group my data correctly, Please help. Here's my sample json data.

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

并且我正在使用

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

然后这就是我目前对其进行分组的方式

Then here's how I am grouping it currently

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

非常感谢！

推荐答案

首先，当使用 arrayToDataTable 时，

需要将第二个参数设置为-> true ，如果第一行是数据而不是列标题，则

...

first, when using arrayToDataTable,
need to set second argument to --> true,
if the first row is data and not column headings...

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

下一步，实际上您需要将数据分组两次，< br>
一次获取不重复值的计数，

并再次按每个性别求和

next, you will actually need to group the data twice,
once to get the count of the distinct values,
and again to sum by each gender

获得不重复值的计数值，两个列上的

组并计算第二个

to get count of distinct values,
group on both columns and count the second

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

然后使用每个性别的列创建数据视图，

然后分组再次对每一列求和

then create a data view with columns for each gender,
and then group again to sum each column

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于柱形图的Google Charts数据分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！