带组的 Google 柱形图

Question

我的数据格式-

['Group','Count','Month','Year'],
['A',10,'February',2015],
['B',8,'February',2015],
['C',15,'February',2016]

我将使用过滤器来显示按组列分隔的每个月的数据。

X 轴 将有组。 Y 轴 将在所有年份（2014 年、2015 年、2016 年...）都有计数。

类似

我为此使用 Google 仪表板。我的代码-

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard4_div'));
var slider = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter4_div',
          'options': {
            'filterColumnLabel': 'Month',
            'ui': {
            'allowTyping': true,
            'allowMultiple': false,
            'allowNone': false,
            'sortValues': false,
            'label': 'Choose month',
        }
          }
        });

var ColumnChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart4_div',

// How to take in two column values 

});
dashboard.bind(slider, ColumnChart);

        // Draw the dashboard.
        dashboard.draw(data);

我想知道如何使用 Google Charts 在我的图表中添加两列值

Answer 1

由于数据需要在绘制图表之前进行操作，
分别绘制类别过滤器和图表

使用slider的原始数据表
然后当'ready' 或'statechange' 事件在slider 上发生时，
使用selectedValues 过滤行

过滤后，使用data.group 将年份从行转换为列

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

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Group', 'Count', 'Month', 'Year'],
      ['A', 10, 'February', 2015],
      ['B', 8, 'February', 2015],
      ['C', 15, 'February', 2016],
      ['A', 7, 'February', 2016],
      ['B', 5, 'February', 2016],
      ['C', 12, 'February', 2015],
      ['A', 20, 'March', 2015],
      ['B', 16, 'March', 2015],
      ['C', 30, 'March', 2016],
      ['A', 14, 'March', 2016],
      ['B', 10, 'March', 2016],
      ['C', 24, 'March', 2015]
    ]);

    var slider = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'filter_div',
      'dataTable': data,
      'options': {
        'filterColumnLabel': 'Month',
        'ui': {
          'allowTyping': true,
          'allowMultiple': false,
          'allowNone': false,
          'sortValues': false,
          'label': 'Choose month',
        }
      }
    });

    google.visualization.events.addListener(slider, 'ready', drawChart);
    google.visualization.events.addListener(slider, 'statechange', drawChart);

    function drawChart() {
      var sliderData = new google.visualization.DataView(slider.getDataTable());
      sliderData.setRows(sliderData.getFilteredRows([{
        column: 2,
        value: slider.getState().selectedValues[0]
      }]));

      // group by 'Group' / 'Year'
      var dataGroup = google.visualization.data.group(
        sliderData,
        [0, 3],
        [{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'Count'}]
      );
      dataGroup.sort([{column: 0},{column: 1}]);

      // build final data table
      var yearData = new google.visualization.DataTable({
        cols: [
          {label: 'Group', type: 'string'}
        ]
      });

      // add column for each year
      var years = dataGroup.getDistinctValues(1);
      for (var i = 0; i < years.length; i++) {
        yearData.addColumn(
          {label: years[i], type: 'number'}
        );
      }

      // add row for each month
      var rowMonth = null;
      var rowIndex = null;
      for (var i = 0; i < dataGroup.getNumberOfRows(); i++) {
        if (rowMonth !== dataGroup.getValue(i, 0)) {
          rowMonth = dataGroup.getValue(i, 0);
          rowIndex = yearData.addRow();
          yearData.setValue(rowIndex, 0, rowMonth);
        }
        for (var x = 1; x < yearData.getNumberOfColumns(); x++) {
          if (yearData.getColumnLabel(x) === dataGroup.getValue(i, 1).toString()) {
            yearData.setValue(rowIndex, x, dataGroup.getValue(i, 2));
          }
        }
      }

      var view = new google.visualization.DataView(yearData);
      view.setColumns([0, 1, {
          calc: 'stringify',
          sourceColumn: 1,
          type: 'string',
          role: 'annotation'
        }, 2, {
          calc: 'stringify',
          sourceColumn: 2,
          type: 'string',
          role: 'annotation'
      }]);

      var ColumnChart = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId': 'chart_div',
        'dataTable': view
      });
      ColumnChart.draw();
    }

    slider.draw();
  },
  packages: ['controls', 'corechart']
});

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

---

编辑

针对多个过滤器进行了更新...

为其他过滤器添加重复代码。
当第一个过滤器准备好时绘制第二个过滤器。
当第二个过滤器准备好时绘制图表。
将所有过滤器值添加到 getFilteredRows 语句。

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

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Group', 'Count', 'Month', 'Year'],
    ['A', 10, 'February', 2015],
    ['B', 8, 'February', 2015],
    ['C', 15, 'February', 2016],
    ['A', 7, 'February', 2016],
    ['B', 5, 'February', 2016],
    ['C', 12, 'February', 2015],
    ['A', 20, 'March', 2015],
    ['B', 16, 'March', 2015],
    ['C', 30, 'March', 2016],
    ['A', 14, 'March', 2016],
    ['B', 10, 'March', 2016],
    ['C', 24, 'March', 2015]
  ]);

  var filter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter_div_group',
    dataTable: data,
    options: {
      filterColumnLabel: 'Group',
      ui: {
        allowTyping: true,
        allowMultiple: false,
        allowNone: false,
        sortValues: false,
        label: 'Choose group',
      }
    }
  });

  var slider = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter_div_month',
    dataTable: data,
    options: {
      filterColumnLabel: 'Month',
      ui: {
        allowTyping: true,
        allowMultiple: false,
        allowNone: false,
        sortValues: false,
        label: 'Choose month',
      }
    }
  });

  google.visualization.events.addListener(slider, 'ready', function () {
    filter.draw();
  });
  google.visualization.events.addListener(slider, 'statechange', drawChart);
  google.visualization.events.addListener(filter, 'ready', drawChart);
  google.visualization.events.addListener(filter, 'statechange', drawChart);

  function drawChart() {
    // add both filter values to getFilteredRows
    var sliderData = new google.visualization.DataView(slider.getDataTable());
    sliderData.setRows(sliderData.getFilteredRows([{
      column: 0,
      value: filter.getState().selectedValues[0]
    }, {
      column: 2,
      value: slider.getState().selectedValues[0]
    }]));

    // group by 'Group' / 'Year'
    var dataGroup = google.visualization.data.group(
      sliderData,
      [0, 3],
      [{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'Count'}]
    );
    dataGroup.sort([{column: 0},{column: 1}]);

    // build final data table
    var yearData = new google.visualization.DataTable({
      cols: [
        {label: 'Group', type: 'string'}
      ]
    });

    // add column for each year
    var years = dataGroup.getDistinctValues(1);
    for (var i = 0; i < years.length; i++) {
      yearData.addColumn(
        {label: years[i], type: 'number'}
      );
    }

    // add row for each month
    var rowMonth = null;
    var rowIndex = null;
    for (var i = 0; i < dataGroup.getNumberOfRows(); i++) {
      if (rowMonth !== dataGroup.getValue(i, 0)) {
        rowMonth = dataGroup.getValue(i, 0);
        rowIndex = yearData.addRow();
        yearData.setValue(rowIndex, 0, rowMonth);
      }
      for (var x = 1; x < yearData.getNumberOfColumns(); x++) {
        if (yearData.getColumnLabel(x) === dataGroup.getValue(i, 1).toString()) {
          yearData.setValue(rowIndex, x, dataGroup.getValue(i, 2));
        }
      }
    }

    var view = new google.visualization.DataView(yearData);
    view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'
      }, 2, {
        calc: 'stringify',
        sourceColumn: 2,
        type: 'string',
        role: 'annotation'
    }]);

    var ColumnChart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart_div',
      'dataTable': view
    });
    ColumnChart.draw();
  }

  slider.draw();
});

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