Question

我似乎无法获得以下分组数据的图表，其中第0列为年，而Count是每年第1列中每个项目的数量：

var aggrData = google.visualization.data.group(
            data, [{
                'column': 0,
                role: 'domain'
            },{
                'column': 1,
                role: 'annotation'
            }], 

            [{
                'column': 1,
                'aggregation': google.visualization.data.count,
                'type': 'number',
                'role': 'data',
                'label': 'Count'
            }]);

我希望看到here的图表，但上面有分组数据。我的代码片段不起作用如下：

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
dashboard.bind([independantFilter1, dependantFilter1], [barChart1]);
dashboard.draw(aggrData);

Answer 1

模仿链接中引用的图表，
需要先建立一个数据视图，每个学生都有一列然后汇总每个学生专栏

数据表有一个方法 - ＆gt; data.getDistinctValues(1)
这将返回一系列独特的学生

可用于为视图和组构建列

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart', 'table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Student'],
    ['2000', 'Student1'],
    ['2001', 'Student1'],
    ['2001', 'Student2'],
    ['2001', 'Student2'],
    ['2002', 'Student1'],
    ['2002', 'Student1'],
    ['2002', 'Student1'],
    ['2002', 'Student1'],
    ['2002', 'Student1'],
    ['2002', 'Student2'],
    ['2002', 'Student3'],
    ['2002', 'Student3'],
    ['2002', 'Student3'],
    ['2003', 'Student4']
  ]);

  var dataView = new google.visualization.DataView(data);

  var students = data.getDistinctValues(1);
  var viewColumns = [0];
  students.forEach(function (student, index) {
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === student) {
          return 1;
        }
        return null;
      },
      label: student,
      type: 'number'
    });
  });
  dataView.setColumns(viewColumns);

  var aggColumns = [];
  students.forEach(function (student, index) {
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: dataView.getColumnLabel(index + 1),
      type: dataView.getColumnType(index + 1)
    });
  });

  var dataGroup = google.visualization.data.group(dataView, [0], aggColumns);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(dataGroup, {
    legend: 'bottom'
  });
}

＆＃13;

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

＆＃13;

用于分组在两列上的数据的Google应用图表

1 个答案: