带有组的Google柱形图 [英] Google Column Charts with Groups

问题描述

我的数据格式-

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

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

I will be using a filter to display data for each month separated by Group column.

X轴将具有组. Y轴将对所有年份(2014年，2015年，2016年...)进行计数.

X-axis will have Groups. Y-Axis will have Counts for both all years (2014, 2015, 2016...).

类似这样的东西

我正在为此使用Google信息中心.我的代码-

I am using Google Dashboard for this. My code-

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图表在图表中添加两个列值

I want to know how to add two column values in my chart using Google Charts

推荐答案

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

since the data requires manipulation before drawing the chart,
draw the Category Filter and Chart independently

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

use the original data table for slider
then when either the 'ready' or 'statechange' events occur on slider,
use selectedValues to filter the rows

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

once filtered, use data.group to transform years from rows to columns

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

see following working snippet...

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>

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